/* ----------     HTML & BODY CLASS     ---------- */
html { overflow: -moz-scrollbars-none; }
html, body { font-family: "Aeonik"; overflow: hidden; height: 100%; font-size: 13px; margin: 0; }
/*? ----------     HTML & BODY CLASS     ---------- */

/* ----------     SCROLLBAR CLASS     ---------- */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-light::-webkit-scrollbar { width: 5px; }

.scrollbar-none { scrollbar-width: none; overflow-y: auto; overflow-x: hidden; }
.scrollbar-light { scrollbar-width: thin; overflow-y: auto; overflow-x: hidden; }
/*? ----------     SCROLLBAR CLASS     ---------- */

/* ----------     UNIVERSAL CLASS     ---------- */
[data-href] { cursor: pointer; }
input[type="time"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type="time"]::-webkit-clear-button, input[type="time"]::-webkit-inner-spin-button { display: none; -webkit-appearance: none; }
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* gap trennt Icon und Beschriftung. Bei reinen Text-Buttons wirkt es nicht -
   dort gibt es nur ein (anonymes) Flex-Item, zwischen dem nichts liegt. */
.btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; cursor: pointer; padding: 12.5px 20px; text-align: center; border-radius: 6px; outline: none; }
.btn.small { padding: 7.5px 12px; font-size: 12px; }
.btn.disabled { cursor: not-allowed !important; }
.btn.non { background: none; }
.btn i { margin: 0 3px; font-size: 16px; }
.btn-group { display: flex; gap: 10px; }

.disabled { cursor: not-allowed !important; opacity: 0.6; }
.none { display: none !important; }
.d-flex { display: flex !important; }
.d-flex-dir { flex-direction: column !important; }
.j-content-c { justify-content: center !important; }    
.a-item-n { align-items: normal !important; }

.m-0 { margin: 0 !important; }
.mr-5 { margin-right: 5px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }

.f16 { font-size: 16px !important; }
.fw400 { font-weight: 400 !important; }
.br6 { border-radius: 6px !important; }

.error { display: none; font-weight: 500; text-transform: uppercase; font-size: 11px; padding: 5px 15px 10px; margin-top: -5px; margin-bottom: 5px; }
.error.show { display: flex; }
/*? ----------     UNIVERSAL CLASS     ---------- */

/* ----------     GLOBAL     ---------- */
.form .input { margin-bottom: 10px; }

.input-group { position: relative; margin-bottom: 15px; margin-top: 10px; }
.input-group input, .input-group select { width: 100%; height: 42px; padding: 0 15px; border-radius: 6px; box-sizing: border-box; outline: none; font-size: 14px; background: transparent; }
.input-group label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: all 0.2s ease; padding: 0 5px; }
.input-group input:focus + label, .input-group input:valid + label, .input-group select:focus + label, .input-group select:valid + label { top: 0; left: 5px; font-size: 12px; }
.input-group input[type="date"] + label { top: 0; left: 5px; font-size: 12px; }
.input-group textarea { width: 100%; border: none; resize: vertical; padding: 10px 12px; outline: none; box-sizing: border-box; border-radius: 8px; font-size: 14px; }
.input-group textarea + label { top: 0; }
.input-group input[type="number"]::-webkit-outer-spin-button, .input-group input[type="number"]::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.input-group input[type="number"] { appearance: none; -moz-appearance: textfield; }
.input-group input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.input-group input[type="month"]::-webkit-calendar-picker-indicator { opacity: 0; }
.input-group.native select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.input-group.native .input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.input-group.time { display: flex; }
.input-group.time .label { position: relative; left: 0; top: 0; padding: 0; display: flex; align-items: center; margin-bottom: 0 !important; }
.input-group.time .range { display: flex; align-items: center; }
.input-group.time .range .dash { margin: 0 10px; }

.form-step { display: none; }
.form-step.active { display: block; }
.wizard-progress { display: flex; align-items: center; gap: 5px; margin: 15px 0; font-size: 12px; opacity: 0.8; }
.wizard-progress-steps { display: flex; gap: 0.25rem; }
.wizard-step-indicator { width: 8px; height: 8px; border-radius: 50%; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; gap: 1rem; }
.wizard-nav .btn-secondary { cursor: pointer; padding: 0.5rem 1rem; border-radius: 4px; text-align: center; user-select: none; }
.wizard-nav .btn-secondary.disabled { opacity: 0.5; pointer-events: none; }
.leasing-field { display: none; }
.leasing-field.show { display: block; }

.wrapper { display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box; }
.wrapper.portal { height: calc(100% - 70px); margin-top: 70px; } /* Offset unter den fixen 70px-Header, damit die Scrollbar nicht dahinter liegt */
.wrapper.content { padding: 30px 25px 0 25px; }

.wrapper .container { width: 100%; height: 100%; max-width: 1600px; margin-right: auto; margin-left: auto; }
.wrapper .container.large { width: 100%; max-width: 2000px; margin-right: auto; margin-left: auto; }
.wrapper .container.small { width: 100%; max-width: 1440px; margin-right: auto; margin-left: auto; }
.wrapper .container .title { font-size: 38px; }
.wrapper .container .top-menu .title { font-weight: 600; }
.wrapper .container .title.medium { font-size: 22px; }

.split { display: flex; gap: 25px; }

.select .custom-select { position: relative; display: flex; max-height: 42px; border-radius: 6px; min-width: 200px; width: 100%; box-sizing: border-box; cursor: pointer; user-select: none; font-size: 14px; outline: none; }
.select .custom-select.filter { max-width: 320px; }
.select .custom-select .select-display { height: 42px; padding: 0 30px 0 16px; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select .custom-select .input-icon { position: absolute; top: 0; bottom: 0; right: 10px; display: flex; align-items: center; pointer-events: none; }
.select .custom-select .select-dropdown { position: absolute; left: 0; top: 100%; width: max-content; min-width: 100%; max-width: 480px; box-sizing: border-box; border-radius: 6px; z-index: 999; max-height: 260px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; display: none; }
.select .custom-select .select-dropdown::-webkit-scrollbar { width: 5px; }
.select .custom-select.open .select-dropdown { display: flex; flex-direction: column; }
.select .custom-select .select-dropdown .select-search .select-search-input { border: none; border-radius: 0; }
.select .custom-select .select-item { padding: 18px 16px; cursor: pointer; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.2; }
.select .custom-select .select-display .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gesperrte Auswahl: Wert sichtbar, aber nicht änderbar (z. B. Artikelstatus ohne Freigaberecht) */
.select .custom-select.locked { cursor: not-allowed; opacity: 0.6; }

.search { max-width: 400px; width: 100%; }
.search .input { display: flex; align-items: center; border-radius: 6px; padding: 10px 13px; transition: border-color 0.2s; }
.search .input i { transition: color 0.2s; }
.search .input input { border: none; outline: none; flex: 1; margin: 0 6px; font-size: 15px; background: transparent; }
.search .input .hgi-cancel-circle { cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
.search .input .hgi-cancel-circle.show { visibility: visible; opacity: 1; }

.action-menu { position: absolute; z-index: 9999; min-width: 160px; border-radius: 8px; cursor: pointer; overflow: hidden; }
.action-menu .action-item { padding: 15px 20px; }
.action-menu .action-item:hover { border-radius: inherit; }


.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; border-radius: 10px; padding: 25px 30px; scrollbar-width: thin; }
/* Schmale, zurueckhaltende Bildlaufleiste in Modalen. Ohne diese Regeln zeichnet
   der Browser seinen Standardbalken - im dunklen Thema ein heller Klotz neben
   dem Inhalt. Bewusst NICHT ausgeblendet: ein langes Modal wie die Ranking-
   Detailansicht braucht den Hinweis, dass unten noch etwas kommt.
   Die Farben stehen in light/dark/neon.css. */
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { border-radius: 999px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head .modal-title { font-size: 16px; font-weight: 500; }
.modal-head .modal-close { cursor: pointer; font-size: 16px; padding: 8px; margin: -8px; }
.modal-body .info { font-size: 13px; margin: 12px 0 15px; }
/* showConfirm/showNotice setzen ihren Text per textContent - Zeilenumbrueche
   wuerden ohne pre-line zu einem einzigen Fliesstext zusammenlaufen. Fuer
   einzeilige Meldungen aendert die Regel nichts. */
.modal-overlay.notice-modal .modal-body .info { white-space: pre-line; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
/* Modal: leeres, nicht fokussiertes Feld zeigt das Label mittig (wie ein Platzhalter) - auch bei optionalen Feldern ohne required */
.modal .input-group input:placeholder-shown:not(:focus) + label { top: 50%; left: 10px; transform: translateY(-50%); font-size: 13px; }
.modal .input-group.time .label { min-width: 120px; flex-shrink: 0; }
.modal .input-group.time .time-clear { margin-left: 10px; align-self: center; cursor: pointer; visibility: hidden; }
.modal .input-group.time .time-clear.show { visibility: visible; }

body.modal-open { overflow: hidden; }

.toggle-group { display: flex; align-items: center; margin-bottom: 10px; }
/* Variante: Toggle ans Zeilenende, mit Luft nach oben/unten; die zugehörige
   Beschreibung rückt nah an die Zeile, damit die Gruppe klar zuordenbar ist. */
.toggle-group.spread { justify-content: space-between; margin: 22px 0 0; }
.toggle-group.spread + .info { margin: 6px 0 22px; }
.toggle-switch { display: flex; align-items: center; justify-content: end; width: 150px; }
.toggle-switch .checkbox { display: none; }
.checkbox + label { outline: 0px; display: block; width: 2.8em; height: 1.6em; position: relative; cursor: pointer; user-select: none; border-radius: 2em; padding: 2px; transition: 0.4s; }
.checkbox:checked + label::after { left: 50%; }
.checkbox + label:hover::after { will-change: padding; }
.checkbox + label::after { position: relative; display: block; content: ""; width: 50%; height: 100%; left: 0px; border-radius: 2em; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s, margin 0.3s; }

.wrapper.unsupported { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; flex-direction: column; justify-content: center; padding: 50px; z-index: 1004; }
.wrapper.unsupported .title { width: 100%; font-size: 42px; font-weight: 600; margin-bottom: 25px; }
.wrapper.unsupported .title.small { font-size: 20px; font-weight: 400; text-transform: none; }
.wrapper.unsupported [data-href] { text-decoration: underline; font-size: 16px; }

.skeleton { position: relative; overflow: hidden; display: inline-block; width: 100%; height: 14px; border-radius: 4px; }
.skeleton::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; transform: translateX(0); animation: skeleton-shimmer 1.2s linear infinite; pointer-events: none; }
.skeleton.round { height: 120px; width: 120px; border-radius: 50%; margin-right: 15px; }
.skeleton.small { max-width: 60%; height: 14px; border-radius: 4px; }
.skeleton.mid { max-width: 80%; height: 14px; border-radius: 4px; }
.skeleton.large { max-width: 95%; height: 14px; border-radius: 4px; }
.preview.skeleton { width: 200px; }

@keyframes skeleton-shimmer { 0% { transform: translateX(0); } 100% { transform: translateX(300%); }}

@media screen and (max-width: 992px) {
    .wrapper.unsupported { display: flex; }
}
/*? ----------     GLOBAL     ---------- */




/* ----------     BASIS LAYOUT     ---------- */
.wrapper .container .top-menu { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.wrapper .container .top-menu .links { display: flex; align-items: center; }
.wrapper .container .top-menu .links .link { display: flex; align-items: center; position: relative; height: 100%; font-weight: 400; font-size: 15px; cursor: pointer; margin: 0 5px; padding: 10px 5px; }
.wrapper .container .top-menu .links .link::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.wrapper .container .top-menu .links .link:hover::after { transform-origin: left; transform: scaleX(1); }
.wrapper .container .top-menu .links .link.active::after { transform-origin: left; transform: scaleX(1); transition: none; }
.wrapper .container .top-menu .links .link i { display: none; font-size: 20px; font-weight: normal; margin-right: 5px; }

.wrapper .container .content.sub { display: flex; margin-top: 50px; }
.wrapper .container .content .blocks { width: 100%; }
.wrapper .container .content .blocks.margin:first-child { margin-right: 25px; }
.wrapper .container .content .blocks.margin:last-child { margin-left: 25px; }
.wrapper .container .content .blocks .block-wrapper { margin-bottom: 50px; }
.wrapper .container .content .blocks .block-wrapper.half { width: 100%; max-width: 50%; }
.wrapper .container .content .blocks .block-wrapper .top { display: flex; align-items: center; justify-content: space-between; }
.wrapper .container .content .blocks .block-wrapper .top .select { margin: 0 10px 10px 0; }

.title { margin-bottom: 0; }
.wrapper .container .content .blocks .block-wrapper .title { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 20px; }
.wrapper .container .content .blocks .block-wrapper .title.edit { cursor: pointer; justify-content: start; width: fit-content; }
.wrapper .container .content .blocks .block-wrapper .title.edit i { margin-left: 3px; }
.wrapper .container .content .blocks .block-wrapper .line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.wrapper .container .content .blocks .block-wrapper .line .title { margin: 0; }

.wrapper .container .content .blocks .block-wrapper .line .btns { display: flex; margin: 20px 0; }
.wrapper .container .content .blocks .block-wrapper .line .btns .toggle { padding: 10px 13px; margin-right: 8px; font-size: 14px; cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .line .btns .toggle .number { padding: 4px 8px; font-weight: 600; font-size: 13px; margin-right: 6px; }


.wrapper .container .content .blocks .block-wrapper .block { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; padding: 25px 30px; border-radius: 10px; }
.wrapper .container .content .blocks .block-wrapper .block.ua { padding: 0; }
.wrapper .container .content .blocks .block-wrapper .block.ua .block-inner.link { cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block.ua .block-inner { padding: 25px !important; }
.wrapper .container .content .blocks .block-wrapper .block.table { position: relative; padding: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table .table-rows.one-cell { --col-1: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(1),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(1) { flex: var(--col-1); justify-content: flex-start; text-align: left; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(2),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(2) { flex: var(--col-2); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(3),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(3) { flex: var(--col-3); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(4) { flex: var(--col-4); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(5),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(5) { flex: var(--col-5); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(6),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(6) { flex: var(--col-6); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(7),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(7) { flex: var(--col-7); }
.wrapper .container .content .blocks .block-wrapper .block.table.users { --col-1: 0 1 500px; --col-2: 1 1 0; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; --col-6: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.users .value { font-size: 13px; }
.wrapper .container .content .blocks .block-wrapper .block.table.feed { --col-1: 0 1 320px; --col-2: 0 1 300px; --col-3: 0 1 500px; --col-4: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.access { --col-1: 0 1 380px; --col-2: 0 1 120px; --col-3: 0 1 400px; --col-4: 0 1 140px; --col-5: 0 1 170px; --col-6: 0 1 170px; --col-7: 0 1 60px; }
.wrapper .container .content .blocks .block-wrapper .block.table.ots { --col-1: 0 1 450px; --col-2: 0 1 400px; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.shorter { --col-1: 0 1 230px; --col-2: 0 1 750px; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.stats { --col-1: 0 1 40px; --col-2: 0 1 40px; --col-3: 0 1 200px; --col-4: 0 1 200px; --col-5: 1 1 0; --col-6: 1 1 0; --col-7: 1 1 0; --col-8: 1 1 0; --col-9: 1 1 0; --col-10: 1 1 0; --col-11: 1 1 0; --col-12: 1 1 0; --col-13: 1 1 0; --col-14: 1 1 0; --col-15: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.stats .table-rows .rank-number { font-family: monospace; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.files { --col-1: 0 1 300px; --col-2: 0 1 100px; --col-3: 0 1 250px; --col-4: 0 1 100px; --col-5: 0 1 170px; --col-6: 0 1 60px; }
.wrapper .container .content .blocks .block-wrapper .block.table.files .table-rows .action a { font-size: 18px; text-decoration: none; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.agreements-my { --col-1: 0 1 350px; --col-2: 0 1 200px; --col-3: 0 1 100px; --col-4: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.agreements-all { --col-1: 0 1 350px; --col-2: 0 1 250px; --col-3: 0 1 100px; --col-4: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.mgmt-users { --col-1: 0 1 200px; --col-2: 0 1 260px; --col-3: 0 1 170px; --col-4: 0 1 120px; --col-5: 0 1 80px; --col-6: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.mgmt-orgs { --col-1: 0 1 240px; --col-2: 0 1 220px; --col-3: 0 1 70px; --col-4: 0 1 100px; --col-5: 0 1 80px; --col-6: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols.kb-articles { --col-1: 1 1 0; --col-2: 0 1 200px; --col-3: 0 1 180px; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list { display: flex; flex-direction: column; gap: 0; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list .right-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list .right-item .right-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; padding-right: 16px; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list .right-item .right-info .right-name { font-size: 14px; font-weight: 600; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list .right-item .right-info .right-scope { font-size: 12px; line-height: 1.4; }
.wrapper .container .content .blocks .block-wrapper .card .rights-list .rights-subtitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 16px 0 6px; }
.wrapper .container .content .blocks .block-wrapper .card.readonly .toggle-switch { opacity: .5; pointer-events: none; }
.wrapper .container .content .blocks .block-wrapper .card .wp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wrapper .container .content .blocks .block-wrapper .card .wp-chips .wp-chip { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; border-width: 1px; border-style: solid; transition: background .15s ease, color .15s ease, border-color .15s ease; }


.wrapper .container .content .blocks .block-wrapper .card.readonly .wp-chips .wp-chip { opacity: .5; pointer-events: none; }
.wrapper .container .content .blocks .block-wrapper .asg-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 4px; }
.wrapper .container .content .blocks .block-wrapper .asg-detail-meta .asg-readonly-hint { font-size: 12px; }

.wrapper .container .content .blocks .block-wrapper .block .label { flex: 0 0 34%; font-size: 14px; font-weight: 600; margin-right: 10px; cursor: default; }
.wrapper .container .content .blocks .block-wrapper .block .label.toggle { cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block .value { font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .block .country { height: 14px; width: 21px; }
.wrapper .container .content .blocks .block-wrapper .block .country { height: 14px; width: 21px; }

.wrapper .container .content .blocks .block-wrapper .block .top { display: flex; flex-direction: row; align-items: center; width: 100%; margin-bottom: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .top.col { flex-direction: column; align-items: start; margin-bottom: 20px; }
.wrapper .container .content .blocks .block-wrapper .block .top .icon { font-size: 72px; margin-right: 25px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper { display: flex; align-items: center; justify-content: space-between; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .text { font-size: 15px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status { min-width: 200px; margin-left: 50px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status .title { font-size: 16px; font-weight: 400; margin-bottom: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status .text { font-size: 15px; }

.wrapper .container .content .blocks .block-wrapper .block .bottom { margin-top: 20px; }

.wrapper .container .content .blocks .block-wrapper .block .table-header { display: flex; flex-flow: row nowrap; gap: 5px; font-size: 12px; padding: 30px 30px 15px 30px; width: 100%; margin-bottom: 10px; white-space: nowrap; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-header>div { display: flex; flex: 1 0; flex-flow: row nowrap; justify-content: flex-start; word-break: break-word; }
.wrapper .container .content .blocks .block-wrapper .block .table-header>div:last-child { justify-content: flex-end; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows { display: flex; flex-flow: row nowrap; gap: 5px; width: 100%; padding: 20px 30px; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows.action { cursor: pointer; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows.small { padding: 15px 30px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .action:hover { cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .action .ots-revoke:hover { text-decoration: underline; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div { display: flex; flex: 1 0; flex-flow: row nowrap; justify-content: flex-start; align-items: center; word-break: break-word; white-space: nowrap; gap: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.wrap { white-space: normal; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.limit { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div:last-child { justify-content: flex-end; text-align: right; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div i { margin-right: 5px; font-size: 20px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div img { margin-right: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div:first-child { justify-content: flex-start; text-align: left; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div .tag { padding: 5px 10px; border-radius: 8px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .img { height: 35px; width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; margin-right: 6px; flex-shrink: 0; }

.wrapper .container .content .blocks .block-wrapper .block .block-outer { width: 100%; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner { display: flex; align-items: center; width: 100%; padding: 25px 0; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner.non-bb { border-bottom: none; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner:first-child { padding-top: 0; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner:last-child { padding-bottom: 0; border-bottom: none; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info { display: flex; flex-direction: column; }
/*.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info .info { margin-bottom: 20px; } - GEHT NICHT WEGEN FEHLER HAT DANN AUCH ABSTAND */
.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info .info ul li { margin-bottom: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info .label { margin-bottom: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .value { display: flex; justify-content: end; flex: 1 0 25%; }

.wrapper .container .content .blocks .block-wrapper .block .maintenance { display: none; }
.wrapper .container .content .blocks .block-wrapper .block .maintenance.active { display: flex; }

.wrapper .container .content .blocks .sort { display: flex; align-items: center; justify-content: space-between; margin: 10px 20px; }
.wrapper .container .content .blocks .sort .select { display: flex; align-items: center; gap: 10px; position: relative; }
.wrapper .container .content .blocks .sort .select .input-select { width: 100%; min-width: 100px; height: 35px; padding: 0 30px 0 10px; border-radius: 4px; box-sizing: border-box; outline: none; font-size: 14px; background: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; }
.wrapper .container .content .blocks .sort .select .input-icon { position: absolute; top: 0; bottom: 0; right: 10px; display: flex; align-items: center; pointer-events: none; }
.wrapper .container .content .blocks .sort .filter-group { display: flex; gap: 10px; font-size: 15px; cursor: pointer; }
.wrapper .container .content .blocks .sort .filter-group .period-btn { display: flex; align-items: center; position: relative; height: 100%; font-weight: 400; font-size: 15px; cursor: pointer; padding: 10px 2px; }
.wrapper .container .content .blocks .sort .filter-group .period-btn::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.wrapper .container .content .blocks .sort .filter-group .period-btn:hover::after { transform-origin: left; transform: scaleX(1); }
.wrapper .container .content .blocks .sort .filter-group .period-btn.active::after { transform-origin: left; transform: scaleX(1); transition: none; }

.wrapper .container .content .blocks .block-wrapper .hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 25px 10px; }
.wrapper .container .content .blocks .block-wrapper .hero .start { display: flex; align-items: center; }
.wrapper .container .content .blocks .block-wrapper .hero .start .img { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 150px; height: 150px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .img img { width: 100px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .acc-img .img { height: 56px; width: 56px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; margin-right: 14px; flex-shrink: 0; font-size: 22px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .acc-img .img i { font-size: 24px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .acc-img img.img { display: block; object-fit: cover; }
.wrapper .container .content .blocks .block-wrapper .hero .start .acc-img .skeleton.round { height: 56px; width: 56px; margin-right: 14px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info { display: flex; flex-direction: column; gap: 3px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info .title-hero { font-size: 24px; font-weight: 600; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info .category { font-size: 16px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info .hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .img .prod-hero-icon { display: flex; align-items: center; justify-content: center; font-size: 56px; }
.wrapper .container .content .blocks .block-wrapper .hero .back { font-size: 14px; cursor: pointer; padding: 10px 20px; }
.wrapper .container .content .blocks .block-wrapper .card .line .sub-note { font-size: 12px; }

.wrapper .container .content .blocks .block-wrapper .card { display: flex; flex-direction: column; margin-bottom: 25px; padding: 30px; border-radius: 10px; width: 100%; box-sizing: border-box; border-width: 1px; border-style: solid; }
.wrapper .container .content .blocks .block-wrapper .card .title { font-size: 16px; font-weight: 400; }
.wrapper .container .content .blocks .block-wrapper .card .details { display: flex; flex-wrap: wrap; gap: 35px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item { min-width: 200px; font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item.bg { padding: 20px; border-radius: 5px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .key { margin-bottom: 5px; font-size: 12px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .value .wrap { display: flex; gap: 15px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .value .wrap .license { display: flex; align-items: center; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .icon { display: flex; align-items: center; margin-bottom: 15px; font-size: 15px; gap: 5px; }

.wrapper .container .content .blocks .block-wrapper .card .list { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin: 15px 0; }
.wrapper .container .content .blocks .block-wrapper .card .list .label { flex: 0 0 30%; margin-right: 10px; }
.wrapper .container .content .blocks .block-wrapper .card .list .value { min-width: 100px; }

.wrapper .container .pagination { display: flex; justify-content: end; margin: 20px 0; cursor: pointer; }
.wrapper .container .pagination .page-item { display: flex; justify-content: center; align-items: center; padding: 10px; min-width: 20px; }
/*? ----------     BASIS LAYOUT     ---------- */




/* ----------     START     ---------- */
.wrapper.start { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.wrapper.start .content { display: flex; height: 100%; }
.wrapper.start .content .container-info { display: flex; justify-content: center; width: 100%; height: 100%; padding: 0 20px; }
.wrapper.start .content .container-info .logo { width: 30%; min-width: 250px; height: auto; }
.wrapper.start .content .container-info .info { display: flex; flex-direction: column; justify-content: center; }
.wrapper.start .content .container-info .info .title { font-size: 56px; font-weight: 600; line-height: 1.3; }
.wrapper.start .content .container-info .info .text { font-size: 16px; max-width: 550px; line-height: 1.8; margin-top: 40px; }
.wrapper.start .content .container-app { display: flex; justify-content: space-between; width: 100%; min-width: 58%; overflow-y: auto; align-items: center; flex-direction: column; flex-grow: 1; }
.wrapper.start .content .container-app .app { width: 100%; flex: 1; min-height: min-content; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.wrapper.start .content .container-app .app .title { font-size: 38px; font-weight: 600; margin-bottom: 20px; }
.wrapper.start .content .container-app .app .title.small { font-size: 16px; font-weight: 400; }
.wrapper.start .content .container-app .app .form { max-width: 650px; margin: 0 75px; }
.wrapper.start .content .container-app .app .form .inner { height: fit-content; margin-bottom: 20px; }
.wrapper.start .content .container-app .app .form .inner .text { font-size: 16px; margin-bottom: 20px; }

.wrapper.start .content .container-app .app .form .app-microsoft { display: flex; justify-content: center; align-items: center; padding: 7px 10px; font-size: 16px; margin-bottom: 12px; }
.wrapper.start .content .container-app .app .form .app-microsoft .microsoft-logo { display: flex; }

@media screen and (max-width: 992px) {
    .wrapper.start .content .container-info { display: none; }
    .wrapper.start .content .container-info .logo { width: auto; height: 80%; margin: auto; }
    .wrapper.start .content .container-app .app .form { margin: 0 25px; }
}
/*? ----------     START     ---------- */

/* ----------     HEADER     ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 25px; z-index: 1000; }

/* Blur-Backdrop bei offenem User-Menü (Body-Klasse via main.js); liegt unter dem Header (z-index 1000), damit Header + Menü scharf bleiben */
body.user-menu-open::before { content: ""; position: fixed; inset: 0; z-index: 990; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: userMenuBlurIn .18s ease; }
@keyframes userMenuBlurIn { from { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } to { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } }
.header .logo { display: flex; }
.header .logo .svg { width: 85px; }

.header .menu { display: flex; align-items: center; justify-content: center; height: 100%; width: 800px; }
.header .menu .link { display: flex; align-items: center; position: relative; padding: 0 10px; height: 100%; font-weight: 600; font-size: 14px; cursor: pointer; }
.header .menu .link:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.header .menu .link:hover:after { transform-origin: left; transform: scaleX(1); }
.header .menu .link.active:after { transform-origin: left; transform: scaleX(1); transition: none; }

.header .user { display: flex; align-items: center; position: relative; height: 100%; }
.header .user .link { display: flex; align-items: center; cursor: pointer; height: 100%; font-size: 14px; font-weight: 500; line-height: 130%; padding: 14px 24px; }
.header .user .link.center { justify-content: center; }
.header .user .link i { padding: 8px; }
.header .user .link .name { margin-right: 8px; }
.header .user .link .img { min-width: 35px; min-height: 35px; max-height: 35px; max-width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; }

.header .user .link .notifications { display: flex; flex-direction: column; max-width: 475px; height: 100%; }
.header .user .link .notifications .top { display: flex; align-items: center; justify-content: space-between; height: 70px; min-height: 70px; padding: 0 20px; }
.header .user .link .notifications .top .title { font-size: 16px; font-weight: 500; }
.header .user .link .notifications .top i { border-radius: 10px; cursor: pointer; }

.header .user .link .notifications .content .notification-btn { display: flex; justify-content: end; align-items: center; margin: 20px; }
.header .user .link .notifications .content .notification-btn span { cursor: pointer; }
.header .user .link .notifications .content .notification-btn i { font-size: 20px; margin-left: 10px; }
.header .user .link .notifications .content .notification-list { font-weight: 400; }
.header .user .link .notifications .content .notification-list .notification-group-header { font-size: 16px; margin: 20px; }
.header .user .link .notifications .content .notification-list .notification-item { position: relative; display: flex; flex-direction: row; align-items: center; margin: 20px 15px; padding: 20px 15px; font-size: 13px; font-weight: 400; border-radius: 10px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-icon { display: flex; justify-content: center; align-items: center; min-width: 40px; width: 40px; height: 40px; border-radius: 50%; margin-right: 20px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body { white-space: normal; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-title { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-meta { font-size: 12px; }
.header .user .link .notifications .content .notification-list .notification-empty { text-align: center; }
.header .user .link .notifications .content .notification-list .notification-divider { width: 100%; height: 1px; margin: 10px 0; }
.header .user .link .notifications .content .notification-list .notification-item.clickable { cursor: pointer; }


/* Aktionszeile unter der Nachricht: unterscheidet klickbare Eintraege ("Öffnen") von reinen Hinweisen */
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action { display: flex; align-items: center; margin-top: 8px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action .notification-open,
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action .notification-hint { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 20px; padding: 0 8px; font-size: 10px; font-weight: 500; border-radius: 20px; white-space: nowrap; }
/* Engerer Abstand als beim Hinweis-Chip: der Pfeil bringt eigene Seitenluft mit,
   die gemeinsamen 4px wirkten dadurch wie eine Luecke im Wort. */
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action .notification-open { gap: 1px; border-width: 1px; border-style: solid; transition: background .15s ease, color .15s ease; }
/* padding: 0 hebt das globale ".header .user .link i { padding: 8px }" auf. Jener
   Nachfahren-Selektor trifft ALLE Icons im Aufklapper, also auch diesen Pfeil -
   die 8px lagen als unsichtbarer Rand zwischen Wort und Zeichen und liessen sich
   ueber gap nicht wegregeln. Bewusst nur hier, damit Glocke, Schliessen-Kreuz und
   der Pfeil im Benutzermenue ihre Klickflaeche behalten. */
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action .notification-open i { font-size: 11px; padding: 0; }

.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-action .notification-hint { border-width: 1px; border-style: solid; }

/* Glocken-Punkt bei ungelesenen Benachrichtigungen (Klasse 'unread' via main.js) */
.header .user .link[data-menu="notification-menu"] { position: relative; }
.header .user .link[data-menu="notification-menu"].unread::after { content: ""; position: absolute; top: calc(50% - 13px); right: 19px; width: 8px; height: 8px; border-radius: 50%; }

/* Benachrichtigungs-Toasts unten rechts - invertierte Farben wie .req-toast,
   damit sie sich klar vom Seiteninhalt abheben */
.notification-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.notification-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; animation: notifToastIn .25s ease both; }
.notification-toast.hide { opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }
.notification-toast.clickable { cursor: pointer; }
.notification-toast.prio-high { border-left-width: 3px; border-left-style: solid; }
.notification-toast .nt-body { flex: 1 1 auto; min-width: 0; }
.notification-toast .nt-title { font-size: 13px; font-weight: 600; }
.notification-toast .nt-message { font-size: 12px; opacity: .75; margin-top: 3px; word-break: break-word; }
.notification-toast .nt-close { flex: 0 0 auto; cursor: pointer; font-size: 12px; opacity: .7; padding: 2px; }
.notification-toast .nt-close:hover { opacity: 1; }
@keyframes notifToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.header .user .link .user-info { display: flex; flex-direction: column; align-items: normal; position: relative; height: 100%; }
.header .user .link .user-info .user-name { display: flex; flex-direction: row; margin-bottom: 6px; }
.header .user .link .user-info .user-name .img { margin-right: 6px; }
.header .user .link .user-info .user-name .name { font-size: 20px; font-weight: 600; line-height: 130%; margin-top: 8px; }
.header .user .link .user-info .user-link { font-size: 13px; }

.header .user .link .rank { display: flex; flex-direction: column; font-size: 13px; padding: 0 24px; font-size: 12px; font-weight: 600; cursor: pointer; }
.header .user .link .rank .card { display: flex; align-items: center; margin-bottom: 2px; }
.header .user .link .rank .card img { width: 50px; }
.header .user .link .rank .card img.small { width: 30px; }
.header .user .link .rank .card .meta { padding-left: 10px; }
.header .user .link .rank .season { font-size: 10px; }
.header .user .link .rank .info { display: flex; align-items: center; gap: 3px; }
.header .user .link .rank .info.small { font-size: 9px; }
.header .user .link .rank .progress .track { position: relative; height: 4px; width: 100%; }
.header .user .link .rank .progress .track .fill { width: 0%; height: 100%; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }

.header .user .link .separator { margin: 12px 0; }

.header .link.has-menu .sub { display: none; position: fixed; top: 70px; left: 0; right: 0; justify-content: center; padding: 20px; z-index: 1001; cursor: default; }
.header .link.has-submenu .sub.full { position: fixed; top: 0; right: 0; bottom: 0; border-radius: 0; min-width: 480px; }
.header .link.has-menu:hover .sub:not(.small) { display: flex; }
.header .link.has-menu .sub .content { display: flex; width: 730px; justify-content: flex-start; }
.header .link.has-menu .sub .content .sites { display: flex; gap: 24px; flex-flow: wrap; flex-direction: column; margin: 40px 0; }
.header .link.has-menu .sub .content .sites.h { flex: 0 0 30%; }
.header .link.has-menu .sub .content .sites .site { width: fit-content; }
.header .link.has-menu .sub .content .separator { margin: 20px 50px 20px; }

.header .link.has-submenu { position: relative; padding: 0 5px; }
.header .link.has-submenu .sub { display: none; flex-direction: column; position: absolute; min-width: max-content; top: 75px; right: 0; left: auto; z-index: 1001; white-space: nowrap; cursor: default; border-radius: 10px; }
.header .link.has-submenu.min .sub { min-width: 280px; }
.header .link.has-submenu .sub.open { display: flex; }

.sub .link { padding: 20px; }
.sub .link:last-child { margin-bottom: 12px; }
.sub .link.user-info { padding: 15px 20px 5px; }
/*? ----------     HEADER     ---------- */

/* ----------     REQUESTS     ---------- */
.wrapper .container .content.requests .top { display: flex; justify-content: space-between; align-items: center; }
.wrapper .container .content.requests { display: flex; }
.wrapper .container .content.requests .main { width: 100%; }
.wrapper .container .content.requests .main .top { margin: 15px 0 30px 0; }
.wrapper .container .content.requests .main .top .links { display: flex; }
.wrapper .container .content.requests .main .top .links .link:first-of-type { padding-left: 0; margin-left: 0; }
.wrapper .container .content.requests .main .top .links .link { position: relative; display: flex; align-items: center; margin: 0 10px; padding: 20px 10px; font-size: 18px; cursor: pointer; }
.wrapper .container .content.requests .main .top .links .link:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; -o-transition: transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; }
.wrapper .container .content.requests .main .top .links .link:hover:after { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.wrapper .container .content.requests .main .top .links .link.active:after { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.wrapper .container .content.requests .main .top .links .link.searching { display: none; }
.wrapper .container .content.requests .main .top .links .link.search.searching { display: flex !important; }
.wrapper .container .content.requests .main .top .links .link .count { font-size: 20px; font-weight: 600; margin-left: 5px; }

.wrapper .container .topbar { display: flex; justify-content: space-between; align-items: center; }

.wrapper .container .content.requests .main .table { border-radius: 6px; }
.wrapper .container .content.requests .main .table .row { display: flex; align-items: center; min-height: 70px; padding: 14px 24px; cursor: pointer; }
.wrapper .container .content.requests .main .table .row.non { font-size: 24px; font-weight: 600; }

.wrapper .container .content.requests .main .table .row .delimiter { width: 5px; height: 5px; border-radius: 50%; margin: 0 8px; }

.wrapper .container .content.requests .main .table .row .user { display: flex; flex-direction: column; width: 100%; }
.wrapper .container .content.requests .main .table .row .user .outer-user { display: flex; align-items: center; margin: 0 0 12px 0; }
.wrapper .container .content.requests .main .table .row .user .outer-user .tag { padding: 3px 6px; border-radius: 3px; margin-right: 8px; font-size: 11px; }
.wrapper .container .content.requests .main .table .row .user .inner-user { display: flex; }
.wrapper .container .content.requests .main .table .row .user .inner-user .img { height: 35px; width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; margin-right: 12px; flex-shrink: 0; }
.wrapper .container .content.requests .main .table .row .user .inner-user .request { display: flex; flex-direction: column; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject { display: flex; flex-direction: row; align-items: center; font-size: 17px; font-weight: 600; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject .number { font-size: 13px; font-weight: 400; margin-left: 4px; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject .time { font-size: 13px; }
.wrapper .container .content.requests .main .table .row .user .inner-user .user { display: flex; flex-direction: row; align-items: center; }
.wrapper .container .content.requests .main .table .row .inner-values { max-width: 240px; width: 100%; }
.wrapper .container .content.requests .main .table .row .inner-values .value { display: flex; align-items: center; font-weight: 600; }
.wrapper .container .content.requests .main .table .row .inner-values .value .status { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.wrapper .container .content.requests .sidebar { max-width: 460px; width: 100%; }
.wrapper .container .content.requests .sidebar .inner { margin: 10px 30px; border-radius: 6px; }
.wrapper .container .content.requests .sidebar .inner .wrapper { margin-bottom: 30px; padding: 15px 30px; border-radius: 10px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .top { display: flex; align-items: center; margin-bottom: 18px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .top .title { margin-bottom: 0; }
.wrapper .container .content.requests .sidebar .inner .wrapper .top .new { cursor: pointer; }
.wrapper .container .content.requests .sidebar .inner .wrapper .title { font-size: 26px; font-weight: 600; margin-bottom: 18px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item { position: relative; display: flex; flex-direction: column; font-size: 16px; margin-bottom: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .disruptions .item { font-size: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .disruptions .item .disruption-title { font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .disruptions .item .disruption-description { margin-bottom: 8px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .disruptions .item .disruption-status { margin-bottom: 2px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool { font-size: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool { font-size: 13px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool .count { font-weight: 600; font-size: 14px; margin-left: 6px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .seen { display: flex; align-items: center; font-size: 11px; margin: 3px 0; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .seen .status { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }

/* Einzel-Ticket (Detailansicht): Topbar + 3 Spalten (Antragsteller | Konversation | Ticket-Werkzeuge) */
.content.request-detail { height: 100%; display: flex; flex-direction: column; }
.content.request-detail .img { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.content.request-detail .img.non { display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Topbar */
.content.request-detail .rq-top { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom-width: 1px; border-bottom-style: solid; }
.content.request-detail .rq-back { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }

.content.request-detail .rq-back i { font-size: 18px; }
.content.request-detail .rq-ttl { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content.request-detail .rq-st { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.content.request-detail .rq-tid { font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.content.request-detail .rq-tid:hover { opacity: .75; }
.content.request-detail .rq-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; }
.content.request-detail .rq-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 15px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.content.request-detail .rq-btn i { font-size: 14px; }
.content.request-detail .rq-actmenu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 236px; border-width: 1px; border-style: solid; border-radius: 10px; padding: 6px; z-index: 40; display: none; }
.content.request-detail .rq-acts.open .rq-actmenu { display: block; }
.content.request-detail .rq-actitem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 7px; font-size: 13px; cursor: pointer; }

.content.request-detail .rq-actitem i { font-size: 16px; }


.content.request-detail .rq-actsep { height: 1px; margin: 5px 4px; }
.content.request-detail .rq-tools-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 7px; cursor: pointer; }

.content.request-detail .rq-tools-toggle i { font-size: 17px; }


/* Status-Punkte (kaum Farbe) */
.content.request-detail .rq-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }

.content.request-detail .rq-state .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }


/* Priorität als Pill im Ticket-Header – identisch zur Liste (.req-prio-tag).
   Vier Stufen aus der Prioritätsmatrix des Servicevertrags. */
/* Basis bewusst nur auf .rq-prio-tag: eine zusaetzlich qualifizierte Regel waere
   spezifischer als die Stufen-Modifier und wuerde deren Farben ueberschreiben. */
.rq-prio-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }




.content.request-detail .rq-st .rq-prio-tag:empty { display: none; }

/* Spalten */
.content.request-detail .rq-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 432px 1fr 448px; position: relative; }
.content.request-detail .rq-rail { overflow-y: auto; min-height: 0; padding: 22px; }
.content.request-detail .rq-rail.l { border-right-width: 1px; border-right-style: solid; }
.content.request-detail .rq-rail.r { border-left-width: 1px; border-left-style: solid; }

/* Identität (Antragsteller) */
.content.request-detail .rq-id { padding-bottom: 20px; }
.content.request-detail .rq-id .rq-id-head { display: flex; align-items: center; gap: 14px; }
.content.request-detail .rq-id .rq-id-head.rq-clickable { cursor: pointer; border-radius: 10px; margin: 0 -8px; padding: 8px; transition: background .15s ease; }

.content.request-detail .rq-id .img { width: 56px; height: 56px; font-size: 20px; }
.content.request-detail .rq-id .rq-id-main { min-width: 0; }
.content.request-detail .rq-id .rq-id-nm { font-size: 17px; font-weight: 600; }
.content.request-detail .rq-id .rq-id-rl { font-size: 13px; margin-top: 3px; }
.content.request-detail .rq-reach { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; margin-top: 13px; }
.content.request-detail .rq-reach.off { font-weight: 400; }
.content.request-detail .rq-reach .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }


/* Karten */
.content.request-detail .rq-card { border-radius: 12px; padding: 16px 18px; margin-top: 20px; border-width: 1px; border-style: solid; }
.content.request-detail .rq-card-h { font-size: 14px; margin: 20px 2px 9px; display: flex; align-items: center; gap: 8px; }
.content.request-detail .rq-card-h + .rq-card { margin-top: 0; }
/* Übernehmen-Knopf in der Bearbeitungs-Karte: abgesetzt unter den Feldern */
.content.request-detail .rq-card .rq-take { margin-top: 14px; padding-top: 14px; border-top-width: 1px; border-top-style: solid; }
.content.request-detail .rq-rail > .rq-card-h:first-child { margin-top: 0; }
.content.request-detail .rq-card-h .rq-count { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Zahl direkt hinter dem Titel (mit kleinem Abstand) statt rechtsbündig am Ende. */
.content.request-detail .rq-card-h .rq-count.inline { margin-left: 3px; }
.content.request-detail .rq-f { margin-bottom: 14px; }
.content.request-detail .rq-f:last-child { margin-bottom: 0; }
.content.request-detail .rq-f .k { font-size: 12px; margin-bottom: 4px; }
.content.request-detail .rq-f .v { font-size: 13px; word-break: break-word; }
/* Berechtigung des Anfragenden fuer Systemanfragen. Zurueckhaltend gehalten -
   es ist eine Angabe zur Person wie die Rufnummer, keine Warnung. */
.content.request-detail .rq-f .v .rq-perm { font-weight: 600; }
/* Der Hinweis steht auf einer eigenen Zeile unter dem Ja/Nein - hinter dem Wort
   waere er in der schmalen Spalte umgebrochen und haette wie ein abgeschnittener
   Halbsatz gewirkt. */
.content.request-detail .rq-f .v .rq-perm-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; }
/* Rechte des Anfragenden als Chips: mehrere kurze Namen, die umbrechen
   duerfen - eine Aufzaehlung im Fliesstext waere schwerer zu ueberfliegen. */
.content.request-detail .rq-f .v .rq-rights { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.content.request-detail .rq-f .v .rq-right { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
/* Stand der Freigabepflicht. Farben je Theme (gelb offen, gruen/rot entschieden). */
.content.request-detail .rq-review { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.content.request-detail .rq-review i { flex: none; font-size: 17px; margin-top: 1px; }
.content.request-detail .rq-st .rq-wptag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.content.request-detail .rq-f .v a, .content.request-detail .tel-link { text-decoration: none; }
.content.request-detail .rq-f .v a:hover, .content.request-detail .tel-link:hover { text-decoration: underline; }
.content.request-detail .rq-person { display: flex; align-items: center; gap: 9px; }
.content.request-detail .rq-person .img { width: 28px; height: 28px; font-size: 11px; }

/* Gruppen */
.content.request-detail .rq-groups .g { padding: 9px 0; font-size: 13px; border-top-width: 1px; border-top-style: solid; overflow-wrap: anywhere; }
.content.request-detail .rq-groups .g:first-child { padding-top: 0; border-top: none; }
.content.request-detail .rq-groups .g.more { cursor: pointer; }
.content.request-detail .rq-empty { font-size: 12px; }

/* Zugriff (Avatar-Stack) */
.content.request-detail .rq-access { display: flex; align-items: center; gap: 12px; }
.content.request-detail .rq-stack { display: flex; align-items: center; }
.content.request-detail .rq-stack .img { width: 32px; height: 32px; font-size: 12px; border-width: 2px; border-style: solid; margin-left: -9px; }
.content.request-detail .rq-stack .img:first-child { margin-left: 0; }
.content.request-detail .rq-access .cap { font-size: 12px; }
.content.request-detail .rq-card.rq-clickable { cursor: pointer; transition: background .15s ease; }


/* Admins im Ticket: letzter Schreiber links (allein), übrige rechts */
.content.request-detail .rq-admins { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.content.request-detail .rq-admins-lead { display: flex; align-items: center; gap: 9px; }
.content.request-detail .rq-admins-lead .img { width: 32px; height: 32px; font-size: 12px; }
.content.request-detail .rq-admins-lead .nm { font-size: 13px; font-weight: 600; }
.content.request-detail .rq-admins-rest { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left-width: 1px; border-left-style: solid; }
.content.request-detail .rq-admins-rest .cap { font-size: 12px; }

/* Menü-Tabs (Offen/Frühere) */
.content.request-detail .rq-tabs { display: flex; gap: 18px; border-bottom-width: 1px; border-bottom-style: solid; margin-bottom: 14px; }
.content.request-detail .rq-tabs .tab { position: relative; padding: 6px 1px 10px; font-size: 13px; font-weight: 500; cursor: pointer; }
.content.request-detail .rq-tabs .tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }


.content.request-detail .rq-tabs .tab.active::after { transform: scaleX(1); transform-origin: left; }
.content.request-detail .rq-prev-list { display: none; }
.content.request-detail .rq-prev-list.active { display: block; }
.content.request-detail .rq-prev { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top-width: 1px; border-top-style: solid; cursor: pointer; }
.content.request-detail .rq-prev:first-child { border-top: none; padding-top: 0; }
.content.request-detail .rq-prev .pm { flex: 1 1 auto; min-width: 0; }
.content.request-detail .rq-prev .pm .pt { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content.request-detail .rq-prev .pm .pt-row { display: flex; align-items: center; gap: 8px; }
.content.request-detail .rq-prev .pm .pt-row .pt { flex: 1 1 auto; min-width: 0; }
.content.request-detail .rq-prev .pt-tag { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.content.request-detail .rq-prev .pm .pmeta { font-size: 11px; margin-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.content.request-detail .rq-prev .pid { font-size: 11px; font-variant-numeric: tabular-nums; }


/* Prioritätsverteilung des Antragstellers (Balken Hoch vs. Normal, Hover-Details via title) */
.content.request-detail .prio-dist { display: flex; flex-direction: column; gap: 11px; }
.content.request-detail .prio-dist .pd-bar { display: flex; height: 2px; border-radius: 999px; overflow: hidden; }
.content.request-detail .prio-dist .pd-bar .pd-seg { height: 100%; }




.content.request-detail .prio-dist .pd-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.content.request-detail .prio-dist .pd-legend .pd-item { display: inline-flex; align-items: center; gap: 6px; }
.content.request-detail .prio-dist .pd-legend .pd-item b { font-weight: 700; }
.content.request-detail .prio-dist .pd-legend .pd-dot { width: 8px; height: 8px; border-radius: 50%; }




.content.request-detail .prio-dist .pd-legend .pd-total { margin-left: auto; }

/* Interne Notizen – Auslöser (öffnet Panel) */
.content.request-detail .rq-notes-trigger { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.content.request-detail .rq-notes-trigger .nt-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.content.request-detail .rq-notes-trigger .nt-m { flex: 1 1 auto; min-width: 0; }
.content.request-detail .rq-notes-trigger .nt-m .t { font-size: 13px; font-weight: 600; }
.content.request-detail .rq-notes-trigger .nt-m .s { font-size: 12px; margin-top: 2px; }
.content.request-detail .rq-notes-trigger .chev { font-size: 18px; }




/* Mitte: Konversation */
.content.request-detail .rq-mid { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.content.request-detail .rq-mid-scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; }
.content.request-detail .rq-conv { display: flex; flex-direction: column; gap: 22px; }
.content.request-detail .rq-chat { display: flex; flex-direction: column; gap: 22px; }
.content.request-detail .rq-sla { flex: 0 0 auto; display: flex; gap: 12px; padding: 22px 26px 18px; border-bottom-width: 1px; border-bottom-style: solid; }
/* Rahmen auf ALLEN Seiten, standardmaessig unsichtbar. Frueher stand hier nur
   border-left: 3px - die Ampel faerbte deshalb bloss die linke Kante, was neben
   dem sonst einfarbigen Rahmen wie ein Darstellungsfehler aussah. Die 1px sind
   von Anfang an reserviert, damit beim Wechsel des Zustands nichts springt.
   Die sichtbare Rahmenfarbe setzen light/dark/neon.css. */
.content.request-detail .rq-sla .s { flex: 1 1 0; min-width: 0; border-radius: 10px; padding: 13px 16px; border: 1px solid transparent; }
.content.request-detail .rq-sla .s .k { font-size: 11px; display: flex; align-items: baseline; gap: 5px; }
.content.request-detail .rq-sla .s .k .sla-unit { font-size: 10px; opacity: .75; }
.content.request-detail .rq-sla .s .v { font-size: 16px; font-weight: 600; margin-top: 4px; }
/* Nebenzeile: reale Dauer bzw. Ziel und Restzeit - die SLA misst nur Servicezeit */
.content.request-detail .rq-sla .s .sub { font-size: 11px; margin-top: 3px; line-height: 1.4; }
.content.request-detail .rq-sla .s .sub:empty { display: none; }
/* Ampel: gruen im Ziel, gelb ab 75 % des Ziels, rot ueberfaellig, grau pausiert.
   Gefaerbt wird der GESAMTE Rahmen, nicht nur die linke Kante. */
/* Die Ampelfarben stehen in light/dark/neon.css. */
/* Reaktions- und Lösungsbox: solange keine Ampelklasse gesetzt ist, bleibt der
   Rahmen unsichtbar wie bei den übrigen Boxen.
   ACHTUNG Reihenfolge: .s.no-accent und .s.sla-* sind gleich spezifisch (0,5,0),
   es gewinnt also die spaeter notierte Regel. In light/dark/neon.css steht
   .no-accent deshalb VOR den Ampel-Regeln - sonst wuerde no-accent die Ampel
   ueberschreiben und der farbige Rahmen fehlte. Die Themes brauchen ihre eigene
   .no-accent-Regel, weil sie sonst gegen das transparent von hier verlieren. */
.content.request-detail .rq-sla .s.no-accent { border-color: transparent; }
.content.request-detail .rq-msg { display: flex; gap: 10px; max-width: 80%; }
.content.request-detail .rq-msg.left { margin-right: auto; }
.content.request-detail .rq-msg.right { margin-left: auto; flex-direction: row-reverse; }
.content.request-detail .rq-msg .img { width: 30px; height: 30px; font-size: 12px; margin-top: 20px; }
.content.request-detail .rq-msg .bub { display: flex; flex-direction: column; min-width: 0; }
.content.request-detail .rq-msg .meta { font-size: 11px; margin-bottom: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.content.request-detail .rq-msg.right .bub { align-items: flex-end; }
.content.request-detail .rq-msg.right .meta { justify-content: flex-end; }
.content.request-detail .rq-msg .adm { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; }
.content.request-detail .rq-msg .body { max-width: fit-content; padding: 12px 15px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; }

/* Anhänge stehen unter der jeweiligen Nachricht: einheitlich breite Zeilen, sodass
   unterschiedlich lange Dateinamen ein ruhiges Bild ergeben (Name kürzt mit Ellipsis). */
.content.request-detail .rq-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 260px; max-width: 100%; }
.content.request-detail .rq-att { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 9px; border-width: 1px; border-style: solid; text-decoration: none; }

.content.request-detail .rq-att-ic { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.content.request-detail .rq-att-name { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rechte Leiste: dieselben Zeilen, aber volle Kartenbreite (schnelles Auffinden aller Anhänge). */
.content.request-detail .rq-att-list { display: flex; flex-direction: column; gap: 6px; }
.content.request-detail .rq-empty-chat { font-size: 13px; }

/* Antwortbox */
.content.request-detail .rq-reply { flex: 0 0 auto; padding: 16px 26px 20px; border-top-width: 1px; border-top-style: solid; }
.content.request-detail .rq-reply textarea { width: 100%; box-sizing: border-box; resize: none; border-width: 1px; border-style: solid; border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 13px; min-height: 150px; line-height: 1.5; scrollbar-width: thin; }
/* Bildlaufleiste wie im Modal: transparenter Track, sonst übermalt sie die runden
   Ecken (12px) der Border; der Track-Rand hält den Daumen aus den Ecken heraus. */
.content.request-detail .rq-reply textarea::-webkit-scrollbar { width: 6px; }
.content.request-detail .rq-reply textarea::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.content.request-detail .rq-reply textarea::-webkit-scrollbar-thumb { border-radius: 999px; }
.content.request-detail .rq-reply textarea:focus { outline: none; }
.content.request-detail .rq-reply-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; }
/* Master: "Datei anhaengen" und "Hilfe-Artikel" gehoeren als Werkzeuge zusammen
   und stehen links beieinander; nur "Absenden" wird nach rechts geschoben.
   space-between haette die drei gleichmaessig verteilt und den mittleren Knopf
   in die Mitte gesetzt. Die Nutzeransicht (.ureq) bleibt unberuehrt - dort steht
   zusaetzlich "Schliessen" in dieser Zeile, deren Anordnung eigens abgestimmt ist. */
.content.request-detail:not(.ureq) .rq-reply-foot { justify-content: flex-start; gap: 22px; }
.content.request-detail:not(.ureq) .rq-reply-foot .rq-send-wrap { margin-left: auto; }
.content.request-detail .rq-reply-foot .att { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; }

.content.request-detail .rq-reply-foot .att i { font-size: 15px; }
.content.request-detail .rq-reply-foot .att input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.content.request-detail .rq-reply-foot .rq-send-wrap { position: relative; display: inline-flex; }
/* Voll gerundet: der Aufklapper rechts daneben ist entfallen, deshalb braucht
   "Absenden" keine abgeflachte rechte Seite mehr. */
.content.request-detail .rq-reply-foot .rq-send { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.content.request-detail .rq-reply-foot .rq-send-wrap.disabled .rq-send { cursor: not-allowed; }

/* Antwortleiste im MASTER (.actions): alle Ausgänge nebeneinander sichtbar statt
   im Aufklapper. "Absenden" bleibt der primäre Knopf, die statusändernden
   Aktionen stehen als ruhigere Buttons daneben – sichtbar, aber nicht der Weg
   des geringsten Widerstands. In der Kundenansicht steht "Schließen" aus
   demselben Grund offen neben "Absenden". */
.content.request-detail .rq-reply-foot .rq-send-wrap.actions { align-items: stretch; gap: 8px; }
.content.request-detail .rq-reply-foot .rq-send-alt { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.2; border-width: 1px; border-style: solid; transition: background .12s ease, color .12s ease; }

.content.request-detail .rq-reply-foot .rq-send-alt i { font-size: 15px; }
.content.request-detail .rq-reply-foot .rq-send-alt.none { display: none; }
.content.request-detail .rq-reply-foot .rq-send-wrap.disabled .rq-send-alt { opacity: .5; cursor: not-allowed; }


/* Skeletons */
.content.request-detail .skeleton { display: inline-block; border-radius: 4px; }
.content.request-detail .skeleton.circle { height: 56px; width: 56px; border-radius: 50%; }
.content.request-detail .skeleton.line { height: 12px; width: 140px; }
.content.request-detail .skeleton.line.lg { height: 16px; width: 200px; }

/* Interne Notizen: Slide-in-Panel (wie Ticketzuweisung) */
.rq-drawer { position: fixed; inset: 0; z-index: 1050; display: none; }
.rq-drawer.open { display: block; }
.rq-drawer .rq-drawer-backdrop { position: absolute; inset: 0; }
.rq-drawer .rq-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 880px; max-width: 96vw; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; }
.rq-drawer .rq-drawer-head { flex: 0 0 auto; padding: 22px 28px 18px; border-bottom-width: 1px; border-bottom-style: solid; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rq-drawer .rq-drawer-head .dh-t { font-size: 18px; font-weight: 600; }
.rq-drawer .rq-drawer-head .dh-sub { font-size: 12px; margin-top: 4px; }
.rq-drawer .rq-drawer-head .dh-close { cursor: pointer; font-size: 22px; line-height: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; }

.rq-drawer .rq-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 28px; }
.rq-drawer .rq-drawer-foot { flex: 0 0 auto; padding: 16px 28px; border-top-width: 1px; border-top-style: solid; }
.rq-drawer .rq-note { border-radius: 10px; padding: 14px 16px; max-width: 620px; }
.rq-drawer .rq-note + .rq-note { margin-top: 10px; }
.rq-drawer .rq-note .nb { font-size: 13px; white-space: pre-wrap; line-height: 1.5; word-break: break-word; }
.rq-drawer .rq-note .nm { font-size: 11px; margin-top: 8px; }
.rq-drawer .rq-note-empty { font-size: 13px; }
.rq-drawer textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; padding: 11px 13px; border-radius: 10px; border-width: 1px; border-style: solid; font: inherit; font-size: 13px; }
.rq-drawer textarea:focus { outline: none; }
.rq-drawer .rq-drawer-foot .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.rq-drawer .rq-drawer-foot .hint { font-size: 11px; }
.rq-drawer .rq-save { display: inline-flex; align-items: center; cursor: pointer; padding: 9px 18px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.rq-drawer .rq-save.disabled { cursor: not-allowed; }

/* Aktions-Panel (Priorität / Workpool / Zugriff) */
.rq-drawer.compact .rq-drawer-panel { width: 460px; }
.rq-drawer .img { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rq-drawer .img.non { display: flex; align-items: center; justify-content: center; font-weight: 600; }
.rq-drawer .drw-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-width: 1px; border-style: solid; border-radius: 10px; cursor: pointer; }
.rq-drawer .drw-opt + .drw-opt { margin-top: 10px; }


.rq-drawer .drw-opt .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }


.rq-drawer .drw-opt .lbl { font-size: 14px; font-weight: 500; }
.rq-drawer .drw-opt .chk { margin-left: auto; font-size: 17px; }

/* Einstufung: Kategorie / Impact / Urgency als Segment-Umschalter, darunter die
   resultierende Prio 1-4 samt Reaktionsziel (Anhang 1.1, Ziff. 6.4). */
.rq-drawer .drw-seg-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 7px; }
.rq-drawer .drw-seg-lbl:first-child { margin-top: 0; }
.rq-drawer .drw-seg { display: flex; gap: 3px; padding: 3px; border-radius: 9px; border-width: 1px; border-style: solid; }
.rq-drawer .drw-seg .drw-seg-btn { flex: 1 1 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; padding: 9px 6px; border-radius: 7px; cursor: pointer; }

.rq-drawer .drw-seg .drw-seg-btn.active { font-weight: 600; }
.rq-drawer .drw-prio-result { margin-top: 18px; padding: 13px 15px; border-radius: 10px; border-left-width: 3px; border-left-style: solid; }



.rq-drawer .drw-prio-result .drw-prio-head { font-size: 14px; }
.rq-drawer .drw-prio-result .drw-prio-sub { font-size: 11px; margin-top: 5px; line-height: 1.5; }
.rq-drawer .drw-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.rq-drawer .drw-wp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; }


.rq-drawer .drw-wp .nm { font-size: 14px; }
.rq-drawer .drw-wp .ct { margin-left: auto; font-size: 12px; }
.rq-drawer .drw-search { display: flex; align-items: center; gap: 8px; border-width: 1px; border-style: solid; border-radius: 9px; padding: 9px 12px; margin-bottom: 6px; }
.rq-drawer .drw-search input { border: none; background: transparent; outline: none; font: inherit; font-size: 13px; width: 100%; }

.rq-drawer .drw-sec-label { font-size: 12px; margin: 18px 0 6px; }
.rq-drawer .drw-acc { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top-width: 1px; border-top-style: solid; }
.rq-drawer #drwAccessList .drw-acc:first-child, .rq-drawer #drwAccessResults .drw-acc:first-child { border-top: none; }
.rq-drawer .drw-acc .img { width: 32px; height: 32px; font-size: 12px; }
.rq-drawer .drw-acc .m { flex: 1 1 auto; min-width: 0; }
.rq-drawer .drw-acc .m .nm { font-size: 13px; font-weight: 500; }
.rq-drawer .drw-acc .m .rl { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-drawer .drw-acc .rm { cursor: pointer; font-size: 18px; flex: 0 0 auto; }

.rq-drawer .drw-acc .drw-add { cursor: pointer; font-size: 18px; flex: 0 0 auto; }
.rq-drawer .drw-empty { font-size: 13px; padding: 8px 0; }

@media (max-width: 1600px) {
    /* Rechte Info-Spalte ausblenden; per Toggle als Overlay ueber dem Chat einblendbar (nimmt keinen Platz weg) */
    .content.request-detail .rq-cols { grid-template-columns: 432px 1fr; }
    .content.request-detail .rq-rail.r { display: none; }
    .content.request-detail .rq-tools-toggle { display: inline-flex; }
    .content.request-detail.tools-open .rq-rail.r { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 448px; max-width: 92%; z-index: 25; }
}
@media (max-width: 1100px) {
    .content.request-detail .rq-cols { grid-template-columns: 1fr; }
    .content.request-detail .rq-rail.l { display: none; }
}

.wrapper .container .content.requests .main .table .row .skeleton { display: inline-block; border-radius: 4px; }
.wrapper .container .content.requests .main .table .row .skeleton.small { height: 10px; width: 80px; }
.wrapper .container .content.requests .main .table .row .skeleton.mid { height: 14px; width: 140px; }
.wrapper .container .content.requests .main .table .row .skeleton.large { height: 16px; width: 220px; margin-bottom: 5px; }
.wrapper .container .content.requests .main .table .row .skeleton.avatar { height: 35px; width: 35px; border-radius: 50%; }
.wrapper .container .content.requests .main .table .row .skeleton.dot { height: 8px; width: 8px; border-radius: 50%; }

/*? ----------     REQUESTS     ---------- */

/* ----------     MANAGEMENT     ---------- */
.devices-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.device-card { border-radius: 5px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.device-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; gap: 20px; }
.device-card-header .badge { font-size: 11px; padding: 4px 8px; border-radius: 5px; }
.device-card-body { display: flex; flex-direction: column; gap: 4px; }
.device-card-body .row { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0; }
.device-card-body .row span:first-child { margin-right: 6px; }
/*? ----------     MANAGEMENT     ---------- */

/* ----------     ACCOUNT GROUPS     ---------- */
.groups-search { margin-bottom: 15px; }
.groups-count { font-size: 13px; white-space: nowrap; }
.group-list { border-radius: 10px; overflow: hidden; }
.group-list .group-row { padding: 15px 20px; font-size: 14px; overflow-wrap: anywhere; border-bottom-width: 1px; border-bottom-style: solid; }
.group-list .group-row:last-child { border-bottom: none; }

.group-list .group-row mark { background: transparent; font-weight: 600; }
.group-list .empty { padding: 18px 20px; }
/*? ----------     ACCOUNT GROUPS     ---------- */

/* ----------     ACCOUNT SECURITY (LOGIN HISTORY)     ---------- */
.acc-hint { font-size: 13px; margin: -8px 0 18px; line-height: 1.5; max-width: 760px; }

/* Aktuelle Sitzung */
.cur-session { border-width: 1px; border-style: solid; border-radius: 12px; padding: 22px 24px; box-sizing: border-box; }
.cur-session .cs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cur-session .cs-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }
.cur-session .cs-headline { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cur-session .cs-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cur-session .cs-title .cs-name { font-size: 16px; font-weight: 600; }
.cur-session .cs-badge { font-size: 11px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.cur-session .cs-sub { font-size: 13px; }
.cur-session .cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px; }
.cur-session .cs-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cur-session .cs-item .cs-key { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.cur-session .cs-item .cs-key i { font-size: 15px; }
.cur-session .cs-item .cs-val { font-size: 14px; display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.cur-session .cs-item .cs-val .country { height: 14px; width: 21px; flex-shrink: 0; }
.cur-empty { padding: 18px 4px; }

/* Anmeldungen nach Standort */
.loc-list { display: flex; flex-direction: column; gap: 10px; }
.loc-list .loc-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; transition: box-shadow .15s ease; }

.loc-list .loc-card.current { border-width: 1px; border-style: solid; }
.loc-list .loc-card .loc-flag .country { height: 16px; width: 24px; flex-shrink: 0; }
.loc-list .loc-card .loc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.loc-list .loc-card .loc-main .loc-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.loc-list .loc-card .loc-main .loc-name .loc-tag { font-size: 10px; padding: 3px 7px; border-radius: 5px; font-weight: 500; }
.loc-list .loc-card .loc-main .loc-sub { font-size: 12px; overflow-wrap: anywhere; }
.loc-list .loc-card .loc-stats { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; justify-content: flex-end; }
.loc-list .loc-card .loc-stats .loc-stat { display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; width: 120px; }
.loc-list .loc-card .loc-stats .loc-stat .loc-stat-val { font-size: 14px; font-weight: 600; }
.loc-list .loc-card .loc-stats .loc-stat .loc-stat-key { font-size: 11px; }
.loc-list .empty { padding: 22px 4px; }
/*? ----------     ACCOUNT SECURITY (LOGIN HISTORY)     ---------- */

/* ----------     ACCOUNT AGREEMENTS (DETAIL)     ---------- */
.agr-detail { display: flex; flex-direction: column; gap: 15px; }
.agr-detail .agr-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; width: fit-content; }

.agr-detail .agr-back i { font-size: 18px; }
.agr-detail .agr-head { display: flex; align-items: flex-start; gap: 16px; border-radius: 12px; padding: 22px 24px; box-sizing: border-box; }
.agr-detail .agr-head .agr-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }
.agr-detail .agr-head .agr-headline { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.agr-detail .agr-head .agr-headline .agr-title { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.agr-detail .agr-head .agr-headline .agr-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.agr-detail .agr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; border-radius: 12px; padding: 22px 24px; box-sizing: border-box; }
.agr-detail .agr-grid .agr-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.agr-detail .agr-grid .agr-item .agr-key { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.agr-detail .agr-grid .agr-item .agr-key i { font-size: 15px; }
.agr-detail .agr-grid .agr-item .agr-val { font-size: 14px; overflow-wrap: anywhere; }
.agr-detail .agr-content { border-radius: 12px; padding: 22px 24px; box-sizing: border-box; }
.agr-detail .agr-content .agr-content-label { font-size: 12px; margin-bottom: 12px; }
.agr-detail .agr-content .agr-content-body { font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
/*? ----------     ACCOUNT AGREEMENTS (DETAIL)     ---------- */

/* ----------     MANAGEMENT USER DETAIL (TABS)     ---------- */
.user-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 10px 18px 25px; }
.user-detail-topbar .user-detail-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.user-detail-topbar .user-detail-back i { font-size: 18px; }
.device-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 10px 18px 25px; }
.device-detail-topbar .device-detail-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.device-detail-topbar .device-detail-back i { font-size: 18px; }
.user-detail-tabs { display: flex; align-items: center; gap: 24px; }
.user-detail-tabs .tab { position: relative; cursor: pointer; font-size: 15px; padding: 10px 0; transition: color .2s ease; }


.user-detail-tabs .tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.user-detail-tabs .tab:hover::after, .user-detail-tabs .tab.active::after { transform: scaleX(1); transform-origin: left; }
#tabAccount, #tabGroups, #tabDevices, #tabAgreements { margin-top: 25px; }
/*? ----------     MANAGEMENT USER DETAIL (TABS)     ---------- */

/* ----------     MANAGEMENT USER AGREEMENTS     ---------- */
.agr-mgmt { display: flex; flex-direction: column; gap: 12px; }
.agr-mgmt .agr-mgmt-item { border-radius: 12px; padding: 20px 22px; box-sizing: border-box; }
.agr-mgmt .agr-mgmt-item .agr-mgmt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.agr-mgmt .agr-mgmt-item .agr-mgmt-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.agr-mgmt .agr-mgmt-item .agr-mgmt-actions { display: flex; gap: 6px; flex-shrink: 0; }
.agr-mgmt .agr-mgmt-item .agr-mgmt-actions .agr-act { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: color .15s ease; }


.agr-mgmt .agr-mgmt-item .agr-mgmt-content { font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.agr-mgmt .agr-mgmt-item .agr-mgmt-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding-top: 12px; border-top-width: 1px; border-top-style: solid; font-size: 12px; }
/*? ----------     MANAGEMENT USER AGREEMENTS     ---------- */

/* ----------     LIZENZEN (CHIPS)     ---------- */
.lic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lic-chips .lic-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border-width: 1px; border-style: solid; }
.lic-chips .lic-empty { font-size: 13px; }
/*? ----------     LIZENZEN (CHIPS)     ---------- */

/* ----------     SYSTEM KPIs     ---------- */
.sys-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.sys-kpis .sys-kpi { border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.sys-kpis .sys-kpi .sys-kpi-val { font-size: 24px; font-weight: 600; font-family: monospace; }
.sys-kpis .sys-kpi .sys-kpi-label { font-size: 12px; }


.sys-kpis .sys-kpi[data-href] { cursor: pointer; transition: box-shadow .15s ease; }


/* DESTRUKTIVER BUTTON */
/* Zerstoerende Aktionen als Umriss statt Vollflaeche: bleiben eindeutig rot,
   draengen sich neben regulaeren Buttons aber nicht als Primaeraktion auf.
   Der Rand kommt als inset box-shadow statt als border - ein echter Rahmen
   wuerde den Button 2px groesser machen als die Buttons daneben (Modal-Fuss).
   Hover fuellt nur zart - kein Blau, das waere die Primaerfarbe. */
.btn.danger { background: transparent; }
.btn.danger:hover { filter: none; }
.btn.danger.disabled { box-shadow: none; }

/* SICHERHEITS-BADGE */
.sys-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.sys-badge:before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }





/* AUDIT-LISTE */
.sys-audit { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 360px; overflow-y: auto; }
.sys-audit .sys-audit-row { border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.sys-audit .sys-audit-msg { font-size: 13px; }
.sys-audit .sys-audit-meta { font-size: 11px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sys-audit .sys-audit-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; }

.sys-audit .sys-audit-empty { font-size: 13px; padding: 6px 0; }

/* AUFRAEUM-AKTIONEN */
.sys-clean { display: flex; flex-direction: column; width: 100%; }
.sys-clean .sys-clean-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom-width: 1px; border-bottom-style: solid; }
.sys-clean .sys-clean-row:last-child { border-bottom: none; }
.sys-clean .sys-clean-info .sys-clean-label { font-size: 14px; }
.sys-clean .sys-clean-info .sys-clean-count { font-size: 12px; margin-top: 2px; }
.sys-clean .sys-clean-row .btn { white-space: nowrap; }

/* AKTIVITAETSFEED (TIMELINE) */
.activity-feed { display: flex; flex-direction: column; width: 100%; }
.activity-feed .feed-item { display: flex; gap: 14px; padding: 14px 4px; border-bottom-width: 1px; border-bottom-style: solid; }
.activity-feed .feed-item:last-child { border-bottom: none; }
.activity-feed .feed-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.activity-feed .feed-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.activity-feed .feed-message { font-size: 14px; line-height: 1.4; word-break: break-word; }
.activity-feed .feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.activity-feed .feed-cat { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.activity-feed .feed-user { display: inline-flex; align-items: center; }
.activity-feed .feed-sep { opacity: .5; }
.activity-feed .feed-stats { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; }
.activity-feed .feed-stats .feed-stat-val { font-size: 14px; font-weight: 600; }
.activity-feed .feed-stats .feed-stat-key { font-size: 11px; }
.activity-feed .feed-empty { padding: 26px 0; text-align: center; font-size: 14px; }
/*? ----------     SYSTEM KPIs     ---------- */

/* ----------     SYSTEM ACCESS     ---------- */
.access-list { display: flex; flex-direction: column; gap: 10px; }
.access-list .access-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; transition: box-shadow .15s ease; }

.access-list .access-card .ac-flag .country { height: 16px; width: 24px; flex-shrink: 0; }
.access-list .access-card .ac-flag .ac-flag-empty { display: inline-block; width: 24px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.access-list .access-card .ac-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.access-list .access-card .ac-main .ac-ip { font-size: 14px; font-weight: 600; font-family: monospace; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.access-list .access-card .ac-main .ac-ip .ac-note { font-size: 12px; font-weight: 400; font-family: inherit; }
.access-list .access-card .ac-main .ac-sub { font-size: 12px; overflow-wrap: anywhere; }
.access-list .access-card .ac-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
.access-list .access-card .ac-stats .ac-stat { display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; width: 120px; }
.access-list .access-card .ac-stats .ac-stat .ac-stat-val { font-size: 14px; font-weight: 600; }
.access-list .access-card .ac-stats .ac-stat .ac-stat-key { font-size: 11px; }
.access-list .access-card .access-action { cursor: pointer; font-size: 20px; padding: 6px; flex-shrink: 0; border-radius: 6px; }

.access-list .empty { padding: 22px 4px; }
/* Anmeldeverlauf-Karten (E-Mail als Titel statt monospace IP; gedaempfte, gekuerzte Nachricht) */
.access-list .access-card.login .ac-main .ac-ip { font-family: inherit; }
.access-list .access-card.login .ac-main .ac-ip .ac-note { font-family: monospace; }
.access-list .access-card.login .ac-main .ac-msg { font-size: 12px; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.access-list .access-card .ac-stats .ac-stat.single { width: auto; }
/* Berechtigungs-Karten (Admin/Benutzer): Avatar links, Name als Titel, ganze Karte klickbar */
.access-list .access-card.asg { cursor: pointer; }
.access-list .access-card.asg .ac-main .ac-ip { font-family: inherit; }
.access-list .access-card.asg .asg-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.access-list .access-card.asg img.asg-avatar { display: block; object-fit: cover; }
.access-badge { font-size: 11px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.access-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }



.access-list .access-card.device,
.access-list .access-card.product,
.access-list .access-card.org,
.access-list .access-card.kb { cursor: pointer; }
.access-list .access-card.org .ac-main .ac-ip { font-family: inherit; }
.access-list .access-card.device .ac-stats .ac-stat .ac-stat-val,
.access-list .access-card.product .ac-stats .ac-stat .ac-stat-val { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.access-list .access-card.device .ac-flag .dev-icon,
.access-list .access-card.product .ac-flag .dev-icon,
.access-list .access-card.org .ac-flag .dev-icon,
.access-list .access-card.kb .ac-flag .dev-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
/* Dokumente: Dashboard (Kategorien links, fixierte Übersicht rechts) */
.docs { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start; }
.docs-main { min-width: 0; }
/* Übersicht: feststehendes Panel rechts (sticky) mit Hintergrund */
.docs-side { position: sticky; top: 20px; align-self: start; border-radius: 14px; padding: 22px; }
.docs-side .search { max-width: none; width: 100%; margin-bottom: 20px; }

.docs-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.cat-card { display: flex; align-items: center; gap: 14px; width: 240px; border-radius: 12px; padding: 16px 18px; cursor: pointer; border: 1px solid transparent; transition: box-shadow .15s ease, border-color .15s ease; }


.cat-info { min-width: 0; }
.cat-name { font-size: 15px; font-weight: 600; }
.cat-meta { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 12px; }
.cat-meta .cat-size:not(:empty)::before { content: "·"; margin-right: 8px; }
.docs-types { background: transparent; border-radius: 0; padding: 0; }
.docs-types-title { font-size: 16px; font-weight: 600; }
.ov-total { margin-top: 14px; }
.ov-total-num { font-size: 30px; font-weight: 700; line-height: 1; }
.ov-total-lbl { font-size: 12px; margin-top: 5px; }
.ov-lines { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.ov-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.ov-line b { font-weight: 600; white-space: nowrap; }
.ov-sub { margin: 22px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.type-list { display: flex; flex-direction: column; }
.type-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background .12s ease; }



.type-ic-img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.type-main { flex: 1; min-width: 0; }
.type-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.type-name { font-weight: 500; }
.type-val { font-size: 12px; white-space: nowrap; }
.type-bar { height: 5px; border-radius: 5px; margin-top: 7px; overflow: hidden; }
.type-bar-fill { height: 100%; border-radius: 5px; width: 0; transition: width .35s ease; }
.docs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; text-align: center; font-size: 14px; }
.docs-empty img { width: 70px; height: 70px; opacity: .85; }
.doc-more { display: flex; justify-content: center; margin-top: 22px; }
@media screen and (max-width: 1100px) {
	.docs { grid-template-columns: 1fr; }
	.docs-side { position: static; }
}
@media screen and (max-width: 560px) {
	.cat-card { width: 100%; }
}
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.file-grid .empty { grid-column: 1 / -1; padding: 22px 4px; }
.file-tile { border-radius: 10px; padding: 12px; cursor: pointer; min-width: 0; transition: box-shadow .15s ease; }

.file-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.file-thumb img.file-thumb-img { width: 100%; height: 100%; object-fit: scale-down; display: block; }
.file-thumb img.file-type-svg { width: 20%; height: 20%; object-fit: contain; display: block; }
.file-thumb .file-open-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s ease; }
.file-tile:hover .file-thumb .file-open-hint { opacity: 1; }
.file-tile-name { margin-top: 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-tile-size { margin-top: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.file-preview-stage { display: flex; align-items: center; justify-content: center; border-radius: 10px; min-height: 320px; max-height: 72vh; overflow: auto; }
.file-preview-stage img { max-width: 100%; max-height: 72vh; object-fit: contain; display: block; }
.file-preview-stage iframe { width: 100%; height: 72vh; border: none; }
.file-preview-empty { padding: 50px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.file-preview-empty img { width: 88px; height: 88px; object-fit: contain; }
.file-preview-meta { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; font-size: 13px; }
.file-preview-meta .fpm-title { font-size: 15px; font-weight: 600; }
.file-preview-meta .fpm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.file-preview-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* Add-Geraet-/Add-Einrichtung-Modal: Custom-Select-Dropdowns nicht am Modalrand abschneiden */
#modalDevice .modal, #modalFacility .modal { overflow: visible; }
.ip-quickfill { cursor: pointer; font-weight: 600; }
.ip-quickfill:hover { text-decoration: underline; }
/*? ----------     SYSTEM ACCESS     ---------- */

/* ----------     BROWSER-AUSWERTUNG     ---------- */
.bs-overview { display: grid; grid-template-columns: 85fr 15fr; gap: 24px; align-items: stretch; }
.bs-overview .bs-intro-card { margin: 0; }

.bs-range { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 3px; border-radius: 999px; border-width: 1px; border-style: solid; flex-shrink: 0; }
.bs-range .bs-range-btn { border: none; background: transparent; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }



.browser-stats { display: flex; flex-direction: column; border-radius: 10px; padding: 18px 16px 12px; box-sizing: border-box; }
.browser-stats .bs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.browser-stats .bs-head .bs-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.browser-stats .bs-head .bs-title i { font-size: 15px; vertical-align: -3px; margin-right: 6px; }
.browser-stats .bs-gauge { position: relative; width: 100%; flex: 0 0 auto; height: 115px; margin: 4px 0 8px; }
.browser-stats .bs-list { display: flex; flex-direction: column; }
.browser-stats .bs-list .bs-row { display: flex; align-items: center; gap: 7px; padding: 8px 0; }
.browser-stats .bs-list .bs-row .bs-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.browser-stats .bs-list .bs-row .bs-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-stats .bs-list .bs-row .bs-count { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.browser-stats .bs-list .bs-row .bs-pct { flex: 0 0 auto; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.browser-stats .bs-list .empty { padding: 22px 4px; }

@media (max-width: 1100px) {
    .bs-overview { grid-template-columns: 1fr; }
    .browser-stats { max-width: 420px; }
    .browser-stats .bs-gauge { height: 190px; }
}
/*? ----------     BROWSER-AUSWERTUNG     ---------- */

/* ----------     WELCOME / ONBOARDING     ---------- */
.wrapper .container .content.sub.wiz-center { justify-content: center; }
.blocks.wiz { max-width: 880px; width: 100%; }
.blocks.wiz .wiz-progress-wrap { margin-bottom: 30px; }
.blocks.wiz .wiz-stepnum { font-size: 13px; margin-bottom: 10px; }
.blocks.wiz .wiz-stepnum b { font-weight: 600; }
.blocks.wiz .wiz-progress { display: flex; gap: 6px; }
.blocks.wiz .wiz-progress .seg { flex: 1; height: 4px; border-radius: 2px; transition: background .15s ease; }


.blocks.wiz .wiz-info { font-size: 13px; line-height: 1.55; margin-bottom: 18px; }
.blocks.wiz .apc-count { font-size: 12px; margin-top: 8px; }
.blocks.wiz .wiz-list { font-size: 14px; line-height: 1.6; margin: 0; padding-left: 18px; }
.blocks.wiz .wiz-list li { margin-bottom: 12px; }
.blocks.wiz .wiz-list li:last-child { margin-bottom: 0; }
.blocks.wiz .wiz-list b { font-weight: 600; }
.blocks.wiz .card.bg .input-group.time .label { min-width: 120px; flex-shrink: 0; }
.blocks.wiz .card.bg .input-group.time .time-clear { margin-left: 10px; align-self: center; cursor: pointer; visibility: hidden; }
.blocks.wiz .card.bg .input-group.time .time-clear.show { visibility: visible; }

/*? ----------     WELCOME / ONBOARDING     ---------- */

/* ----------     SYSTEM ERRORS     ---------- */
.error-list { display: flex; flex-direction: column; gap: 10px; }
.error-list .error-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; transition: box-shadow .15s ease; }
.error-list .error-card.expandable { cursor: pointer; }

.error-list .error-card .ec-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.error-list .error-card .ec-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.error-list .error-card .ec-main .ec-message { font-size: 14px; line-height: 1.45; font-family: monospace; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.error-list .error-card .ec-main .ec-message.clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.error-list .error-card .ec-main .ec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.error-list .error-card .ec-main .ec-meta .ec-user { display: inline-flex; align-items: center; gap: 5px; }
.error-list .error-card .ec-main .ec-meta .ec-sep { opacity: .5; }
.error-list .error-card .ec-toggle { flex: 0 0 auto; font-size: 18px; padding: 4px; border-radius: 6px; transition: transform .15s ease; }
.error-list .error-card.open .ec-toggle { transform: rotate(180deg); }
.error-list .error-card .ec-stats { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; }
.error-list .error-card .ec-stats .ec-stat-val { font-size: 14px; font-weight: 600; }
.error-list .error-card .ec-stats .ec-stat-key { font-size: 11px; }
.error-list .empty { padding: 22px 4px; }
/*? ----------     SYSTEM ERRORS     ---------- */

/* ----------     SYSTEM DISRUPTIONS     ---------- */
.block-wrapper .info-text { margin: -4px 0 18px; font-size: 13px; line-height: 1.5; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filter-chips .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease; }


.filter-chips .chip .count { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; }


.disruption-list { display: flex; flex-direction: column; gap: 10px; }
.disruption-list .disruption-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; transition: box-shadow .15s ease; }

.disruption-list .disruption-card.resolved { opacity: .68; }
.disruption-list .disruption-card .dc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.disruption-list .disruption-card .dc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.disruption-list .disruption-card .dc-head .dc-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.disruption-list .disruption-card .dc-desc { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.disruption-list .disruption-card .dc-meta { font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.disruption-list .disruption-card .dc-meta .dc-sep { opacity: .5; }
.disruption-list .disruption-card .dc-action { flex: 0 0 auto; cursor: pointer; font-size: 20px; padding: 6px; border-radius: 6px; }

.disruption-list .empty { padding: 22px 4px; }

.dc-badge { font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.dc-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }



/*? ----------     SYSTEM DISRUPTIONS     ---------- */

/* ----------     ACCOUNT OTS     ---------- */
.ots-list { display: flex; flex-direction: column; gap: 10px; }
.ots-list .ots-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-radius: 10px; box-sizing: border-box; transition: box-shadow .15s ease; }

.ots-list .ots-card.inactive { opacity: .66; }
.ots-list .ots-card .oc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ots-list .ots-card .oc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ots-list .ots-card .oc-head .oc-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ots-list .ots-card .oc-link { font-size: 12px; font-family: monospace; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ots-list .ots-card .oc-meta { font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ots-list .ots-card .oc-meta .oc-sep { opacity: .5; }
.ots-list .ots-card .oc-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ots-list .ots-card .oc-icon { cursor: pointer; font-size: 18px; padding: 6px; border-radius: 6px; }


.ots-list .empty { padding: 22px 4px; }
.ots-list .ots-group-title { font-size: 13px; font-weight: 600; padding: 0 2px; }
.ots-list .ots-group-title:not(:first-child) { margin-top: 14px; }
.oc-badge { font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.oc-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }



/* Erzeugtes Passwort (einmalige Anzeige im Modal) */
.ots-secret { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ots-secret .ots-secret-label { font-size: 12px; }
.ots-secret .ots-secret-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; }
.ots-secret .ots-secret-value { flex: 1 1 auto; min-width: 0; font-family: monospace; font-size: 18px; font-weight: 600; word-break: break-all; }
.ots-secret.link .ots-secret-value { font-size: 13px; font-weight: 400; }
.ots-secret .ots-secret-copy { flex: 0 0 auto; cursor: pointer; font-size: 18px; padding: 6px; border-radius: 6px; }


/*? ----------     ACCOUNT OTS     ---------- */

/* ----------     FUHRPARK (SERVICES)     ---------- */
/* Fahrzeug-Kartenliste (ersetzt die alte Tabelle) */
.fleet-list { display: flex; flex-direction: column; gap: 10px; }
.fleet-list .empty { padding: 22px 4px; }
.fleet-card { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 10px; box-sizing: border-box; cursor: pointer; transition: box-shadow .15s ease; }

.fleet-card.inactive { opacity: .62; }
.fleet-card .fc-thumb { flex: 0 0 auto; width: 74px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fleet-card .fc-thumb.has-image { background: transparent; }
.fleet-card .fc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fleet-card .fc-thumb i { font-size: 24px; }
.fleet-card .fc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fleet-card .fc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fleet-card .fc-title { font-size: 15px; font-weight: 600; }
.fleet-card .fc-plate { font-size: 13px; letter-spacing: .5px; }
.fleet-card .fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.fleet-card .fc-meta i { font-size: 13px; margin-right: 3px; vertical-align: -2px; }
.fleet-card .fc-meta .fc-sep { opacity: .5; }
.fleet-card .fc-kebab { flex: 0 0 auto; cursor: pointer; font-size: 18px; padding: 6px; border-radius: 6px; }

.fleet-card .fc-go { flex: 0 0 auto; font-size: 18px; }
.fleet-card .fc-end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.fleet-card .fc-end .fc-lease { font-size: 12px; white-space: nowrap; }


.fleet-card .fc-end .fc-km-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }




/* Status-Badge + Punktfarben (auch für Chips & Vorschau) */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }




/* Auswahl-Chips (Wizard: Antrieb / Status / Bereifung) */
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-group .choice-btn { flex: 1 1 0; min-width: 88px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; user-select: none; box-sizing: border-box; border-width: 1px; border-style: solid; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.choice-group .choice-btn i { font-size: 16px; }


.choice-group .choice-btn .choice-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Detailansicht: Topbar + Fahrzeug-Hero (rechteckiges Bild) + Löschen am Ende */
.detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 10px 18px 25px; }
.detail-topbar .detail-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.detail-topbar .detail-back i { font-size: 18px; }
.detail-topbar .detail-actions { display: flex; align-items: center; gap: 10px; }
.fleet-hero { margin-bottom: 22px; }
.wrapper .container .content .blocks .block-wrapper .fleet-hero .start { gap: 20px; }
.wrapper .container .content .blocks .block-wrapper .fleet-hero .start .img { width: 170px; height: 105px; border-radius: 12px; }
.wrapper .container .content .blocks .block-wrapper .fleet-hero .start .img img { width: auto; max-width: 88%; max-height: 80%; object-fit: contain; }
.wrapper .container .content .blocks .block-wrapper .fleet-hero .start .img i { font-size: 46px; }

/* Hinzufügen/Bearbeiten-Modal (4-Schritte-Wizard) */
.modal.modal-wide { max-width: 600px; }
.modal.modal-wide .modal-head { margin-bottom: 20px; }
.modal.modal-wide .modal-body { padding-top: 2px; }
.modal .wizard-progress { opacity: 1; margin: 20px 0 18px; }
.modal .wizard-progress .step-name { font-weight: 600; }
.modal .wizard-progress .wizard-progress-steps { margin-left: auto; }
.modal .wizard-step-indicator.done { cursor: pointer; }
.modal-foot.wizard-foot { justify-content: space-between; }
.field-block-label { font-size: 12px; margin: 4px 4px 8px; }
.field-hint { font-size: 11px; margin: -8px 4px 14px; line-height: 1.4; }
/* Kennzeichen-Eingabe (drei Segmente: Kreis – Buchstaben – Nummer) */
.plate-input { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.plate-input .plate-seg { height: 42px; padding: 0 10px; border-radius: 6px; box-sizing: border-box; outline: none; font-size: 15px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 1px; border-width: 1px; border-style: solid; }
.plate-input .plate-seg::placeholder { font-weight: 400; letter-spacing: 0; }

.plate-input .plate-seg-kreis { width: 64px; }
.plate-input .plate-seg-letters { width: 56px; }
.plate-input .plate-seg-number { width: 100px; }
.plate-input .plate-dash { font-weight: 600; }

/* Detail-Übersicht: Status-Banner */
.fleet-banner { display: inline-flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.fleet-banner .bn-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.fleet-banner .bn-text .t { font-size: 14px; font-weight: 600; }
.fleet-banner .bn-text .s { font-size: 12px; margin-top: 2px; }







/* Detail-Übersicht: Zusammenfassungs-Kacheln */
.fleet-summary { display: flex; flex-wrap: wrap; gap: 12px; }
.fleet-summary .sum-item { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; box-sizing: border-box; }
.fleet-summary .sum-item .sum-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }



.fleet-summary .sum-item .sum-text { min-width: 0; }
.fleet-summary .sum-item .sum-text .k { font-size: 12px; }
.fleet-summary .sum-item .sum-text .v { font-size: 13px; font-weight: 500; margin-top: 2px; word-break: break-word; }

/* Detail-Übersicht: Schnelle Kilometerstand-Aktualisierung (klar abgesetzt) */
.km-update { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top-width: 1px; border-top-style: solid; }
.km-update .input-group { flex: 1 1 auto; margin: 0; }
.km-update .btn { flex: 0 0 auto; }

/* Detail: Historie-Log */
.fleet-log { display: flex; flex-direction: column; }
.fleet-log .log-item { display: flex; gap: 14px; padding: 12px 2px; border-bottom-width: 1px; border-bottom-style: solid; }
.fleet-log .log-item:last-child { border-bottom: none; }
.fleet-log .log-item .log-dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fleet-log .log-item .log-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fleet-log .log-item .log-main .log-title { font-size: 13px; word-break: break-word; }
.fleet-log .log-item .log-main .log-meta { font-size: 11px; }
.fleet-log .fleet-log-empty { padding: 18px 2px; font-size: 13px; }

/* Detailkarten (Fahrzeug, Nutzung, Rechtliches, Leasing): Kachel-Stil wie die Übersicht.
   Eigene Klasse (ohne .details), damit die generische .details-Basis nicht per Spezifität gewinnt. */
.fleet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.fleet-cards .item { border-width: 1px; border-style: solid; border-radius: 10px; padding: 14px; min-width: 0; }
.fleet-cards .item .key { font-size: 12px; margin-bottom: 5px; }
.fleet-cards .item .value { font-size: 14px; font-weight: 500; word-break: break-word; }
.fleet-cards .item .value a { font-weight: 500; }

/* Hinzufügen/Bearbeiten-Modal: feste Mindesthöhe der Schritte, damit die Buttons nicht springen */
.modal .form-step.active { min-height: 320px; }
/* Datums-/Monatsfelder im Modal: unsichtbaren Picker-Indikator aus der Tab-Reihenfolge nehmen (sonst toter Tab-Stopp) */
.modal .input-group input[type="date"]::-webkit-calendar-picker-indicator,
.modal .input-group input[type="month"]::-webkit-calendar-picker-indicator { display: none; }

/* Entwurf-Hinweis (später fortsetzen) */
.modal .wiz-draft-hint { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 14px; border-radius: 8px; font-size: 12px; }
.modal .wiz-draft-hint .wiz-draft-discard { margin-left: auto; cursor: pointer; text-decoration: underline; }

/* Fahrzeugschein-Upload im Modal (Dropzone-Styles sind sonst auf die Formular-Seite gescoped) */
.modal .attachments .dropzone { position: relative; border-radius: 8px; padding: 18px 12px; text-align: center; border-width: 1px; border-style: dashed; transition: background .15s ease, border-color .15s ease; }

.modal .attachments .dropzone .file-input { position: absolute; inset: 0; height: auto; opacity: 0; pointer-events: none; }
.modal .attachments .dropzone .dropzone-inner { pointer-events: none; }
.modal .attachments .dropzone .dropzone-inner .dropzone-icon { font-size: 28px; margin-bottom: 6px; }
.modal .attachments .dropzone .dropzone-inner .dropzone-text { font-size: 13px; }
.modal .attachments .dropzone .dropzone-inner .dropzone-text .dropzone-link { display: inline-block; margin-top: 4px; font-size: 12px; cursor: pointer; text-decoration: underline; pointer-events: auto; }
.modal .attachments .dropzone .dropzone-inner .dropzone-info { font-size: 11px; margin-top: 8px; }
.modal .attachments .attachments-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.modal .attachments .attachments-list .attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px; border-width: 1px; border-style: solid; }
.modal .attachments .attachments-list .attachment-row .attachment-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.modal .attachments .attachments-list .attachment-row .attachment-left .attachment-icon { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.modal .attachments .attachments-list .attachment-row .attachment-left .attachment-icon .attachment-icon-img { width: 100%; height: 100%; object-fit: contain; }
.modal .attachments .attachments-list .attachment-row .attachment-left .attachment-meta { display: flex; flex-direction: column; min-width: 0; }
.modal .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-info { font-size: 11px; }
.modal .attachments .attachments-list .attachment-row .attachment-right .attachment-remove { font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }


/* Live-Fahrzeugvorschau im Wizard */
.veh-preview { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 10px; border-width: 1px; border-style: solid; margin-bottom: 4px; }
.veh-preview .veh-img { flex: 0 0 auto; width: 92px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.veh-preview .veh-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.veh-preview .veh-img i { font-size: 30px; }
.veh-preview .veh-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.veh-preview .veh-name { font-size: 16px; font-weight: 600; }
.veh-preview .veh-name .muted { font-weight: 400; }
.veh-preview .veh-plate { font-size: 12px; letter-spacing: .5px; }
.veh-preview .veh-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.veh-preview .veh-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.veh-preview .veh-tag i { font-size: 12px; }
.veh-preview .veh-tag .veh-statusdot { width: 7px; height: 7px; border-radius: 50%; }

/* Zusammenfassung (letzter Schritt) */
.summary { border-radius: 10px; border-width: 1px; border-style: solid; overflow: hidden; margin-top: 6px; }
.summary .sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 13px; border-bottom-width: 1px; border-bottom-style: solid; }
.summary .sum-row:last-child { border-bottom: none; }

.summary .sum-row .sum-val { text-align: right; font-weight: 500; word-break: break-word; }
.summary .sum-row .sum-val.missing { font-weight: 400; font-style: italic; }
.sum-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin: 16px 4px 8px; }
/*? ----------     FUHRPARK (SERVICES)     ---------- */

/* ----------     SUPPORTANFRAGEN / REQUESTS OVERVIEW     ---------- */
.req-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.req-live { font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.req-live .pulse { width: 8px; height: 8px; border-radius: 50%; animation: reqPulse 1.6s ease-in-out infinite; }
@keyframes reqPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.req-layout { display: flex; gap: 24px; align-items: flex-start; }
.req-layout .req-main-col { flex: 1 1 auto; min-width: 0; }
.req-layout .req-side-col { flex: 0 0 460px; display: flex; flex-direction: column; gap: 18px; }

.req-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.req-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.req-tabs .req-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease, opacity .15s ease; }


.req-tabs .req-tab.searching { opacity: .45; }
.req-tabs .req-tab .count { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

/* Indikator an der Zahl: neue Antwort von uns liegt vor */
.req-tabs .req-tab.has-new .count::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; }

/* Eingang zeigt NEUE Anfragen -> Indikator orange (statt blau = "Neue Antwort") */


.req-list { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.req-list .req-card { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 10px; cursor: pointer; transition: box-shadow .15s ease; }

/* Priorität als Tag vor dem Betreff (ersetzt den Border-Streifen): immer an derselben Stelle,
   keine zusätzliche Zeile; hinter dem Titel würde es mit der Titellänge wandern (User + Master) */
.req-list .req-card .req-title .req-prio-tag { display: inline-flex; align-items: center; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; }




/* SLA-Kennzeichen in der Meta-Zeile: nur zeigen, wenn das Reaktionsziel drängt */
.req-list .req-card .req-meta .req-sla { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }



.req-list .req-card .req-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.req-list .req-card .req-avatar .img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.req-list .req-card .req-avatar .img.non { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.req-list .req-card .req-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.req-list .req-card .req-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Meta-Zeile in zwei Zonen: Identität (#Nummer · Person · Firma) und direkt dahinter die
   Chips (Workpool, Herkunft, SLA). Die Identität nimmt nur ihre Inhaltsbreite ein (kein
   flex-grow, sonst klafft bei kurzen Texten eine Lücke vor den Chips) und schrumpft bei
   Platznot; die Chips schrumpfen nie und verdrängen so die Herkunftsinfo nicht. */
.req-list .req-card .req-meta { font-size: 12px; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; min-width: 0; overflow: hidden; }
.req-list .req-card .req-meta .req-idty { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.req-list .req-card .req-meta .req-chips { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.req-list .req-card .req-meta .sep { opacity: .5; }
.req-list .req-card .req-meta .num { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* Truncation-Reihenfolge: die Firma kürzt zuerst (hoher Shrink-Faktor, behält einen Stummel),
   danach die Person; die Ticketnummer nie. */
.req-list .req-card .req-meta .req-user { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-list .req-card .req-meta .req-cust { flex: 0 100 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-list .req-card .req-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.req-list .req-card .req-aside .req-wp { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.req-list .req-card .req-aside .req-bottom { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.req-list .req-card .req-aside .req-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.req-list .req-card .req-aside .req-status .dot { width: 7px; height: 7px; border-radius: 50%; }



/* "Warten auf Kunde": pausiert die SLA-Uhr, deshalb sichtbar abgesetzt */


/* Bei "Offen" und "In Bearbeitung" keinen Punkt anzeigen */
.req-status.open .dot,
.req-status.in_progress .dot { display: none; }
/* "Neue Antwort" (Gegenseite hat zuletzt geschrieben) – ersetzt den Status mit blauem Punkt */


/* "Neue Anfrage" (initial bei uns eingegangen, Team hat noch nicht geantwortet) – orange */


.req-list .req-empty { padding: 44px 10px; text-align: center; font-size: 14px; }

/* User-Ticket-Konversation (system/user/requests/ticket.php) */
.uticket { border-radius: 10px; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.uticket .ut-head { display: flex; flex-direction: column; gap: 6px; border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 16px; }
.uticket .ut-head .ut-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uticket .ut-head .ut-title .ut-num { font-size: 13px; font-weight: 500; }
.uticket .ut-head .ut-meta { font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uticket .ut-head .ut-meta .ut-sep { opacity: .5; }
.uticket .ut-head .ut-meta .req-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.uticket .ut-head .ut-meta .req-status .dot { width: 7px; height: 7px; border-radius: 50%; }



.uticket .ut-conversation { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.uticket .ut-conversation .ut-empty { padding: 24px 4px; font-size: 13px; text-align: center; }
.uticket .ut-msg { display: flex; gap: 10px; align-items: flex-start; }
.uticket .ut-msg .ut-msg-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.uticket .ut-msg .ut-msg-avatar .img { width: 100%; height: 100%; object-fit: cover; }
.uticket .ut-msg .ut-msg-body { flex: 1 1 auto; min-width: 0; max-width: 78%; border-radius: 10px; padding: 10px 13px; }
.uticket .ut-msg .ut-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.uticket .ut-msg .ut-msg-head .ut-msg-author { font-size: 13px; font-weight: 600; }
.uticket .ut-msg .ut-msg-head .ut-msg-time { font-size: 11px; }
.uticket .ut-msg .ut-msg-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.uticket .ut-msg.self { flex-direction: row-reverse; }

.uticket .ut-msg.self .ut-msg-head { flex-direction: row-reverse; }

.uticket .ut-attachments:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uticket .ut-attachments .ut-att-title { font-size: 12px; font-weight: 600; width: 100%; }
.uticket .ut-attachments .ut-att { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 6px; }
.uticket .ut-attachments .ut-att:hover { text-decoration: underline; }
.uticket .ut-reply { border-top-width: 1px; border-top-style: solid; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.uticket .ut-reply .ut-reply-input { width: 100%; box-sizing: border-box; resize: vertical; border-radius: 8px; padding: 11px 13px; font-size: 14px; border-width: 1px; border-style: solid; outline: none; }
.uticket .ut-reply .ut-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uticket .ut-reply .ut-reply-error { font-size: 12px; }

/* Prioritäts-Gruppen (Eingang): Hoch / Mittel / Niedrig */
.req-list .req-group { display: flex; align-items: center; gap: 8px; padding: 8px 2px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.req-list .req-group:first-child { padding-top: 0; }
.req-list .req-group .req-group-dot { width: 8px; height: 8px; border-radius: 50%; }
.req-list .req-group.prio-new-request .req-group-dot { display: none; }
.req-list .req-group.prio-new-reply .req-group-dot { display: none; }








/* User-Seite (.ureq) + Master-Seite (.mreq): Gruppen-Header mit Zähler-Pill + Trennlinie. */
/* Mehr Luft zwischen Toolbar (Tabs/Suche) und der Liste darunter (Basis: 16px) */
.req-layout.ureq .req-toolbar,
.req-layout.mreq .req-toolbar { margin-bottom: 24px; }
/* Deutlicher Abstand zwischen den Bereichen: mehr Luft vor jedem Gruppen-Header */
.req-list.ureq .req-group,
.req-list.mreq .req-group { padding-top: 26px; font-size: 12px; }
/* Gleiche Spezifität wie die Basis-first-child-Regel oben – muss nach der padding-top-Regel stehen */
.req-list.ureq .req-group:first-child,
.req-list.mreq .req-group:first-child { padding-top: 0; }
/* Trennlinie füllt die Restbreite; Header ist bereits display:flex mit gap:8px */
.req-list.ureq .req-group::after,
.req-list.mreq .req-group::after { content: ''; flex: 1 1 auto; height: 1px; }
.req-list.ureq .req-group .req-group-count,
.req-list.mreq .req-group .req-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Hierarchie: Aktionsgruppen als farbige Anker (Label farbig + gefüllter Zähler).
   User: "Neue Antworten" = blau. Master zusätzlich: "Neue Anfragen" = orange (analog .req-status.new-request). */



/* Weiße Ziffern für einheitliche Optik mit "Neue Antworten"; Kontrast auf der Warnfarbe (#ff8f00) liegt dadurch nur bei ~2,3:1 (bewusste Design-Entscheidung) */



/* prio-closed erbt bewusst badge-bg/muted (Default oben) */

/* Karten-Akzente für schnelleres Erkennen/Reagieren */
/* Handlungsbedarf (ungelesene Antwort bzw. Master: neue Anfrage): Titel fett (E-Mail-Client-Pattern) */
.req-list.ureq .req-card.has-unread:not(.is-closed) .req-title,
.req-list.mreq .req-card.has-unread:not(.is-closed) .req-title,
.req-list.mreq .req-card.is-new-request .req-title { font-weight: 700; }
/* "Antworten"-CTA ersetzt den passiven Statustext bei ungelesener Antwort (reine Affordanz, ganze Karte bleibt Klickfläche) */
.req-list.ureq .req-card .req-cta,
.req-list.mreq .req-card .req-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 6px 4px 11px; border-radius: 999px; white-space: nowrap; }
.req-list.ureq .req-card .req-cta i,
.req-list.mreq .req-card .req-cta i { font-size: 13px; transition: transform .15s ease; }
.req-list.ureq .req-card:hover .req-cta i,
.req-list.mreq .req-card:hover .req-cta i { transform: translateX(2px); }

@keyframes reqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.req-list .req-card.is-new { animation: reqIn .38s ease both; }
.req-list .req-card.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .3s ease, transform .3s ease; }

.req-list .req-skel,
.rqo-list .req-skel { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 10px; }
.req-list .req-skel .s-av,
.rqo-list .req-skel .s-av { width: 40px; height: 40px; border-radius: 50%; }
.req-list .req-skel .s-main,
.rqo-list .req-skel .s-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   SUPPORTANFRAGEN-UEBERSICHT (Master): Kopf, Werkzeugleiste, Zeilenliste.

   Die Liste beantwortet zwei Fragen, die vorher erst im geoeffneten Ticket
   standen: wie viel Zeit die Frist noch laesst und wer sich kuemmert.
   Deshalb je eine eigene Spalte dafuer.

   Farben stehen in light/dark/neon.css. Praefix "rqo-" (requests overview)
   und bewusst NICHT "ad-": Ad-Blocker blenden Klassen mit ad-* aus.
   ========================================================================== */

/* ---------- Kopf ---------- */
.rqo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.rqo-head .hl .title { margin-bottom: 7px; }
.rqo-head .hsub { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.rqo-head .hsub .sep { opacity: .45; }

/* ---------- Werkzeugleiste ---------- */
.rqo-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.rqo-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rqo-seg { display: inline-flex; padding: 3px; border-radius: 10px; border-width: 1px; border-style: solid; }
.rqo-seg .s { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; user-select: none; transition: color .12s ease, background .12s ease; }
.rqo-seg .s.on { font-weight: 600; }
.rqo-seg.searching { opacity: .45; }
.rqo-seg .s .c { position: relative; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
/* Punkt am Zaehler: hier wartet mindestens ein Ticket auf eine Antwort des Teams */
.rqo-seg .s.has-new .c::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; }

.rqo-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rqo-filters .spacer { flex: 1 1 auto; }
.rqo-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border-width: 1px; border-style: solid; font-size: 12.5px; cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.rqo-chip i { font-size: 13px; line-height: 1; }
.rqo-chip .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.rqo-chip .qd { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.rqo-chip.reset { border-style: dashed; }
.rqo-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 6px; border-width: 1px; border-style: solid; border-radius: 10px; display: none; cursor: default; }
.rqo-pop.open { display: block; }
.rqo-pop.right { left: auto; right: 0; }
.rqo-pop[data-pop="sort"] { min-width: 286px; }
.rqo-pop .o { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.rqo-pop .o .bx { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 5px; border-width: 1px; border-style: solid; display: flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; }
.rqo-pop .o .cnt { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.rqo-pop .o .pdot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
/* Zweite Zeile einer Auswahl - sagt, was die Sortierung tut */
.rqo-pop .o em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; line-height: 1.4; }
.rqo-pop-sep { height: 1px; margin: 5px 6px; }
.rqo-density { display: inline-flex; padding: 3px; border-radius: 9px; border-width: 1px; border-style: solid; }
.rqo-density .d { width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; cursor: pointer; }

/* ---------- Liste ---------- */
.rqo-list { display: flex; flex-direction: column; gap: 6px; min-height: 200px; }
.rqo-group { display: flex; align-items: center; gap: 9px; padding: 24px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rqo-group:first-child { padding-top: 0; }
.rqo-group .gd { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.rqo-group::after { content: ''; flex: 1 1 auto; height: 1px; }
.rqo-group .gc { order: 3; min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Die beiden Aktivitaetsgruppen tragen wie bisher keinen Punkt, sondern Farbe */
.rqo-group.g-new-request .gd,
.rqo-group.g-new-reply .gd { display: none; }

.rqo-row { position: relative; display: grid; grid-template-columns: 18px 36px minmax(0, 1fr) 168px 146px 104px 92px; align-items: center; gap: 0 14px; padding: 12px 14px 12px 18px; border-width: 1px; border-style: solid; border-radius: 10px; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; }
/* Signalkante links: der Kunde hat nach unserer Antwort geschrieben. Nur dieser
   eine Fall bekommt sie - eine Kante an jeder Zeile waere Dekoration und naehme
   dem Fall die Wirkung. */
.rqo-row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.rqo-row.is-closed { opacity: .72; }
.rqo-row.is-closed:hover { opacity: 1; }
.rqo-row.is-new { animation: reqIn .38s ease both; }

.rqo-cb { width: 16px; height: 16px; border-radius: 5px; border-width: 1px; border-style: solid; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; opacity: 0; transition: opacity .12s ease; }
.rqo-row:hover .rqo-cb, .rqo-list.picking .rqo-cb, .rqo-row.sel .rqo-cb { opacity: 1; }

.rqo-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; }
.rqo-av .img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rqo-av .img.non { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.rqo-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rqo-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rqo-t .tt { min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqo-row.unanswered .rqo-t .tt,
.rqo-row.has-reply:not(.is-closed) .rqo-t .tt { font-weight: 700; }
.rqo-p { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.rqo-m { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.rqo-m .id { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rqo-m .sep { flex: 0 0 auto; opacity: .45; }
.rqo-m .who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqo-m .cust { flex: 0 100 auto; min-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqo-tag { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; border-width: 1px; border-style: solid; white-space: nowrap; }
/* Ticketart steht in der Titelzeile hinter der Stufe: beide zusammen bestimmen
   den Zielwert (Prio 2 heisst bei einer Stoerung 1 Std, bei einer Anfrage 4 Std),
   getrennt gelesen sagt keiner der Werte, wie eilig es ist. */
.rqo-t .rqo-tag { font-weight: 400; }

/* SLA-Spalte: Restzeit in Servicezeit + verbrauchter Anteil der Frist. Vorher
   erschien ein Hinweis erst ab "warn" - also erst, wenn es schon eng war. */
.rqo-sla { min-width: 0; }
.rqo-sla .k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.rqo-sla .v { margin-top: 2px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rqo-sla .bar { margin-top: 6px; height: 3px; border-radius: 999px; overflow: hidden; }
.rqo-sla .bar span { display: block; height: 100%; border-radius: 999px; }

/* Bearbeiter: "kuemmert sich schon jemand?" ist die erste Frage in einem
   Team-Postfach - in der Liste stand die Antwort vorher nirgends. */
.rqo-as { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.rqo-as .av { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.rqo-as .av .img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rqo-as .av .img.non { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rqo-as .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqo-as.free .av { border-width: 1px; border-style: dashed; }
.rqo-as .take { display: none; font-weight: 600; }
.rqo-row:hover .rqo-as.free .nm { display: none; }
.rqo-row:hover .rqo-as.free .take { display: inline; }
.rqo-as.me .nm { font-weight: 600; }

.rqo-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rqo-right .st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rqo-right .st .dot { width: 7px; height: 7px; border-radius: 50%; }
.rqo-right .st.wip .dot { display: none; }
.rqo-right .tm { font-size: 11px; white-space: nowrap; }

.rqo-acts { display: flex; align-items: center; justify-content: flex-end; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.rqo-row:hover .rqo-acts { opacity: 1; }
.rqo-acts .a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border-width: 1px; border-style: solid; border-color: transparent; font-size: 15px; }

/* Kompakte Dichte: eine Zeile weniger, gleiche Information */
.rqo-list.compact .rqo-row { padding: 8px 14px 8px 18px; grid-template-columns: 18px 28px minmax(0, 1fr) 168px 146px 104px 92px; }
.rqo-list.compact .rqo-av { width: 28px; height: 28px; font-size: 11px; }
.rqo-list.compact .rqo-main { gap: 2px; }
.rqo-list.compact .rqo-sla .bar { display: none; }
.rqo-list.compact .rqo-sla .k { display: none; }
.rqo-list.compact .rqo-group { padding-top: 18px; }

.rqo-empty { padding: 54px 10px; text-align: center; font-size: 14px; }
.rqo-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; padding: 8px 16px; border-width: 1px; border-style: solid; border-radius: 9px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rqo-more-note { margin: 14px auto 0; font-size: 12px; text-align: center; }
.rqo-foot { display: flex; justify-content: center; }

/* Sammelaktion: erscheint erst, wenn ausgewaehlt wurde */
.rqo-bulk { position: sticky; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 11px 14px; border-width: 1px; border-style: solid; border-radius: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.rqo-bulk.on { opacity: 1; transform: none; pointer-events: auto; }
.rqo-bulk .cnt { font-size: 13px; font-weight: 600; }
.rqo-bulk .sp { flex: 1 1 auto; }
.rqo-bulk .b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; border-width: 1px; border-style: solid; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.rqo-bulk .b.x { border-color: transparent; }

/* ==========================================================================
   BESTELL-STUFEN im Ticket: anklickbar, und das muss man ihnen ansehen.
   Vorher gab es nur einen Hover-Effekt - im Ruhezustand war nicht erkennbar,
   dass die Stufen bedienbar sind.
   ========================================================================== */
.ut-step.clickable { cursor: pointer; }
/* Die Hover-Flaeche liegt als ::after HINTER dem Inhalt und nicht auf dem Schritt
   selbst: .ut-step traegt unten 15px Abstand zum naechsten Schritt, ein Hintergrund
   direkt darauf waere oben buendig am Text und unten 15px zu hoch. Die Werte ziehen
   diesen Abstand wieder ab, sodass die Flaeche oben wie unten 5px ueber den Text
   hinausragt. Negative Aussenabstaende scheiden aus - die Verbindungslinie haengt
   per ::before an left:3px des Schritts und wuerde mitwandern. */
.ut-step.clickable::after { content: ''; position: absolute; left: -6px; right: -6px; top: -5px; bottom: 10px; border-radius: 8px; background: transparent; transition: background .12s ease; }
.ut-step.clickable:last-child::after { bottom: -5px; }
.ut-step.clickable > * { position: relative; z-index: 1; }
.ut-step.clickable .tx { flex: 1 1 auto; min-width: 0; }
/* Pfeil steht dauerhaft da (gedaempft) und tritt beim Ueberfahren hervor */
.ut-step.clickable .go { flex: 0 0 auto; margin-left: auto; font-size: 14px; line-height: 1; align-self: center; transition: transform .12s ease, color .12s ease; }
.ut-step.clickable:hover .go { transform: translateX(2px); }
.ut-steps-hint { margin-top: 12px; padding-top: 10px; border-top-width: 1px; border-top-style: solid; font-size: 11px; line-height: 1.5; }

.req-side-card { border-width: 1px; border-style: solid; border-radius: 10px; padding: 18px; }
.req-side-card .side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.req-side-card .side-head .side-title { font-size: 14px; font-weight: 600; }
.req-side-card .side-head .side-action { font-size: 12px; cursor: pointer; }
.req-side-card .side-head .side-action:hover { text-decoration: underline; }
.req-side-card .side-hint { margin-top: 12px; padding-top: 12px; border-top-width: 1px; border-top-style: solid; font-size: 11px; line-height: 1.5; }
/* Reaktionsziele als schmale Zeile unter den Workpools: nur Label und Info-Symbol,
   der Inhalt klappt beim Ueberfahren bzw. bei Tastaturfokus darueber auf. So bleibt
   die Aufmerksamkeit in der Seitenspalte bei den Workpools. */
.sla-note { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 11.5px; cursor: default; }
.sla-note i { font-size: 14px; }
.sla-note:hover, .sla-note:focus-visible { outline: none; }
.sla-note .sla-note-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 300px; max-width: 92vw; border-width: 1px; border-style: solid; border-radius: 10px; padding: 14px 16px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; }
.sla-note:hover .sla-note-pop, .sla-note:focus-within .sla-note-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.sla-note .sla-note-foot { margin-top: 10px; padding-top: 10px; border-top-width: 1px; border-top-style: solid; font-size: 11px; line-height: 1.5; text-align: left; }

/* Legende der vertraglichen Reaktionsziele je Prioritaetsstufe (Anhang 1.1, Ziff. 6.2).
   Drei Spalten: Stufe, Ziel bei Stoerungen, Ziel bei Serviceanfragen. */
.sla-legend { display: flex; flex-direction: column; }
.sla-legend .sl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; }
.sla-legend .sl-row + .sl-row { border-top-width: 1px; border-top-style: solid; }
.sla-legend .sl-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
.sla-legend .sl-prio { display: flex; align-items: center; gap: 7px; font-size: 12px; }

.sla-legend .sl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }




.sla-legend .sl-v { font-size: 12px; text-align: right; white-space: nowrap; min-width: 52px; font-variant-numeric: tabular-nums; }
.sla-legend .sl-head .sl-v { font-size: 10.5px; }
.req-side-card .items .item { padding: 11px 0; border-bottom-width: 1px; border-bottom-style: solid; font-size: 13px; }
.req-side-card .items .item:last-child { border-bottom: none; }

.req-side-card .items .item .disruption-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.req-side-card .items .item .disruption-title { font-weight: 600; }
.req-side-card .items .item .disruption-description { font-size: 12px; margin-top: 4px; }
.req-side-card .items .item .disruption-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.req-side-card .items .item .disruption-status .dot { width: 7px; height: 7px; border-radius: 50%; }




.req-side-card .items .item .disruption-since { font-size: 11px; margin-top: 6px; }
.req-side-card .items .item .workpool { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.req-side-card .items .item .workpool .count { position: relative; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
/* Indikator an der Zahl: in diesem Workpool warten Tickets auf eine Team-Antwort (analog User-Seite & Tab) */
.req-side-card .items .item .workpool .count.has-new::after { content: ''; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; }
/* "Neu"-Pool (Eingang) zeigt NEUE Anfragen -> Indikator orange */

.req-side-card .items .item .seen { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 7px; }

/* Sidebar: Störungen einklappbar + Workpools einzeln ausblendbar (Admin, sessionStorage) */
.req-side-card .side-head .side-head-actions { display: flex; align-items: center; gap: 12px; }
.req-side-card .side-head .side-toggle { cursor: pointer; font-size: 15px; line-height: 1; }

.req-side-card.is-collapsed .items,
.req-side-card.is-collapsed .side-hint { display: none; }
.req-side-card.is-collapsed .side-head { margin-bottom: 0; }
/* Offen-Zähler im Header – nur sichtbar, wenn die Karte eingeklappt ist (z. B. Störungen) */
.req-side-card .side-head .side-title .side-count { display: none; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

.req-side-card.is-collapsed .side-head .side-title .side-count { display: inline-block; }
.req-side-card .items .item.wp-item .workpool .wp-meta { display: inline-flex; align-items: center; gap: 10px; margin-right: 8px; }
/* Mitgliedschaft klar markieren: eigene Workpools mit farbigem Akzentbalken links */
.req-side-card .items .item.wp-item { padding-left: 12px; border-left: 3px solid transparent; }
/* Eigene Workpools: Akzent links + anklickbar */
.req-side-card .items .item.wp-item:not(.wp-nonmember) { cursor: pointer; transition: background .12s ease; }

.req-side-card .items .item.wp-item:not(.wp-nonmember) .wp-name { font-weight: 600; }
/* Eigener, aber ausgeblendeter Workpool: roter Akzentbalken, Name/Count gedimmt (Präsenz bleibt lesbar) */

.req-side-card .items .item.wp-item.wp-off .workpool { opacity: .4; }
/* Kein Mitglied: kein Akzent, Name/Count gedimmt, nicht anklickbar (Präsenz bleibt lesbar) */
.req-side-card .items .item.wp-item.wp-nonmember { cursor: default; }
.req-side-card .items .item.wp-item.wp-nonmember .workpool { opacity: .5; }
.req-side-card .items .item.wp-item.wp-nonmember .wp-name { font-weight: 400; }
.req-side-card .items .item.wp-item.wp-nonmember .wp-nonmember-note { font-style: italic; }
/* Rechte Gruppe der Aktivitäts-Zeile (Kein-Mitglied-Hinweis + Präsenz-Chip), rechtsbündig */
.req-side-card .items .item.wp-item .seen .wp-seen-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Präsenz heute (kompakter Chip rechts): grün = jemand angemeldet (Support möglich), grau = niemand */
.req-side-card .items .item.wp-item .seen .wp-presence { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.req-side-card .items .item.wp-item .seen .wp-presence i { font-size: 13px; }
/* Mitgliederliste zum Praesenz-Chip. Gleiche Mechanik wie .sla-note-pop: reines
   Hover bzw. Tastaturfokus, kein JS. Rechtsbuendig verankert, weil der Chip am
   rechten Rand der schmalen Seitenspalte sitzt und ein linksbuendiges Feld aus
   der Karte liefe. Die Farben stehen in light/dark/neon.css. */
/* ACHTUNG Namenskollision: .wp-item gehoert auch der Workpool-Verwaltung
   (main.css, Abschnitt "WORKPOOLS"), wo die Zeilen aufklappen und deshalb
   overflow: hidden brauchen. Dieselbe Klasse traegt hier eine ganz andere
   Komponente, und das geerbte Clipping schnitt das Mitgliederfeld unten auf
   Zeilenhoehe ab - kein z-index der Welt hilft dagegen, Clipping ist keine
   Stapelfrage. */
.req-side-card .items .item.wp-item { overflow: visible; }
.req-side-card .items .item.wp-item .seen .wp-presence { position: relative; }
.req-side-card .items .item.wp-item .seen .wp-presence .wp-presence-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: 250px; max-width: 78vw; border-width: 1px; border-style: solid; border-radius: 10px; padding: 12px 14px; font-size: 11.5px; font-weight: 400; text-align: left; cursor: default; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; }
/* Fuellt die 6px Luecke unter dem Chip, damit der Zeiger das Feld erreicht, ohne
   dass es unterwegs zuklappt. Deshalb scrollt auch die Liste und nicht das Feld -
   ein overflow auf dem Feld wuerde diese Bruecke abschneiden. */
.req-side-card .items .item.wp-item .seen .wp-presence .wp-presence-pop::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; }
.req-side-card .items .item.wp-item .seen .wp-presence:hover .wp-presence-pop,
.req-side-card .items .item.wp-item .seen .wp-presence:focus-within .wp-presence-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-head { font-weight: 600; line-height: 1.45; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-row + .wpm-row { border-top-width: 1px; border-top-style: solid; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-row .wp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-state { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; white-space: nowrap; }
.req-side-card .items .item.wp-item .seen .wp-presence .wpm-empty { font-style: italic; }



/* Kurze Legende unter den Workpools (Farben + Zahl erklärt) */
.req-side-card .wp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.req-side-card .wp-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.req-side-card .wp-legend .wp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }



.req-side-card .wp-legend .wp-legend-note { flex-basis: 100%; }
/* Abstand der Workpool-Karte zum unteren Bildschirmrand */
#workpoolCard { margin-bottom: 24px; }

/* ----------     TRIAGE-PEEK-PANEL (Eingang: Anfrage -> Workpool zuweisen)     ---------- */
/* Rein additives, rechtes Slide-over. Die Liste/Karten bleiben unverändert. */
.triage-overlay { position: fixed; inset: 0; z-index: 1050; display: none; }
.triage-overlay.open { display: block; }
.triage-overlay .triage-backdrop { position: absolute; inset: 0; animation: triageFade .18s ease both; }
.triage-panel { position: absolute; top: 0; right: 0; height: 100%; width: 880px; max-width: 96vw; box-sizing: border-box; display: flex; flex-direction: column; animation: triageSlide .24s cubic-bezier(.22,.61,.36,1) both; }
@keyframes triageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes triageSlide { from { transform: translateX(40px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
.triage-panel.swap .triage-body, .triage-panel.swap .triage-head .t-main { animation: triageCardSwap .26s ease both; }
@keyframes triageCardSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.triage-panel.busy { pointer-events: none; opacity: .7; }

.triage-head { padding: 22px 26px 18px; border-bottom-width: 1px; border-bottom-style: solid; }
.triage-head .t-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.triage-head .t-progress { font-size: 12px; font-weight: 500; }
.triage-head .t-progress b { font-variant-numeric: tabular-nums; }
.triage-head .t-close { cursor: pointer; font-size: 22px; line-height: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; }

.triage-head .t-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.triage-head .t-tags .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 5px; }
.triage-head .t-tags .tag .dot { width: 7px; height: 7px; border-radius: 50%; }






.triage-head .t-tags .tag.ticket { font-variant-numeric: tabular-nums; }
.triage-head .t-tags .t-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.triage-head .t-tags .t-status .dot { width: 7px; height: 7px; border-radius: 50%; }






.triage-head .t-title { font-size: 19px; font-weight: 600; line-height: 1.35; }

.triage-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; }
.triage-body .triage-contact { display: flex; align-items: center; gap: 14px; }
.triage-body .triage-contact .img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
/* bg/text kommen aus der globalen .img.non-Regel je Theme -> identisch zur Listen-Ansicht */
.triage-body .triage-contact .img.non { display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; }
.triage-body .triage-contact .who .nm { font-size: 15px; font-weight: 600; }
.triage-body .triage-contact .who .sub { font-size: 12px; margin-top: 3px; }
.triage-body .triage-participants { margin-top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.triage-body .triage-participants .tp-group { display: flex; align-items: center; gap: 12px; }
.triage-body .triage-participants .lbl { font-size: 12px; min-width: 130px; }
.triage-body .triage-participants .lbl i { font-size: 13px; margin-right: 3px; vertical-align: -1px; }
.triage-body .triage-participants .avs { display: flex; align-items: center; }

.triage-body .triage-participants .avs .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; margin-left: -14px; border-width: 2px; border-style: solid; flex: 0 0 auto; }
.triage-body .triage-participants .avs .av:first-child { margin-left: 0; }
.triage-body .triage-participants .avs .av .img { width: 100%; height: 100%; object-fit: cover; display: block; }
.triage-body .triage-participants .avs .av .img.non { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.triage-body .triage-participants .avs .av.more { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.triage-body .triage-info { margin-top: 22px; padding-top: 20px; border-top-width: 1px; border-top-style: solid; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.triage-body .triage-info .item { min-width: 0; }
.triage-body .triage-info .item .title { font-size: 12px; }
.triage-body .triage-info .item .value { font-size: 14px; margin-top: 6px; word-break: break-word; }
.triage-body .triage-info .item .value a { text-decoration: none; }
.triage-body .triage-info .item .value a:hover { text-decoration: underline; }
.triage-body .triage-msg { margin-top: 22px; }
.triage-body .triage-msg .top { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.triage-body .triage-msg .txt { font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; border-radius: 8px; padding: 16px 18px; }
.triage-body .triage-hint { margin-top: 16px; font-size: 11.5px; display: flex; align-items: center; gap: 8px; line-height: 1.45; }
.triage-body .triage-hint i { font-size: 14px; flex: 0 0 auto; }

.triage-foot { border-top-width: 1px; border-top-style: solid; padding: 18px 26px 22px; }
.triage-foot .top { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.triage-foot .wp-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.triage-foot .wp-pick .wp { font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border-width: 1px; border-style: solid; cursor: pointer; transition: color .14s ease, background .14s ease, border-color .14s ease; }

.triage-foot .wp-pick .wp.sel { border-color: transparent; }
.triage-foot .wp-pick .wp-empty { font-size: 12px; }
.triage-foot .actions { display: flex; gap: 10px; }
.triage-foot .actions .btn { flex: 1; padding: 12.5px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; }



.triage-foot .actions .btn-skip { flex: 0 0 auto; }


/* Transienter Erfolgs-Toast (nicht-blockierend, für Auto-Advance) */
.req-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 1100; font-size: 13px; padding: 11px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.req-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/*? ----------     TRIAGE-PEEK-PANEL     ---------- */
/*? ----------     SUPPORTANFRAGEN / REQUESTS OVERVIEW     ---------- */

/* ----------     SUPPORTANFRAGEN / USER-ANSICHT     ---------- */
.req-topbar .req-actions { display: flex; align-items: center; gap: 16px; }

/* Primäre Aktion: Button oben in der Sidebar, volle Breite der Störungen-Karte */
/* box-sizing nötig, da .btn Padding hat und es kein globales border-box gibt -> sonst ragt der Button heraus */
.req-layout .req-side-col > .btn { width: 100%; box-sizing: border-box; }

.req-tabs .req-tab.disabled { opacity: .4; cursor: not-allowed; }


.req-layout.ureq .req-side-col { flex: 0 0 460px; }

/* Informative Karten (noch keine Detailansicht vorhanden -> nicht klickbar) */
.req-list.ureq .req-card { cursor: pointer; }
/* Geschlossene Tickets treten zurück; Hover stellt volle Lesbarkeit wieder her.
   :not(.is-leaving), damit beim Entfernen die Ausblend-Transition (opacity/transform, s. .is-leaving) greift */
.req-list.ureq .req-card.is-closed:not(.is-leaving) { opacity: .72; transition: box-shadow .15s ease, opacity .15s ease; }
.req-list.ureq .req-card.is-closed:not(.is-leaving):hover { opacity: 1; }

/* Avatar-Stack (links voran, wie in der Master-Ansicht): Ersteller + verlinkte Nutzer + reagierende Admins */
.req-list .req-card .req-avatars { flex: 0 0 auto; display: flex; align-items: center; }
.req-list .req-card .req-avatars .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; margin-left: -14px; border-width: 2px; border-style: solid; flex: 0 0 auto; }
.req-list .req-card .req-avatars .av:first-child { margin-left: 0; }
.req-list .req-card .req-avatars .av .img { width: 100%; height: 100%; object-fit: cover; display: block; }
.req-list .req-card .req-avatars .av .img.non { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.req-list .req-card .req-avatars .av.more { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* Karte: Ersteller-Avatar (40px) vorne bestimmt die Kartenhöhe -> alle Karten gleich hoch (kompakt wie zuvor).
   "Zugriff" (Beteiligte) und "Admins" sind eigene Spalten: überlappende Avatare oben, Label mittig darunter. */
.req-list .req-card .req-main { flex: 0 1 auto; }
/* Rechte Gruppe (Zugriff, Admins, Workpool, Zeit) immer rechtsbündig – auch ohne Personen-Avatare */
.req-list .req-card .req-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 26px; }
.req-list .req-card .req-people { flex: 0 0 auto; display: flex; align-items: center; gap: 26px; }
.req-list .req-card .req-people .pg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.req-list .req-card .req-people .pg .pg-avs { display: flex; align-items: center; }
.req-list .req-card .req-people .pg .pg-av { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; margin-left: -7px; border-width: 2px; border-style: solid; flex: 0 0 auto; }
.req-list .req-card .req-people .pg .pg-av:first-child { margin-left: 0; }
.req-list .req-card .req-people .pg .pg-av .img { width: 100%; height: 100%; object-fit: cover; display: block; }
.req-list .req-card .req-people .pg .pg-av .img.non { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.req-list .req-card .req-people .pg .pg-av.more { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }

.req-list .req-card .req-people .pg .pg-label { font-size: 11px; line-height: 1; white-space: nowrap; }

/* Aside: Status oben, Zeit darunter */
.req-list.ureq .req-card .req-aside { gap: 7px; }
.req-list.ureq .req-card .req-aside .req-time { font-size: 11px; }
/*? ----------     SUPPORTANFRAGEN / USER-ANSICHT     ---------- */

/* ----------     FÜHRERSCHEINE (SERVICES)     ---------- */
/* Status-Badge (Pille mit Punkt) */
.dl-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.dl-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hero-badges .dl-badge { font-size: 12px; padding: 5px 12px; }

/* Status-Banner (Detail) */
.dl-banner { display: inline-flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 10px; margin-bottom: 22px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.dl-banner .bn-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; font-size: 21px; flex-shrink: 0; }
.dl-banner .bn-text .t { font-size: 15px; font-weight: 600; }
.dl-banner .bn-text .s { font-size: 13px; margin-top: 2px; }

/* Lese-Zusammenfassung (Detail): letzte / nächste Kontrolle / geprüft durch */
.dl-summary { display: flex; flex-wrap: wrap; gap: 14px; }
.dl-summary .sum-item { flex: 1 1 180px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 10px; }
.dl-summary .sum-item .sum-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-size: 19px; flex-shrink: 0; }
.dl-summary .sum-item .sum-text { min-width: 0; }
.dl-summary .sum-item .sum-text .k { font-size: 12px; margin-bottom: 3px; }
.dl-summary .sum-item .sum-text .v { font-size: 14px; font-weight: 600; }

/* Prüf-Formular (Detail) */
.dl-field { margin-bottom: 26px; }
.dl-field:last-child { margin-bottom: 0; }
.dl-field .fl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dl-field .hint { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.dl-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.dl-grid > .dl-field { flex: 1 1 240px; margin-bottom: 0; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-chips .dl-chip { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; min-width: 34px; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease; }

/* Bestätigungs-Footer der Prüfung */
.dl-confirm { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; }
.dl-confirm .note { font-size: 12px; line-height: 1.5; max-width: 460px; }
.dl-confirm .btn { gap: 8px; padding: 13px 26px; }

/* Prüf-Historie (Log unten im Detail) */
.dl-log { display: flex; flex-direction: column; }
.dl-log .log-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.dl-log .log-item:first-child { padding-top: 0; }
.dl-log .log-item:last-child { padding-bottom: 0; }
.dl-log .log-item .log-dot { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; flex-shrink: 0; }
.dl-log .log-item .log-main { min-width: 0; padding-top: 5px; }
.dl-log .log-item .log-main .log-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dl-log .log-item .log-main .log-meta { font-size: 12px; margin-top: 3px; }
.dl-log .log-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.dl-log .dl-log-empty { font-size: 13px; padding: 2px 0; }
/*? ----------     FÜHRERSCHEINE (SERVICES)     ---------- */

/* ----------     SYSTEM ENTRA     ---------- */
.connector-list { display: flex; flex-direction: column; gap: 10px; }
.connector-list .connector-card { display: flex; align-items: center; gap: 16px; padding: 22px 36px; border-radius: 10px; box-sizing: border-box; cursor: pointer; transition: box-shadow .15s ease; }

.connector-list .connector-card .cn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.connector-list .connector-card .cn-main .cn-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.connector-list .connector-card .cn-main .cn-sub { font-size: 12px; overflow-wrap: anywhere; }
.connector-list .connector-card .cn-stats { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; justify-content: flex-end; }
.connector-list .connector-card .cn-stats .cn-stat { display: flex; flex-direction: column; gap: 2px; text-align: center; white-space: nowrap; width: 110px; }
.connector-list .connector-card .cn-stats .cn-stat .cn-stat-val { font-size: 14px; font-weight: 600; }
.connector-list .connector-card .cn-stats .cn-stat .cn-stat-key { font-size: 11px; }
.connector-list .connector-card .cn-action { cursor: pointer; font-size: 20px; padding: 6px; flex-shrink: 0; border-radius: 6px; }

.connector-list .empty { padding: 22px 4px; }

.connector-detail { display: flex; flex-direction: column; gap: 15px; }
.connector-detail .cd-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; width: fit-content; }

.connector-detail .cd-back i { font-size: 18px; }
/* Kopfzeile: Name, Status und Auth-Methode nebeneinander, Aktion rechts */
.connector-detail .cd-head { display: flex; align-items: flex-start; gap: 16px; }
.connector-detail .cd-head .cd-headline { min-width: 0; flex: 1 1 auto; }
.connector-detail .cd-head .cd-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.connector-detail .cd-head .cd-title { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.connector-detail .cd-head .cd-sub { font-size: 12.5px; margin-top: 5px; overflow-wrap: anywhere; }
.connector-detail .cd-head .cd-sub b { font-weight: 600; }
.connector-detail .cd-head .cd-sub .cd-sub-sep { margin: 0 8px; opacity: .45; }
.connector-detail .cd-head .cd-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Rumpf: links der Betrieb, rechts die Konfiguration - wie im Ticketdetail */
.connector-detail .cd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.connector-detail .cd-main, .connector-detail .cd-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1180px) { .connector-detail .cd-cols { grid-template-columns: minmax(0, 1fr); } }

.connector-detail .cd-card { border-radius: 12px; box-sizing: border-box; }
.connector-detail .cd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 22px; }
.connector-detail .cd-card-title { font-size: 15px; font-weight: 600; }
.connector-detail .cd-card-body { padding: 0 22px 20px; }
.connector-detail .cd-card .cd-runs-list, .connector-detail .cd-card .cd-users-list { padding: 0 22px; }
/* Fuss mit Trefferzahl links und Blaetterung rechts */
.connector-detail .cd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 16px; font-size: 12px; }
.connector-detail .cd-card-foot .pagination { margin: 0; }

/* Verlaufsbalken: ein Balken je geladenem Lauf, aelteste links */
.connector-detail .cd-spark { display: flex; align-items: flex-end; gap: 3px; height: 42px; margin-bottom: 6px; }
.connector-detail .cd-spark .cd-spark-bar { flex: 1 1 0; min-width: 3px; height: 100%; border-radius: 3px 3px 0 0; opacity: .85; }


.connector-detail .cd-spark-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }

/* Benutzer-Tabs im Kartenkopf */
/* .ra-seg.tabs bringt ein margin-bottom mit (gedacht fuer die Filterzeile ueber
   einer Liste). Im Kartenkopf zentriert Flexbox die Margin-Box - der Rand wuerde
   die Tabs gegenueber Suche und Button nach oben versetzen. */
.connector-detail .cd-card-head .cd-user-tabs { margin-bottom: 0; align-self: center; }
.connector-detail .cd-user-tabs .ra-seg-btn { padding: 6px 11px; font-size: 12.5px; white-space: nowrap; }
.connector-detail .cd-user-tabs .ra-seg-btn b { font-weight: 600; opacity: .7; margin-left: 3px; }
.connector-detail .cd-user-tabs .ra-seg-btn b:empty { display: none; }
.connector-detail .cd-more { letter-spacing: .08em; }
/* Aktions- und Zertifikatskarte: Buttons ueber die volle Kartenbreite.
   .btn hat width: fit-content - das muss hier ueberschrieben werden. */
.connector-detail .cd-act { display: flex; flex-direction: column; gap: 9px; }
.connector-detail .cd-act .btn { width: 100%; box-sizing: border-box; justify-content: center; }

/* Verbindungsdaten als Schlüssel/Wert-Paare mit Kopierfunktion */
.connector-detail .cd-kv { display: flex; flex-direction: column; gap: 15px; }
.connector-detail .cd-kv .cd-kv-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.connector-detail .cd-kv .cd-kv-v { font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.connector-detail .cd-kv .cd-kv-v code { font-family: monospace; font-size: 12px; border-radius: 6px; padding: 4px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-detail .cd-copy { flex-shrink: 0; cursor: pointer; font-size: 15px; }


.connector-detail .cd-note { font-size: 12px; line-height: 1.6; }
.connector-detail .cd-actions .btn-group { flex-wrap: wrap; }
.connector-detail .cd-actions + .cd-note { margin-top: 12px; }
.connector-detail .cd-runs-list { display: flex; flex-direction: column; }
.connector-detail .cd-runs-list .cd-run { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom-width: 1px; border-bottom-style: solid; }
.connector-detail .cd-runs-list .cd-run:last-child { border-bottom: none; }
.connector-detail .cd-runs-list .cd-run .cd-run-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.connector-detail .cd-runs-list .cd-run .cd-run-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }



.connector-detail .cd-runs-list .cd-run .cd-run-main { flex: 1; min-width: 0; }
.connector-detail .cd-runs-list .cd-run .cd-run-type { font-size: 13px; }
.connector-detail .cd-runs-list .cd-run .cd-run-meta { font-size: 11.5px; margin-top: 2px; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-detail .cd-runs-list .cd-run .cd-run-date { font-size: 13px; white-space: nowrap; }
.connector-detail .cd-runs-list .empty { padding: 16px 0; }
/* Entra-Detail: Liste der synchronisierten Benutzer (Klick öffnet die Benutzerverwaltung) */
.connector-detail .cd-users-list { display: flex; flex-direction: column; }
.connector-detail .cd-users-list .cd-user { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom-width: 1px; border-bottom-style: solid; cursor: pointer; }
.connector-detail .cd-users-list .cd-user:last-child { border-bottom: none; }

.connector-detail .cd-users-list .cd-user .cd-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.connector-detail .cd-users-list .cd-user .cd-user-avatar.non { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.connector-detail .cd-users-list .cd-user .cd-user-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.connector-detail .cd-users-list .cd-user .cd-user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-detail .cd-users-list .cd-user .cd-user-mail { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-detail .cd-users-list .cd-user .cd-user-date { font-size: 12.5px; white-space: nowrap; }
.connector-detail .cd-users-list .empty { padding: 16px 0; }
/* Benutzer nach Berechtigung. Die Gruppen starten eingeklappt - cd-right-users
   ist ausgeblendet, erst .open zeigt sie. Bei zwanzig Rechten waeren offene
   Listen laenger als die Seite, gesucht wird aber immer nur ein bestimmtes
   Recht; die Zahl im Kopf sagt vorher, was dahintersteckt. */
.connector-detail .cd-rights-list { display: flex; flex-direction: column; padding: 0 22px 18px; }
.connector-detail .cd-rights-list .empty { padding: 16px 0; }
.connector-detail .cd-rights-list .cd-right-group { border-bottom-width: 1px; border-bottom-style: solid; }
.connector-detail .cd-rights-list .cd-right-group:last-child { border-bottom: none; }
.connector-detail .cd-rights-list .cd-right-head { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; user-select: none; }
.connector-detail .cd-rights-list .cd-right-caret { flex: none; font-size: 14px; transition: transform .15s; }
.connector-detail .cd-rights-list .cd-right-group.open .cd-right-caret { transform: rotate(90deg); }
.connector-detail .cd-rights-list .cd-right-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; }
.connector-detail .cd-rights-list .cd-right-scope { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.connector-detail .cd-rights-list .cd-right-count { flex: none; min-width: 26px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.connector-detail .cd-rights-list .cd-right-users { display: none; padding: 0 0 10px 24px; }
.connector-detail .cd-rights-list .cd-right-group.open .cd-right-users { display: block; }
.connector-detail .cd-rights-list .cd-right-user { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; min-width: 0; }
.connector-detail .cd-rights-list .cd-right-user .n { flex: none; font-size: 13px; }
.connector-detail .cd-rights-list .cd-right-user .e { min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-detail .cd-rights-list .cd-right-off { font-size: 11px; }
.connector-detail .cd-card-head .cd-rights-summary { font-size: 12px; white-space: nowrap; }
.connector-detail .cd-card-head .cd-head-tools { display: flex; align-items: center; gap: 10px; }
.connector-detail .cd-users-search { max-width: 260px; }
.connector-detail .cd-users-search .input { padding: 8px 12px; }
.connector-detail .cd-users-search .input input { font-size: 13.5px; }
.connector-detail .cd-refresh-btn i { font-size: 15px; }
.connector-detail .cd-refresh-btn.loading { pointer-events: none; opacity: .7; }
.connector-detail .cd-refresh-btn.loading i { animation: cd-spin .8s linear infinite; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
.ac-admin { margin-top: 10px; }
.ac-admin .ac-admin-label { font-size: 12px; margin-bottom: 6px; }
.ac-admin .ac-admin-search { margin-bottom: 8px; max-width: none; }
.ac-admin .ac-admin-list { max-height: 170px; overflow-y: auto; border-width: 1px; border-style: solid; border-radius: 6px; }
.ac-admin .ac-admin-list .ac-admin-opt { padding: 10px 14px; cursor: pointer; font-size: 14px; }


.ac-admin .ac-admin-list .ac-admin-empty { padding: 12px 14px; font-size: 13px; }
/* Entra: Download-Link für die öffentliche .cer im Connector-Modal */
.entra-cert-link { margin-top: 8px; font-weight: 600; cursor: pointer; }
.entra-cert-link:hover { text-decoration: underline; }
/*? ----------     SYSTEM ENTRA     ---------- */

/* ----------     ACCOUNT DEVICES     ---------- */
/* Layout only - Farben werden in light.css / dark.css / neon.css gesetzt */
.acc-devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 15px; }
.acc-devices-grid .device-card { display: flex; flex-direction: column; padding: 20px; border-radius: 12px; box-sizing: border-box; transition: box-shadow .15s ease; }
.acc-devices-grid .device-card .device-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acc-devices-grid .device-card .device-top .device-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; font-size: 22px; }
.acc-devices-grid .device-card .device-top .device-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-devices-grid .device-card .device-top .device-headline .device-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-devices-grid .device-card .device-top .device-headline .device-type { font-size: 12px; }
.acc-devices-grid .device-card .device-meta { display: flex; flex-direction: column; gap: 11px; }
.acc-devices-grid .device-card .device-meta .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.acc-devices-grid .device-card .device-meta .meta-row .meta-label { flex-shrink: 0; }
.acc-devices-grid .device-card .device-meta .meta-row .meta-value { font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-devices-grid .device-card .device-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; font-size: 12px; }
.acc-devices-grid .device-card .device-foot .device-lastseen { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acc-devices-grid .device-card .device-foot .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acc-devices-grid .device-card.empty { grid-column: 1 / -1; align-items: center; justify-content: center; text-align: center; padding: 45px 20px; }
/* MFA-Leerzustand: Erklaerung, warum nichts angezeigt wird, plus Link zu den
   Sicherheitsinformationen bei Microsoft */
.acc-devices-grid .device-card.empty.mfa-empty { flex-direction: column; gap: 8px; }
.acc-devices-grid .device-card.empty.mfa-empty .mfa-empty-title { font-size: 13.5px; font-weight: 600; }
.acc-devices-grid .device-card.empty.mfa-empty .mfa-empty-text { font-size: 12.5px; line-height: 1.6; max-width: 560px; }
.acc-devices-grid .device-card.empty.mfa-empty .mfa-empty-link { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.acc-devices-grid .device-card.empty.mfa-empty .mfa-empty-link:hover { text-decoration: underline; }

.acc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.acc-pill i { font-size: 13px; }
.acc-pill.clickable { cursor: pointer; }

.acc-agreements { display: flex; flex-direction: column; }
.acc-agreements .agreement-item { display: flex; align-items: center; gap: 14px; padding: 18px 25px; }
.acc-agreements .agreement-item.link { cursor: pointer; }
.acc-agreements .agreement-item .agreement-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; font-size: 20px; }
.acc-agreements .agreement-item .agreement-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.acc-agreements .agreement-item .agreement-info .agreement-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-agreements .agreement-item .agreement-info .agreement-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-agreements .agreement-item .agreement-status { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.acc-agreements .agreement-item .agreement-status .agreement-date { font-size: 11px; white-space: nowrap; }
.acc-agreements .agreement-item.empty { justify-content: center; text-align: center; padding: 30px 25px; }

/* Nutzungsbedingungen-Modal (Geräteübergabe) */
.modal.modal-terms { max-width: 560px; }
.modal.modal-terms .terms-progress { font-size: 12px; margin-top: 4px; }
.modal.modal-terms .terms-device { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; margin: 14px 0 4px; }
.modal.modal-terms .terms-device .terms-device-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; font-size: 20px; }
.modal.modal-terms .terms-device .terms-device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal.modal-terms .terms-device .terms-device-info .terms-device-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.modal-terms .terms-device .terms-device-info .terms-device-sub { font-size: 12px; }
.modal.modal-terms .terms-sections { display: flex; flex-direction: column; gap: 15px; margin: 16px 0; }
.modal.modal-terms .terms-sections .terms-section { display: flex; gap: 12px; }
.modal.modal-terms .terms-sections .terms-section .terms-section-icon { flex-shrink: 0; font-size: 20px; margin-top: 1px; }
.modal.modal-terms .terms-sections .terms-section .terms-section-body { display: flex; flex-direction: column; gap: 3px; }
.modal.modal-terms .terms-sections .terms-section .terms-section-body .terms-section-title { font-size: 13px; font-weight: 600; }
.modal.modal-terms .terms-sections .terms-section .terms-section-body .terms-section-text { font-size: 12px; line-height: 1.55; }
.modal.modal-terms .terms-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 10px; cursor: pointer; }
.modal.modal-terms .terms-confirm input { margin: 1px 0 0; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.modal.modal-terms .terms-confirm label { font-size: 12px; line-height: 1.5; cursor: pointer; }
.modal.modal-terms .terms-readonly-note { font-size: 12px; margin-top: 14px; }
/*? ----------     ACCOUNT DEVICES     ---------- */

/* ----------     KNOWLEDGEBASE     ---------- */
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block .wrapper .content { display: flex; flex-direction: column; gap: 10px; }
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block .wrapper .content .split { display: flex; gap: 10px; }
.wrapper .container .content.knowledgebase .blocks .split .block-wrapper .block { min-height: 180px; }
/*? ----------     KNOWLEDGEBASE     ---------- */

/* ----------     MARKDOWN     ---------- */
.md-content h1 { font-size: 22px; font-weight: 700; margin: 24px 0 12px; }
.md-content h2 { font-size: 18px; font-weight: 700; margin: 20px 0 10px; }
.md-content h3 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }
.md-content h4 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.md-content h5, .md-content h6 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.md-content p { margin: 0 0 12px; line-height: 1.65; }
.md-content p:last-child { margin-bottom: 0; }
.md-content strong { font-weight: 600; }
.md-content em { font-style: italic; }
.md-content del { text-decoration: line-through; opacity: 0.6; }
.md-content a { text-decoration: underline; text-underline-offset: 2px; }
.md-content a:hover { opacity: 0.8; }
.md-content code { font-family: monospace; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.md-content pre { border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 12px; }
.md-content pre code { padding: 0; background: none; font-size: 12px; line-height: 1.6; }
.md-content blockquote { border-left: 3px solid; padding: 8px 16px; margin: 0 0 12px; border-radius: 0 6px 6px 0; opacity: 0.85; }
.md-content blockquote p { margin-bottom: 4px; }
.md-content ul, .md-content ol { margin: 0 0 12px; padding-left: 24px; }
.md-content li { margin-bottom: 4px; line-height: 1.55; }
.md-content hr { border: none; border-top: 1px solid; opacity: 0.15; margin: 16px 0; }
.md-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.md-content .md-table-wrap { overflow-x: auto; margin: 0 0 12px; border-radius: 8px; }
.md-content table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-content th { font-weight: 600; padding: 10px 12px; text-align: left; }
.md-content td { padding: 8px 12px; }
/*? ----------     MARKDOWN     ---------- */

/* ----------     REQUESTS TYPE     ---------- */
.wrapper .container .content .type-wrapper { display: flex; flex-direction: column; align-items: center; margin: auto; width: 100%; }
.wrapper .container .content .type-wrapper .type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 880px; margin: 0 auto; }
.wrapper .container .content .type-wrapper .type .type-card { display: flex; flex-direction: column; flex: 0 0 calc(50% - 10px); max-width: 430px; border-radius: 12px; padding: 15px 22px; transition: box-shadow .15s ease, border-color .15s ease; cursor: pointer; }
.wrapper .container .content .type-wrapper .type .type-card .type-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.wrapper .container .content .type-wrapper .type .type-card .type-info { font-size: 12.5px; line-height: 1.5; }
.wrapper .container .content .type-wrapper .type .type-card.disabled { opacity: .55; cursor: not-allowed; }
.wrapper .container .content .type-wrapper .type-back { margin-top: 18px; }
.wrapper .container .content .type-wrapper .type-back .type-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-decoration: none; }
.wrapper .container .content .type-wrapper .type-back .type-back-link i { font-size: 14px; }
/*? ----------     REQUESTS TYPE     ---------- */

/* ----------     STATS     ---------- */
.wrapper .container .content .blocks .block-wrapper .block .table-rows { font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .delta { font-size: 11px; display: flex; align-items: center; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .name { font-weight: 600; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .avatar-cell .img { height: 30px; width: 30px; border-radius: 50%; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .avatar-cell .img.non { display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 12px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .level-info { gap: 3px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .level-info img { margin-right: 0; width: 30px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .score { font-weight: 600; }

.wrapper .container .content.stats { display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px; }
.wrapper .container .content.stats .section { border-radius: 10px; padding: 30px; }
.wrapper .container .content.stats .section .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wrapper .container .content.stats .section .section-header .section-title { font-size: 16px; font-weight: 600; }
.wrapper .container .content.stats .section .section-header .section-subtitle { font-size: 12px; }

.wrapper .container .content.stats .section .kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card { border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header { display: flex; justify-content: space-between; align-items: center; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header .kpi-label { font-size: 13px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header .kpi-trend { font-size: 10px; font-weight: 500; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main { display: flex; flex-direction: column; gap: 1px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main .kpi-value { font-size: 20px; font-weight: 600; font-family: monospace; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main .kpi-sublabel { font-size: 10px; }

.wrapper .container .content.stats .section .charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.wrapper .container .content.stats .section .charts-row .chart-card { display: flex; flex-direction: column; gap: 10px; border-radius: 10px; padding: 10px 15px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header { display: flex; justify-content: space-between; align-items: baseline; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left { display: flex; align-items: baseline; gap: 8px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left .chart-title { font-size: 13px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left .chart-subtitle { font-size: 10px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .chart-meta { font-size: 10px; font-weight: 500; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-body { position: relative; width: 100%; }

/* Stats-Rework: Intro-Kopf, KPI-Karten (Icon/Chip), Qualität-Karten – nur Layout, Farben in den Theme-Dateien */
.wrapper .container .content.stats .stats-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-radius: 10px; padding: 24px 30px; }
.wrapper .container .content.stats .stats-intro .intro-text { flex: 1; min-width: 0; }
.wrapper .container .content.stats .stats-intro .intro-text .intro-title { font-size: 18px; font-weight: 600; }
.wrapper .container .content.stats .stats-intro .intro-text .intro-sub { font-size: 13px; margin-top: 6px; line-height: 1.55; }
.wrapper .container .content.stats .stats-intro .intro-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.wrapper .container .content.stats .stats-intro .intro-actions .intro-updated { font-size: 11px; }
.wrapper .container .content.stats .stats-intro .intro-actions .refresh-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 8px; padding: 9px 15px; font-size: 13px; font-weight: 600; transition: border-color .15s ease, color .15s ease; }
.wrapper .container .content.stats .section .kpi-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body { display: flex; flex-direction: column; gap: 3px; }
/* Wert und Chip in einer Zeile. Vorher sass der Chip zusammen mit einem Symbol
   in einer eigenen Kopfzeile ueber der Karte - die Kennzahl und ihre Einordnung
   standen dadurch weit auseinander. An der Grundlinie ausgerichtet, damit der
   kleine Chip auf der Schriftlinie der grossen Zahl sitzt und nicht mittig
   daneben schwebt. */
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body .kpi-value-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body .kpi-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body .kpi-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body .kpi-label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-body .kpi-sublabel { font-size: 11px; }
.wrapper .container .content.stats .section .charts-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.wrapper .container .content.stats .section .charts-row .quality-card { border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-head .q-label { font-size: 13px; font-weight: 600; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-head .q-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-bar { height: 8px; border-radius: 999px; overflow: hidden; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-bar .q-fill { height: 100%; border-radius: 999px; }
.wrapper .container .content.stats .section .charts-row .quality-card .q-row .q-foot { font-size: 11px; margin-top: 7px; }

/* Ranking-Rework: Controls, Podium, Leaderboard, Detail-Modal – nur Layout, Farben in den Theme-Dateien */
.wrapper .container .content.stats .rk-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wrapper .container .content.stats .rk-controls .filter-chips { display: flex; gap: 18px; }
.wrapper .container .content.stats .rk-controls .filter-chips .chip { background: transparent; border-radius: 0; padding: 8px 2px; position: relative; }
.wrapper .container .content.stats .rk-controls .filter-chips .chip.active { background: transparent; }
.wrapper .container .content.stats .rk-controls .filter-chips .chip::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.wrapper .container .content.stats .rk-controls .filter-chips .chip:hover::after { transform: scaleX(1); transform-origin: left; }
.wrapper .container .content.stats .rk-controls .filter-chips .chip.active::after { transform: scaleX(1); transform-origin: left; }
.wrapper .container .content.stats .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
.wrapper .container .content.stats .podium .pod { border-radius: 12px; padding: 20px; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: box-shadow .15s ease; }
.wrapper .container .content.stats .podium .pod .medal { position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 700; }
.wrapper .container .content.stats .podium .pod .pod-avatar { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; overflow: hidden; }
.wrapper .container .content.stats .podium .pod .pod-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrapper .container .content.stats .podium .pod .pod-name { font-size: 15px; font-weight: 600; }
.wrapper .container .content.stats .podium .pod .pod-level { font-size: 12px; margin-top: 2px; }
.wrapper .container .content.stats .podium .pod .pod-hidden-tag { position: absolute; left: 12px; bottom: 12px; margin-left: 0; }
.wrapper .container .content.stats .podium .pod .pod-score { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 12px; }
.wrapper .container .content.stats .podium .pod .pod-score small { font-size: 11px; font-weight: 500; }
.wrapper .container .content.stats .podium .pod.p1 { transform: translateY(-10px); }
.wrapper .container .content.stats .lb { display: flex; flex-direction: column; }
.wrapper .container .content.stats .lb .lb-head, .wrapper .container .content.stats .lb .lb-row { display: grid; grid-template-columns: 44px 1.6fr 130px 70px 70px 64px 78px; align-items: center; gap: 12px; padding: 13px 14px; }
.wrapper .container .content.stats .lb .lb-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wrapper .container .content.stats .lb .lb-head > div:nth-child(n+3), .wrapper .container .content.stats .lb .lb-row > div:nth-child(n+3) { text-align: right; }
.wrapper .container .content.stats .lb .lb-row { cursor: pointer; border-radius: 8px; transition: background .12s ease; }
.wrapper .container .content.stats .lb .lb-row .rk { font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .lb .lb-row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wrapper .container .content.stats .lb .lb-row .who .av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; }
.wrapper .container .content.stats .lb .lb-row .who .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrapper .container .content.stats .lb .lb-row .who .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrapper .container .content.stats .lb .lb-row .who .lv { font-size: 12px; }
.wrapper .container .content.stats .lb .lb-row .lv-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12px; }
.wrapper .container .content.stats .lb .lb-row .lv-cell img { width: 22px; height: 22px; }
.wrapper .container .content.stats .lb .lb-row .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .lb .lb-row .delta { font-size: 11px; font-weight: 700; }
.lb-tag { display: inline-flex; align-items: center; margin-left: 8px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; vertical-align: middle; }
.modal.modal-rank { max-width: 920px; width: calc(100% - 48px); max-height: 90vh; overflow-y: auto; }
.modal.modal-rank .rd-head { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.modal.modal-rank .rd-head .rd-av { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.modal.modal-rank .rd-head .rd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.modal-rank .rd-head .rd-meta { flex: 1; min-width: 0; }
.modal.modal-rank .rd-head .rd-meta .rd-name { font-size: 19px; font-weight: 700; }
.modal.modal-rank .rd-head .rd-meta .rd-sub { font-size: 13px; margin-top: 2px; }
.modal.modal-rank .rd-head .rd-rank { text-align: center; padding: 5px 11px; border-radius: 8px; }
.modal.modal-rank .rd-head .rd-rank .v { font-size: 16px; font-weight: 700; }
.modal.modal-rank .rd-head .rd-rank .l { font-size: 10px; }
.modal.modal-rank .rd-level { margin: 26px 0 10px; }
.modal.modal-rank .rd-level .rd-level-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px; }
.modal.modal-rank .rd-level .rd-bar { height: 9px; border-radius: 999px; overflow: hidden; }
.modal.modal-rank .rd-level .rd-bar .rd-fill { height: 100%; border-radius: 999px; }
.modal.modal-rank .rd-section { margin-top: 22px; }
.modal.modal-rank .rd-section .rd-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.modal.modal-rank .rd-section .rd-section-title .rd-section-note { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.modal.modal-rank .rd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.modal.modal-rank .rd-grid.duo { grid-template-columns: repeat(2, 1fr); }
.modal.modal-rank .rd-grid .rd-kpi { border-radius: 10px; padding: 16px 16px; }
.modal.modal-rank .rd-grid .rd-kpi .rd-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.modal.modal-rank .rd-grid .rd-kpi .rd-l { font-size: 11px; margin-top: 3px; }
.modal.modal-rank .rd-breakdown { border-radius: 10px; overflow: hidden; }
.modal.modal-rank .rd-breakdown .rd-bd-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 11px 16px; }
.modal.modal-rank .rd-breakdown .rd-bd-row + .rd-bd-row { border-top-width: 1px; border-top-style: solid; }
.modal.modal-rank .rd-breakdown .rd-bd-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.modal.modal-rank .rd-breakdown .rd-bd-cat { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.modal.modal-rank .rd-breakdown .rd-bd-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.modal.modal-rank .rd-breakdown .rd-bd-exp { min-width: 58px; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.modal.modal-rank .rd-breakdown .rd-bd-empty { padding: 18px 16px; font-size: 13px; text-align: center; }
.modal.modal-rank .rd-breakdown:not(.expanded) .rd-bd-row.extra { display: none; }
.modal.modal-rank .rd-breakdown .rd-bd-more { display: block; width: 100%; padding: 10px 16px; border: 0; border-top-width: 1px; border-top-style: solid; background: none; font: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; }
.modal.modal-rank .rd-chart-card { margin-top: 24px; border-radius: 10px; padding: 20px; }
.modal.modal-rank .rd-chart-card .rd-chart-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.modal.modal-rank .rd-chart-card .rd-chart-body { position: relative; height: 210px; }

/* Qualität > Einzelauswertung je Kollege – nur Layout, Farben in den Theme-Dateien */
.wrapper .container .content.stats .perf-list .perf-card { cursor: pointer; }
/* Einzelauswertung Servicequalität: lag frueher in einem Modal (.modal-perf) und
   ist jetzt eine eigene Seite. Die Bausteine (.pd-*) blieben unveraendert, nur der
   Aufhaenger heisst .perf-detail - deshalb hier KEINE Hoehenbegrenzung und kein
   eigenes Scrollen mehr, die Seite scrollt selbst. */
.perf-detail { width: 100%; }
.perf-detail .pd-loading { padding: 60px 0; text-align: center; font-size: 13px; }
.perf-detail .pd-head { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.perf-detail .pd-head .pd-av { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; flex-shrink: 0; }
.perf-detail .pd-head .pd-meta { flex: 1; min-width: 0; }
.perf-detail .pd-head .pd-meta .pd-name { font-size: 19px; font-weight: 700; }
.perf-detail .pd-head .pd-meta .pd-sub { font-size: 13px; margin-top: 2px; }
.perf-detail .pd-head .pd-period { text-align: center; padding: 5px 13px; border-radius: 8px; white-space: nowrap; }
.perf-detail .pd-head .pd-period .v { font-size: 14px; font-weight: 700; }
.perf-detail .pd-head .pd-period .l { font-size: 10px; }
.perf-detail .pd-section { margin-top: 26px; }
.perf-detail .pd-section .pd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.perf-detail .pd-section .pd-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.perf-detail .pd-section .pd-section-title .pd-section-note { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.perf-detail .pd-section .pd-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 11px; border-radius: 999px; flex: none; }
.perf-detail .pd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.perf-detail .pd-grid .pd-kpi { border-radius: 10px; padding: 15px 16px; }
.perf-detail .pd-grid .pd-kpi .pd-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-detail .pd-grid .pd-kpi .pd-l { font-size: 11px; margin-top: 3px; }
.perf-detail .pd-list { border-radius: 10px; overflow: hidden; }
.perf-detail .pd-list .pd-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; text-decoration: none; }
.perf-detail .pd-list .pd-item + .pd-item { border-top-width: 1px; border-top-style: solid; }
.perf-detail .pd-list .pd-item .pd-item-main { min-width: 0; }
.perf-detail .pd-list .pd-item .pd-item-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-detail .pd-list .pd-item .pd-item-title .pd-tid { font-variant-numeric: tabular-nums; margin-right: 8px; }
.perf-detail .pd-list .pd-item .pd-item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.perf-detail .pd-list .pd-item .pd-item-sub .pd-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.perf-detail .pd-list .pd-item .pd-item-sub .pd-who { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-detail .pd-list .pd-item .pd-item-side { text-align: right; white-space: nowrap; flex: none; }
.perf-detail .pd-list .pd-item .pd-item-side .pd-item-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-detail .pd-list .pd-item .pd-item-side .pd-item-note { font-size: 10px; margin-top: 2px; }
.perf-detail .pd-list .pd-empty { padding: 18px 16px; font-size: 13px; text-align: center; }
.perf-detail .pd-list .pd-more,
.perf-detail .pd-cust .pd-more { padding: 10px 16px; font-size: 11px; text-align: center; border-top-width: 1px; border-top-style: solid; }
.perf-detail .pd-good .pd-good-note { border-radius: 10px; padding: 15px 16px; font-size: 13px; }
.perf-detail .pd-cust { border-radius: 10px; overflow: hidden; }
.perf-detail .pd-cust .pd-cust-row { display: grid; grid-template-columns: 1fr 80px 80px 120px 130px; align-items: center; gap: 10px; padding: 11px 16px; font-size: 12px; font-variant-numeric: tabular-nums; }
.perf-detail .pd-cust .pd-cust-row.head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.perf-detail .pd-cust .pd-cust-row + .pd-cust-row { border-top-width: 1px; border-top-style: solid; }
.perf-detail .pd-cust .pd-cust-row .pd-cust-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-detail .pd-cust .pd-empty { padding: 18px 16px; font-size: 13px; text-align: center; }

/* Gemeinsames Monatsziel + Abzeichen – nur Layout, Farben in den Theme-Dateien */
.wrapper .container .content.stats .team-goal { border-radius: 10px; padding: 20px; }
.wrapper .container .content.stats .team-goal .tg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wrapper .container .content.stats .team-goal .tg-head .tg-label { font-size: 13px; font-weight: 600; }
.wrapper .container .content.stats .team-goal .tg-head .tg-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .team-goal .tg-bar { height: 10px; border-radius: 999px; overflow: hidden; }
.wrapper .container .content.stats .team-goal .tg-bar .tg-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.wrapper .container .content.stats .team-goal .tg-foot { font-size: 11px; margin-top: 8px; }
.wrapper .container .content.stats .lb .lb-row .who .nm .lb-badge { font-size: 13px; margin-left: 6px; vertical-align: baseline; }
.wrapper .container .content.stats .lb .lb-row .who .nm .lb-badge-more { display: inline-flex; align-items: center; margin-left: 5px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.modal.modal-rank .rd-profile-link { margin-top: 14px; text-align: right; }
.modal.modal-rank .rd-profile-link a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 8px; }

/* Konto > Erfolge – nur Layout, Farben in den Theme-Dateien */
/* Saison-Champion: eigener Streifen ÜBER dem Hero. Nur Aufbau - Hintergrund und
   Rahmenfarbe setzen die Themes, wie beim Hero und beim Podium auch. Das Gold
   muss je Theme unterschiedlich ausfallen, sonst wird es auf Weiß zu blass. */
.wrapper .container .content.stats .ach-champion { display: flex; align-items: center; gap: 16px; border-radius: 12px; padding: 18px 24px; margin-bottom: 16px; border: 1px solid transparent; }
.wrapper .container .content.stats .ach-champion .ac-img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.wrapper .container .content.stats .ach-champion .ac-main { min-width: 0; }
.wrapper .container .content.stats .ach-champion .ac-title { font-size: 17px; font-weight: 700; }
.wrapper .container .content.stats .ach-champion .ac-sub { font-size: 13px; margin-top: 2px; }

.wrapper .container .content.stats .ach-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; border-radius: 12px; padding: 26px 30px; }
.wrapper .container .content.stats .ach-hero .ah-rank-img { width: 84px; height: 84px; object-fit: contain; }
.wrapper .container .content.stats .ach-hero .ah-main { min-width: 0; }
.wrapper .container .content.stats .ach-hero .ah-main .ah-name { font-size: 21px; font-weight: 700; }
.wrapper .container .content.stats .ach-hero .ah-main .ah-lvl { font-size: 13px; margin-top: 2px; }
.wrapper .container .content.stats .ach-hero .ah-main .ah-bar { height: 9px; border-radius: 999px; overflow: hidden; margin-top: 14px; }
.wrapper .container .content.stats .ach-hero .ah-main .ah-bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.wrapper .container .content.stats .ach-hero .ah-main .ah-foot { display: flex; justify-content: space-between; font-size: 11px; margin-top: 7px; }
.wrapper .container .content.stats .ach-hero .ah-side { display: flex; gap: 12px; }
.wrapper .container .content.stats .ach-hero .ah-side .ah-kpi { text-align: center; min-width: 84px; padding: 12px 14px; border-radius: 10px; }
.wrapper .container .content.stats .ach-hero .ah-side .ah-kpi .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .ach-hero .ah-side .ah-kpi .l { font-size: 10px; margin-top: 2px; }
/* Die Zeitraum-Reiter sind entfallen (Abzeichen haengen nur an der Saison);
   an ihrer Stelle steht links der Weg zur Rangliste, rechts die Saisonwahl. */
.wrapper .container .content.stats .ach-filter { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 26px 0 4px; }
.wrapper .container .content.stats .ach-filter .ach-link { font-size: 13px; font-weight: 600; }
/* Breitere Karten mit Mindesthoehe: die Beschreibungen sind unterschiedlich
   lang, und ohne feste Hoehe rutscht die Metazeile bei jeder Karte woanders hin.
   margin-top:auto verankert sie am unteren Rand, damit Fortschritt und Zeitraum
   ueber alle Karten hinweg auf einer Linie stehen. */
.wrapper .container .content.stats .ach-group + .ach-group { margin-top: 26px; }
.wrapper .container .content.stats .ach-group .ach-group-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.wrapper .container .content.stats .ach-group .ach-group-head span { font-size: 11px; font-weight: 400; }
.wrapper .container .content.stats .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 14px; }
.wrapper .container .content.stats .ach-grid .ach-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 16px 16px 13px; border-radius: 12px; min-height: 125px; transition: box-shadow .15s ease; }
.wrapper .container .content.stats .ach-grid .ach-card .ac-medal { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wrapper .container .content.stats .ach-grid .ach-card .ac-name { font-size: 14px; font-weight: 600; }
.wrapper .container .content.stats .ach-grid .ach-card .ac-desc { font-size: 11px; line-height: 1.45; }
/* nowrap: bricht die Metazeile um, steht sie wieder auf unterschiedlichen Hoehen */
.wrapper .container .content.stats .ach-grid .ach-card .ac-meta { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap; gap: 6px; font-size: 10px; min-height: 18px; margin-top: auto; padding-top: 6px; }
/* Fortschritt zu einem noch offenen Erfolg - macht aus "gesperrt" ein "fast da" */
.wrapper .container .content.stats .ach-grid .ach-card .ac-meta .ac-progress { display: block; width: 62px; height: 5px; border-radius: 999px; overflow: hidden; }
.wrapper .container .content.stats .ach-grid .ach-card .ac-meta .ac-progress span { display: block; height: 100%; border-radius: 999px; }
.wrapper .container .content.stats .ach-grid .ach-card .ac-count { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }

.wrapper .container .content.stats .section .charts-row .chart-card .chart-body.large { height: 260px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-body.medium { height: 210px; }

/* Servicequalitaet: Zeitraumwahl + Karten je Kollege – nur Layout, Farben in den Theme-Dateien */
.wrapper .container .content.stats .rk-controls .perf-range { display: flex; align-items: center; gap: 10px; }
.wrapper .container .content.stats .rk-controls .perf-range .perf-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background .12s ease, color .12s ease; }
.wrapper .container .content.stats .rk-controls .perf-range .perf-range-label { font-size: 13px; font-weight: 600; min-width: 120px; text-align: center; }
.wrapper .container .content.stats .perf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; }
.wrapper .container .content.stats .perf-list .perf-empty { grid-column: 1 / -1; border-radius: 10px; padding: 26px; text-align: center; font-size: 13px; }
/* Die Karte ist ein echter Link auf die Einzelauswertung (eigene Seite): damit
   funktionieren Mittelklick, "in neuem Tab öffnen" und die Zurück-Taste. Farbe
   und Unterstreichung kommen deshalb hier zurueck auf den Kartenstil. */
.wrapper .container .content.stats .perf-list .perf-card { border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 18px; transition: box-shadow .15s ease; text-decoration: none; color: inherit; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-who .pc-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-who .pc-id { min-width: 0; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-who .pc-id .pc-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-who .pc-id .pc-sub { font-size: 11px; margin-top: 3px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-load { text-align: right; white-space: nowrap; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-load .pc-load-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .perf-list .perf-card .pc-head .pc-load .pc-load-label { font-size: 10px; margin-top: 2px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics { display: flex; flex-direction: column; gap: 13px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics .pc-metric .pc-metric-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics .pc-metric .pc-metric-head .pc-metric-label { font-size: 12px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics .pc-metric .pc-metric-head .pc-metric-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics .pc-metric .pc-metric-bar { height: 6px; border-radius: 999px; overflow: hidden; }
.wrapper .container .content.stats .perf-list .perf-card .pc-metrics .pc-metric .pc-metric-bar .pc-metric-fill { height: 100%; border-radius: 999px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.wrapper .container .content.stats .perf-list .perf-card .pc-foot .pc-tag { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/*? ----------     STATS     ---------- */

/* ----------     SERVICES     ---------- */
.wrapper .container .content.services { display: flex; margin-top: 50px; }
.wrapper .container .content.services .blocks .block-wrapper .top .title { margin-bottom: 10px; }

.wrapper .container .content.services .blocks .block-wrapper .wrapper { width: 100%; margin-top: 10px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content label { margin-bottom: 5px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content form { display: flex; flex-direction: column; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content .output { margin-top: 20px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content .hint { margin-top: 8px; }
/*? ----------     SERVICES     ---------- */

/* ----------     FORM     ---------- */
.wrapper.content.form .logo { position: absolute; top: 25px; left: 25px; width: 120px; }
/* Oben ausgerichtet statt mittig: die Anfrage-Formulare sind laenger als der
   Bildschirm, mittig zentriert waere der Seitenkopf nicht mehr sichtbar. */
.wrapper.content.form .content { display: flex; justify-content: center; align-items: flex-start; height: auto; min-height: 100%; padding: 30px 20px 50px; box-sizing: border-box; }
.wrapper.content.form .content .blocks { width: fit-content; max-width: 650px; }
.wrapper.content.form.large .content .blocks { max-width: 900px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .title i { font-size: 14px; cursor: pointer; padding: 10px 20px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .info .important { margin: 15px 0 5px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .select-display { margin-bottom: 10px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group.extended { display: flex; align-items: center; padding: 0 15px; margin: 0; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group.extended .hgi-cancel-circle { cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group.extended .hgi-cancel-circle.show { visibility: visible; opacity: 1; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline { border-radius: 8px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-search-input { width: 100%; border: none !important; padding: 0; outline: none; box-sizing: border-box; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-divider { height: 1px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-selected-placeholder { font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-chip { display: inline-flex; align-items: center; max-width: 220px; padding: 2px 8px 2px 4px; border-radius: 999px; cursor: default; box-sizing: border-box; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-chip .access-chip-avatar { width: 22px; height: 22px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; margin-right: 5px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-chip .access-chip-avatar .img { width: 100%; height: 100%; object-fit: cover; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-chip .access-chip-name { font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 150px; margin-right: 4px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header .access-selected .access-chip .access-chip-remove { font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list { max-height: 220px; overflow-y: auto; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left { display: flex; align-items: center; gap: 10px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-avatar { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap { display: flex; flex-direction: column; gap: 2px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap .access-name { font-size: 14px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap .access-email { font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right { display: flex; align-items: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right .access-checkbox { width: 14px; height: 14px; cursor: pointer; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right .access-count { font-size: 12px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .message-editor .message-input { width: 100%; border: none; resize: vertical; padding: 10px 12px; outline: none; box-sizing: border-box; border-radius: 8px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone { border-radius: 8px; padding: 18px 12px; text-align: center; position: relative; transition: background .15s ease, border-color .15s ease; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .file-input { position: absolute; height: auto; inset: 0; opacity: 0; pointer-events: none; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner { pointer-events: none; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-icon { font-size: 28px; margin-bottom: 6px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-text { font-size: 13px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-text .dropzone-link { margin-top: 4px; font-size: 12px; background: none; border: none; cursor: pointer; text-decoration: underline; pointer-events: auto; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-info { font-size: 11px; margin-top: 8px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left { display: flex; align-items: center; gap: 8px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-icon .attachment-icon-img { width: 100%; height: 100%; object-fit: contain; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta { display: flex; flex-direction: column; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-name { font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-info { font-size: 11px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-right { display: flex; align-items: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-right .attachment-remove { border: none; font-size: 16px; cursor: pointer; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .actions { display: flex; justify-content: flex-end; gap: 8px; }
/*? ----------     FORM     ---------- */

/* ----------     SERVICE/CODE PAGE     ---------- */
.wrapper.service { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.wrapper.service .service-header { display: flex; height: 70px; padding: 0 25px; }
.wrapper.service .service-header .logo { display: flex; }
.wrapper.service .service-header .logo svg { width: 85px; }
.wrapper.service .service-inner { display: flex; flex-direction: column; margin: auto; }
.wrapper.service .service-inner .service-stage { position: relative; width: 100%; margin: 20px; display: flex; justify-content: center; align-items: flex-end; }
.wrapper.service .service-inner .service-stage .service-code { position: absolute; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-weight: 700; font-size: 55vh; letter-spacing: 8px; padding: 0 32px; box-sizing: border-box; }
.wrapper.service .service-inner .service-stage .service-monster { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; }
.wrapper.service .service-inner .service-stage .service-monster img { max-height: 40vh; width: auto; object-fit: contain; }
.wrapper.service .service-inner .service-text { text-align: center; margin: 20px; }
.wrapper.service .service-inner .service-text .service-title { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.wrapper.service .service-inner .service-text .service-sub { font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.wrapper.service .service-inner .service-text .service-actions { display: flex; justify-content: center; }
.wrapper.service .service-inner .service-text .service-actions .service-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.wrapper.service .service-inner .service-text .service-actions .service-btn:hover { transform: translateY(-1px); }
.wrapper.service .service-inner .service-text .service-actions .service-btn i { margin-right: 6px; font-size: 14px; }
/*? ----------     SERVICE/CODE PAGE     ---------- */

/* ----------     SYSTEM     ---------- */
.wrapper .container .content.system { display: flex; margin-top: 50px; }
/*? ----------     SYSTEM     ---------- */

/* ----------     HILFE-CENTER     ---------- */
.hc { max-width: none; margin: 0 auto; width: 100%; padding-bottom: 60px; }
.hc.none { display: none; }
.hc .hc-empty { font-size: 14px; }
.hc .hc-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; border-radius: 12px; padding: 56px 24px; margin-top: 28px; }
.hc .hc-empty-state i { font-size: 34px; margin-bottom: 8px; }
.hc .hc-empty-state .t { font-size: 16px; font-weight: 600; }
.hc .hc-empty-state .s { font-size: 14px; max-width: 460px; line-height: 1.6; }
.hc .hc-empty-state .btn-group { margin-top: 16px; }
.hc .line { margin: 4px 0 24px; }
/* Platzhalter waehrend des Ladens nehmen keine Klicks an. */
.hc .skeleton-card { pointer-events: none; }

/* Kopfbereich mit der Sofortsuche */
.hc-hero { text-align: center; padding: 40px 20px 10px; }
.hc-hero h1 { font-size: 26px; font-weight: 600; margin: 0 0 6px; }
.hc-hero p { font-size: 14px; margin: 0 0 22px; }
.hc-searchbox { position: relative; max-width: 620px; margin: 0 auto; text-align: left; }
.hc-searchbox .search { max-width: none; }
.hc-searchbox .search .input { padding: 13px 16px; border-radius: 10px; }
.hc-hero-meta { margin-top: 14px; font-size: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hc-hero-meta .sep { opacity: .5; }

/* Vorschlagsliste der Sofortsuche. Liegt ueber dem Inhalt, deshalb absolut
   positioniert - die Kategorien darunter duerfen nicht wegspringen. */
.hc-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; border-radius: 12px; overflow: hidden; display: none; }
.hc-suggest.open { display: block; }
.hc-suggest-head { padding: 11px 16px 7px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hc-suggest-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; }
.hc-suggest-item > i { font-size: 17px; flex-shrink: 0; }
.hc-suggest-item .si-main { flex: 1; min-width: 0; }
.hc-suggest-item .si-title { font-size: 14px; font-weight: 500; }
.hc-suggest-item .si-sub { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-suggest-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top-width: 1px; border-top-style: solid; font-size: 13px; }
.hc-suggest-foot .sf-all { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hc-suggest-foot .sf-hint { font-size: 12px; }
.hc-suggest-empty { padding: 22px 16px; text-align: center; font-size: 13px; }
.hc-hl { border-radius: 3px; padding: 0 2px; }

/* Abschnittskoepfe. Der Verweis daneben folgt der .side-action aus der
   Anfragen-Übersicht: schlichter Textlink, kein Symbol. */
.hc-section-title { font-size: 16px; font-weight: 600; }
.hc-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 34px 0 14px; }
.hc-sec-link { font-size: 12px; cursor: pointer; white-space: nowrap; }
.hc-sec-link:hover { text-decoration: underline; }

/* Kategorien. Jede Karte fuehrt in die Kategorie, die drei Zeilen darunter
   direkt in den jeweiligen Artikel - das spart den Umweg ueber die Liste. */
.hc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.hc-cat-card { border-radius: 12px; padding: 20px; cursor: pointer; transition: box-shadow .15s ease; display: flex; flex-direction: column; gap: 10px; }
.hc-cat-top { display: flex; align-items: center; gap: 12px; }
.hc-cat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.hc-cat-title { font-size: 15px; font-weight: 600; }
.hc-cat-count { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hc-cat-links { display: flex; flex-direction: column; border-top-width: 1px; border-top-style: solid; padding-top: 4px; }
.hc-cat-link { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; cursor: pointer; min-width: 0; }
.hc-cat-link .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-cat-link i { font-size: 13px; flex-shrink: 0; opacity: .55; }
.hc-cat-more { font-size: 12px; padding-top: 6px; }

/* Meistgelesen und zuletzt aktualisiert nebeneinander */
.hc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 8px; }
.hc-rank-list { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.hc-rank-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; }
.hc-rank-item + .hc-rank-item { border-top-width: 1px; border-top-style: solid; }
.hc-rank-num { width: 22px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.hc-rank-item > i.lead { font-size: 17px; flex-shrink: 0; }
.hc-rank-main { flex: 1; min-width: 0; }
.hc-rank-title { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.hc-rank-meta { font-size: 12px; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.hc-rank-item .go { flex-shrink: 0; font-size: 16px; opacity: 0; transition: opacity .15s ease; }
.hc-rank-item:hover .go { opacity: 1; }
@media screen and (max-width: 900px) { .hc-cols { grid-template-columns: 1fr; } }

/* Weg zum Support. Steht am Ende jeder Ansicht, in der jemand nicht faendig
   geworden sein koennte - vorher endete das Hilfe-Center in einer Sackgasse. */
.hc-cta { display: flex; align-items: center; gap: 18px; margin-top: 40px; padding: 22px 24px; border-radius: 12px; }
.hc-cta-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.hc-cta-main { flex: 1; min-width: 0; }
.hc-cta-main .t { font-size: 15px; font-weight: 600; }
.hc-cta-main .s { font-size: 13px; margin-top: 3px; line-height: 1.5; }
.hc-cta-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media screen and (max-width: 760px) { .hc-cta { flex-direction: column; align-items: flex-start; } }

/* Ergebnisliste (Suche und Kategorie) */
.hc-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin-bottom: 18px; width: fit-content; }
.hc-breadcrumb i { font-size: 18px; }
.hc-listhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hc-listhead .title { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.hc-count { font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Waehrend des Ladens steht hier noch keine Zahl. Ein leeres div hat Hoehe 0,
   und weil .hc-listhead an der Unterkante ausgerichtet ist, rutscht dann der
   ganze Kopf samt Suchfeld nach oben und beim Eintreffen wieder zurueck. Das
   geschuetzte Leerzeichen haelt genau eine Zeile frei - ohne feste Pixelhoehe,
   die bei einer anderen Schriftgroesse wieder falsch waere. */
.hc-count:empty::before { content: "\00a0"; }
.hc-list-search { max-width: 320px; }
.hc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hc-toolbar .filter-chips { margin: 0; }
.hc-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.hc-sort select { font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; outline: none; cursor: pointer; }
.hc-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hc-card-list .hc-empty { grid-column: 1 / -1; padding: 18px 20px; }
.hc-card { display: flex; gap: 14px; padding: 16px 18px; border-radius: 10px; cursor: pointer; transition: box-shadow .15s ease; }
.hc-card > i.lead { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.hc-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-card-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hc-card-sum { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 2px; }
.hc-card-meta .mi { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.hc-card-meta .mi i { font-size: 13px; }
@media screen and (max-width: 900px) { .hc-card-list { grid-template-columns: 1fr; } }

/* Artikelansicht: Text links, Inhaltsverzeichnis rechts */
.hc-art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 34px; align-items: start; }
.hc-art-layout.no-toc { grid-template-columns: 1fr; }
.hc-art-head { margin-bottom: 22px; }
.hc-art-head .hc-art-title { font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.hc-art-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.hc-art-meta span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hc-art-actions { display: flex; gap: 8px; margin-top: 16px; }
.hc-art-action { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.hc-art-action i { font-size: 14px; }
/* Artikelansicht (Nutzer): gleiche Karten-Optik wie die Vorschau im Master-Editor.
   Das generische .card.bg ist auf .blocks .block-wrapper beschränkt und greift hier
   nicht, daher die KB-eigene Karte (.hc-art-card gibt es nur im Hilfe-Center). */
.hc-art-card { border-radius: 12px; padding: 30px; }
.hc-art-body { font-size: 15px; line-height: 1.7; }
.hc-art-body h2, .hc-art-body h3 { scroll-margin-top: 20px; }
/* Das Verzeichnis laeuft beim Scrollen mit und bleibt am oberen Rand stehen.
   Der Klebepunkt MUSS auf dem Rasterfeld sitzen, nicht auf dem Kasten darin:
   ein klebendes Element bewegt sich nur innerhalb seiner Elternbox, und die
   waere durch align-items:start genau so hoch wie der Kasten selbst - also
   ohne jeden Weg. Als Rasterfeld ist die Bezugsbox dagegen die volle Zeilen-
   hoehe, waehrend align-self:start den Kasten weiter inhaltshoch haelt.
   20px Abstand zum Rand des Scrollbereichs, der unter dem festen Kopf beginnt.
   max-height faengt Artikel mit sehr vielen Überschriften ab: sonst waere das
   Ende des Verzeichnisses unerreichbar, sobald es hoeher als das Fenster ist. */
.hc-art-side { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.hc-art-side::-webkit-scrollbar { width: 5px; }
.hc-toc { border-radius: 12px; padding: 18px; }
.hc-toc .toc-h { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.hc-toc-item { display: block; font-size: 13px; padding: 5px 0 5px 10px; border-left: 2px solid transparent; cursor: pointer; line-height: 1.4; }
.hc-toc-item.sub { padding-left: 22px; font-size: 12px; }
.hc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hc-rel-card { padding: 14px 16px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s ease; }
.hc-rel-card .rt { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.hc-rel-card .rm { font-size: 12px; }
@media screen and (max-width: 1080px) { .hc-art-layout { grid-template-columns: 1fr; } .hc-art-side { display: none; } }
@media screen and (max-width: 900px) { .hc-related { grid-template-columns: 1fr; } }

.kb-feedback { margin-top: 32px; padding: 28px; border-radius: 12px; text-align: center; }
.kb-fb-q { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.kb-fb-btns { display: flex; gap: 12px; justify-content: center; }
.kb-fb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: box-shadow .15s ease; }


.kb-fb-comment { max-width: 480px; margin: 0 auto; display: none; }
.kb-fb-comment textarea { width: 100%; border: none; border-radius: 8px; padding: 12px; resize: vertical; min-height: 80px; outline: none; box-sizing: border-box; font-size: 14px; }
.kb-fb-comment .btn { margin-top: 10px; display: inline-block; }
.kb-fb-thanks { display: none; font-size: 14px; font-weight: 400; margin: 6px 0 16px; line-height: 1.5; }
.kb-fb-stats { font-size: 12px; margin-top: 14px; }

/* Anleitungen werden ausgedruckt und neben den Rechner gelegt. Auf Papier
   gehoeren weder Portalrahmen noch Bedienelemente - nur der Artikel.
   body traegt sonst overflow:hidden, sonst endet der Druck nach Seite 1. */
@media print {
	html, body { overflow: visible; height: auto; }
	.header, .hc-breadcrumb, .hc-art-actions, .hc-art-side, .kb-feedback, .hc-cta, .hc-related, .hc-sec-head { display: none !important; }
	.wrapper.portal { height: auto; margin-top: 0; overflow: visible; }
	.wrapper.content { padding: 0; }
	.hc-art-layout { display: block; }
	.hc-art-card { padding: 0; border: none !important; }
}

/* ---------- VERWALTUNG: ZWEI SEITEN ----------
   Lesen (Team-Wissen) und Verwalten sind zwei Taetigkeiten und deshalb zwei
   Seiten. Die Unternavigation haelt sie zusammen. */
.kb-subnav { display: flex; align-items: center; gap: 26px; border-bottom-width: 1px; border-bottom-style: solid; margin: 0 0 30px; }
.kb-subnav .sn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 12px 2px; font-size: 15px; cursor: pointer; }
.kb-subnav .sn.active { font-weight: 600; cursor: default; }
.kb-subnav .sn.active::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; }
.kb-subnav .sn .count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.kb-subnav .sn-spacer { margin-left: auto; }

/* Startkarten zum Anlegen. Die Frage "fuer wen" steht vorne, nicht in einem
   Auswahlfeld im Editor - danach richtet sich alles Weitere. */
.kb-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kb-start-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 12px; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.kb-start-card .sc-top { display: flex; align-items: center; gap: 12px; }
.kb-start-card .sc-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.kb-start-card .sc-title { font-size: 15px; font-weight: 600; }
.kb-start-card .sc-info { font-size: 12.5px; line-height: 1.55; }
.kb-start-card .sc-foot { margin-top: auto; padding-top: 4px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.kb-start-card .sc-foot i { font-size: 14px; }
@media screen and (max-width: 1000px) { .kb-start { grid-template-columns: 1fr; } }

/* Kennzahlen der Redaktionslage */
.kb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; }
.kb-kpi { border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: box-shadow .15s ease; }
/* Eine Kachel mit 0 filtert nichts - sie sieht deshalb auch nicht klickbar aus. */
.kb-kpi.quiet { cursor: default; }
.kb-kpi .kpi-val { font-size: 24px; font-weight: 600; font-family: monospace; }
.kb-kpi .kpi-label { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kb-kpi .kpi-label i { font-size: 14px; }
.kb-kpi.skeleton-card, .access-list .access-card.skeleton-card { pointer-events: none; }

/* Begruendete Negativbewertungen ueber alle Artikel */
.kb-fb-list { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.kb-fb-row { display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; }
.kb-fb-row + .kb-fb-row { border-top-width: 1px; border-top-style: solid; }
.kb-fb-row > i.lead { font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.kb-fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kb-fb-quote { font-size: 13.5px; line-height: 1.55; }
.kb-fb-meta { font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kb-fb-meta .art { cursor: pointer; }
.kb-fb-meta .art:hover { text-decoration: underline; }
.kb-fb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.kb-fb-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.kb-fb-act i { font-size: 13px; }
.kb-fb-empty { padding: 26px 18px; text-align: center; font-size: 13px; }

/* Filterband: Sichtbarkeit und Status nebeneinander statt in Reitern - so
   laesst sich auch ueber beide Bestaende zugleich suchen. */
.kb-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.kb-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.kb-fgroup .fg-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kb-fsep { width: 1px; height: 22px; }

/* Hinweis auf die interne Sichtbarkeit */
.kb-aud-note { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border-radius: 10px; font-size: 12.5px; line-height: 1.55; max-width: 820px; margin: 26px auto 0; }
.kb-aud-note i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Artikel-Editor (Verwaltung): volle Breite, Formatierungs-Leiste, Medien */
/* Nur die Editor-Seite (content sub knowledgebase) untereinander statt nebeneinander -> Editor nutzt die volle Breite. */
.wrapper .container .content.sub.knowledgebase { flex-direction: column; }
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block.kb-editor-block { display: block; }
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block.kb-editor-block .wrapper { width: 100%; }
/* Kopfdaten des Editors. Titel, Kategorie und Status stehen in EINER Zeile,
   der Titel doppelt so breit wie die beiden Auswahlfelder. Die Felder darin
   fuellen ihre Spalte aus - ohne das Aufheben der globalen Maximalbreiten
   (.search 400 px, .custom-select.filter 320 px) blieben sie schmale Inseln
   in einem breiten Block und endeten an drei verschiedenen Kanten. */
.kb-form-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px 24px; align-items: start; }
.kb-form-grid > .kb-form-full { grid-column: 1 / -1; }
.kb-form-grid .search { max-width: none; }
.kb-form-grid .select .custom-select.filter { max-width: none; }
@media (max-width: 1100px) { .kb-form-grid { grid-template-columns: 1fr; } }
.kb-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-editor { width: 100%; box-sizing: border-box; border-radius: 8px; overflow: hidden; }
.kb-editor .kb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 7px 8px; border-bottom-width: 1px; border-bottom-style: solid; }
.kb-editor .kb-toolbar .kb-tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; user-select: none; }
.kb-editor .kb-toolbar .kb-tool-btn i { font-size: 17px; }


.kb-editor .kb-toolbar .kb-tool-sep { width: 1px; height: 22px; margin: 0 5px; }
.kb-editor .kb-textarea { width: 100%; box-sizing: border-box; border: none; outline: none; padding: 14px 16px; font-family: monospace; font-size: 13px; line-height: 1.6; background: transparent; resize: vertical; min-height: 400px; }
.kb-draft-note { font-size: 13px; margin: 6px 0 0; }
.kb-hint-inline { font-size: 12px; font-weight: 400; }

/* Versionsverlauf im Artikel-Editor - gleicher Aufbau wie .fleet-log,
   zusaetzlich eine Zeile fuer den Änderungsgrund und die Aktion. */
.kb-history { display: flex; flex-direction: column; }
.kb-history .log-item { display: flex; gap: 14px; padding: 14px 2px; border-bottom-width: 1px; border-bottom-style: solid; }
.kb-history .log-item:last-child { border-bottom: none; }
.kb-history .log-item .log-dot { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.kb-history .log-item .log-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-history .log-item .log-main .log-title { font-size: 14px; font-weight: 600; word-break: break-word; }
.kb-history .log-item .log-main .log-meta { font-size: 12px; }
.kb-history .log-item .log-main .log-reason { font-size: 13px; word-break: break-word; }
.kb-history .log-item .log-main .log-reason.muted { font-style: italic; }
.kb-history .log-item .log-main .log-actions { margin-top: 4px; }
/* Aktive Fassung. Keine Historienzeile, sondern der Stand aus der Artikel-
   tabelle - deshalb hinterlegt, mit Primaerfarbe im Punkt an der Stelle, wo
   sonst die Versionsnummer steht.
   Die Hinterlegung greift ueber negative Aussenabstaende nach aussen, statt
   den Inhalt per Innenabstand einzuruecken: sonst begaennen Punkt und Text
   dieser Zeile weiter rechts als bei allen anderen und die Liste haette
   keine gemeinsame Kante mehr. */
.kb-history .log-item.current { border-radius: 10px; border-bottom: none; margin: 0 -12px 6px; padding: 14px 14px; }
.kb-history .log-item.current .log-dot { font-size: 10px; }
.kb-history .kb-history-btn { display: inline-block; font-size: 13px; cursor: pointer; user-select: none; }
.kb-history .kb-history-btn:hover { text-decoration: underline; }
.kb-history .kb-history-empty { padding: 18px 2px; font-size: 13px; }

/* Bewertungsliste. Eigene Regeln statt Mitbenutzung von .kb-history - so
   halten es .fleet-log und .dl-log auch. Der Daumen sitzt in derselben
   Spaltenbreite wie dort die Versionsnummer, damit beide Listen untereinander
   dieselbe Kante haben. */
.kb-ratings { display: flex; flex-direction: column; }
.kb-ratings .log-item { display: flex; gap: 14px; padding: 14px 2px; border-bottom-width: 1px; border-bottom-style: solid; }
.kb-ratings .log-item:last-child { border-bottom: none; }
.kb-ratings .log-item .log-dot { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.kb-ratings .log-item .log-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-ratings .log-item .log-main .log-title { font-size: 14px; font-weight: 600; word-break: break-word; }
.kb-ratings .log-item .log-main .log-meta { font-size: 12px; }
.kb-ratings .log-item .log-main .log-reason { font-size: 13px; word-break: break-word; }
.kb-ratings .log-item .log-main .log-reason.muted { font-style: italic; }
.kb-ratings .kb-ratings-empty { padding: 18px 2px; font-size: 13px; }
.kb-media-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Eingebettete Videos in Artikeln (selbst gehostet, <video>) */
.md-content .md-video { display: block; margin: 16px 0; }
.md-content .md-video video { width: 100%; max-width: 760px; border-radius: 10px; display: block; }
.md-content img { max-width: 100%; border-radius: 8px; }
/*? ----------     HILFE-CENTER     ---------- */
/*? ----------     ERP     ---------- */
/* Formulare im ra-Stil (Vorlage: requests/add) - Layout hier, Farben in den Theme-Dateien */
.ra-card { width: 100%; margin: 0 0 40px; box-sizing: border-box; border-radius: 16px; padding: 24px 28px 22px; }
.ra-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ra-head h1 { font-size: 19px; font-weight: 600; margin: 0; }
.ra-head .ra-sub { font-size: 12.5px; margin: 4px 0 0; }
.ra-x { cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; border-radius: 8px; }
.ra-hr { height: 1px; margin: 18px 0 16px; }
.ra-field { margin-bottom: 22px; position: relative; }
.ra-lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.ra-lbl .opt { font-weight: 400; }
.ra-hint { font-size: 11.5px; font-weight: 400; }
.ra-inp { width: 100%; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px; outline: none; transition: border-color .15s; box-sizing: border-box; }
select.ra-inp { appearance: none; -webkit-appearance: none; cursor: pointer; }
/* Positionstext im Angebot: mehrzeilig, aber nicht frei skalierbar - die
   Positionskarte soll ihre Hoehe behalten. */
textarea.ra-inp { resize: vertical; min-height: 62px; line-height: 1.45; }
/* Artikelbeschreibung in der Detailansicht: Zeilenumbrueche aus dem Formular
   bleiben erhalten, ohne dass der Text als HTML interpretiert wird. */
.erp-article-desc { white-space: pre-wrap; line-height: 1.55; }
.ra-row2 { display: grid; grid-template-columns: 1fr 230px; gap: 16px; align-items: start; }
.ra-row3 { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 16px; align-items: start; }
.ra-row3 .span2 { grid-column: span 2; }
.ra-combo { position: relative; }
.ra-dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); border-radius: 11px; z-index: 60; max-height: 264px; overflow: auto; padding: 6px; }
.ra-drow { padding: 8px 9px; border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.ra-drow .sub { font-size: 12px; margin-top: 1px; }
.ra-drow.new { font-weight: 600; }
.ra-drow.empty { cursor: default; text-align: center; padding: 14px 10px; }
.ra-seg { display: flex; border-radius: 9px; padding: 3px; gap: 3px; }
.ra-seg.tabs { max-width: 560px; margin-bottom: 16px; }
.ra-seg .ra-seg-btn { flex: 1; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.ra-seg .ra-seg-btn.active { font-weight: 600; }
.ra-pos { border-radius: 11px; padding: 16px 16px 0; margin-bottom: 12px; }
.ra-pos-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ra-pos-title { font-size: 12px; font-weight: 600; }
.ra-pos-x { cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 7px; }
.ra-pos-grid { display: grid; grid-template-columns: 90px 1fr 175px 115px; gap: 16px; align-items: start; }
.ra-pos-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 22px; }
.ra-add-pos { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 2px; user-select: none; }
.ra-add-pos:hover { text-decoration: underline; }
.ra-new-hint { font-size: 11.5px; margin-top: 6px; }
.ra-totals { display: flex; gap: 26px; justify-content: flex-end; padding: 4px 2px 0; font-size: 13.5px; }
.ra-totals .t-key { margin-right: 6px; }
.ra-totals .t-val { font-weight: 600; }
.ra-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ra-err { font-size: 12.5px; }
.ra-btns { display: flex; gap: 10px; margin-left: auto; }
.ra-btn { border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: 9px; }
.ra-btn.ra-cta.disabled { cursor: not-allowed; pointer-events: none; }
.ra-preview { border-radius: 11px; padding: 14px 16px; max-width: 560px; }
.ra-preview .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.ra-preview .val { font-weight: 600; }
@media (max-width: 640px) { .ra-row2 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ra-row3 { grid-template-columns: 1fr; } .ra-pos-grid { grid-template-columns: 1fr 1fr; } }
/* Einkauf: Detailansicht (Positionen + Einzelstuecke) */
.pu-pos { border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.pu-pos-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; font-size: 13.5px; }
.pu-pos-line .pu-no { font-weight: 700; }
.pu-pos-line .pu-muted { font-size: 12.5px; }
.pu-serial { font-family: monospace; }
/* Einkauf: Wareneingang- und Zuweisungs-Modal */
.rc-pos-title { font-size: 12.5px; font-weight: 600; margin: 12px 0 6px 0; }
.rc-unit { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.rc-unit .input-group { margin-bottom: 0; }
.rc-all { font-size: 12.5px; cursor: pointer; user-select: none; margin-bottom: 4px; display: inline-block; }
.as-item { padding: 9px 12px; border-radius: 8px; margin-bottom: 7px; cursor: pointer; }
.as-item .as-title { font-size: 13.5px; font-weight: 600; }
.as-item .as-sub { font-size: 11.5px; margin-top: 2px; }
.as-empty { font-size: 12.5px; padding: 6px 2px; }
/* Artikel: Preisverlauf + Warengruppen-Verwaltung */
.price-chart-body { position: relative; height: 280px; }
.cat-list { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; }
.cat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; }
.cat-item .cat-main { flex: 1 1 auto; min-width: 0; }
.cat-item .cat-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item .cat-sub { font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item .cat-count { font-size: 11.5px; white-space: nowrap; }
.cat-item .erp-iconbtn { font-size: 16px; padding: 4px 6px; margin: -4px -4px -4px 0; }
.cat-form-head { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 0; }
.cat-form-title { font-size: 12.5px; font-weight: 600; }
.cat-form-cancel { font-size: 12px; cursor: pointer; display: none; }
.cat-form-cancel.show { display: inline; }
.cat-form-cancel:hover { text-decoration: underline; }
.cat-form-grid { display: grid; grid-template-columns: 1fr 170px; column-gap: 12px; }
/* Lager: Einzelstueck-Zeilen */
.wh-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-bottom: 8px; }
.wh-unit .sn { font-family: monospace; }
.wh-unit .lnk { cursor: pointer; }
.wh-unit .lnk:hover { text-decoration: underline; }
/* Angebote (sevDesk) */
.of-banner { border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
/* Verknuepfungs-Schritt: gestrichelter Zwischenblock im ra-*-Formular,
   deshalb derselbe Abstandsrhythmus wie .ra-field (22px). */
.of-map { border-radius: 10px; padding: 14px; margin: 0 0 22px 0; }
.of-map-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.of-map-hint { font-size: 12px; margin-bottom: 10px; }
.of-map-item { padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.of-map-item .sub { font-size: 11.5px; }
/* Positionen, Netto/Brutto-Umschalter und Summen teilen sich das ra-*-System
   mit dem Bestellformular (siehe .ra-pos / .ra-seg / .ra-totals). */
.of-dpos { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border-radius: 8px; margin-bottom: 7px; }
.of-dpos .name { font-size: 13.5px; font-weight: 600; }
.of-dpos .sub { font-size: 12px; margin-top: 2px; }
.of-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; margin-bottom: 7px; }
.of-inv .lnk { cursor: pointer; }
.of-inv .lnk:hover { text-decoration: underline; }
.of-ticket-hint { font-size: 12.5px; margin-bottom: 12px; }
/* ERP-Hilfsklassen (ersetzen Inline-Styles) */
.modal.wide { max-width: 720px; }
.erp-note { font-size: 12.5px; }
.skeleton.sk-180 { width: 180px; height: 14px; }
.skeleton.sk-140 { width: 140px; max-width: 60%; height: 12px; }
.skeleton.sk-60 { width: 60px; height: 14px; }
.skeleton.sk-90 { width: 90px; height: 14px; }
.list .list-item.clickable { cursor: pointer; }
/* Einkauf-Redesign: KPI-Kacheln, Bestelltabelle, Lieferfortschritt, Detailkopf */
.erp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.erp-line-actions { display: flex; align-items: center; gap: 10px; }
.erp-line-actions .btn { white-space: nowrap; flex-shrink: 0; }
.erp-line-actions .search { flex: 0 0 400px; }
.erp-kpi { border-radius: 12px; padding: 16px 18px; }
.erp-kpi .k-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.erp-kpi .k-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.erp-kpi .k-sub { font-size: 11.5px; margin-top: 5px; }
@media (max-width: 980px) { .erp-kpis { grid-template-columns: repeat(2, 1fr); } }
.block.table.erp-orders { --col-1: 1.2 1 0; --col-2: 1.3 1 0; --col-3: 0.9 1 0; --col-4: 0.5 1 0; --col-5: 1.4 1 0; --col-6: 0.9 1 0; --col-7: 0.9 1 0; }
/* JS-Renderziel in der Tabelle: Zeilen liegen in einem Wrapper statt direkt im
   Flex-Block - display:contents laesst sie wie direkte Kinder layouten */
.block.table .rows-wrap { display: contents; }
.block.table.erp-positions { --col-1: 0.35 1 0; --col-2: 2.4 1 0; --col-3: 0.5 1 0; --col-4: 1 1 0; --col-5: 0.5 1 0; --col-6: 0.9 1 0; }
.block.table.erp-units { --col-1: 0.9 1 0; --col-2: 1.7 1 0; --col-3: 1.3 1 0; --col-4: 1.7 1 0; --col-5: 1 1 0; --col-6: 0.4 1 0; }
.block.table.erp-invoices { --col-1: 1 1 0; --col-2: 0.8 1 0; --col-3: 2 1 0; --col-4: 0.4 1 0; }
/* Lieferantenrechnung: Beleg-Dropzone im Modal + Datei-Link in der Tabelle */
.erp-dz { border-width: 1.5px; border-style: dashed; border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }

.erp-dz b { font-weight: 600; }
.erp-dz-file { display: flex; align-items: center; gap: 10px; border-width: 1px; border-style: solid; border-radius: 9px; padding: 7px 10px; margin-top: 9px; }
.erp-dz-file .fn { min-width: 0; flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-dz-file .fs { flex: 0 0 auto; font-size: 11px; }
.erp-dz-file .rm { flex: 0 0 auto; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 16px; line-height: 1; }

.erp-inv-file { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; min-width: 0; max-width: 100%; }
.erp-inv-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-inv-file:hover span { text-decoration: underline; }
.block.table.erp-articles { --col-1: 2 1 0; --col-2: 1.3 1 0; --col-3: 0.6 1 0; --col-4: 0.8 1 0; --col-5: 0.9 1 0; --col-6: 0.7 1 0; --col-7: 0.35 1 0; }
/* Zweizeilige Tabellenzelle: Hauptzeile + gedämpfte Unterzeile (z. B. Artikelnr/Hersteller).
   Volles Haus-Präfix nötig, sonst gewinnt die display:flex-Regel der Standardzellen. */
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.cell-stack { display: block; align-self: center; min-width: 0; white-space: nowrap; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.cell-stack .main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.cell-stack .sub { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block.table.erp-buys { --col-1: 1 1 0; --col-2: 0.8 1 0; --col-3: 1.2 1 0; --col-4: 0.5 1 0; --col-5: 0.9 1 0; }
.block.table.erp-suppliers { --col-1: 1.7 1 0; --col-2: 1.5 1 0; --col-3: 0.7 1 0; --col-4: 0.9 1 0; --col-5: 0.9 1 0; --col-6: 0.6 1 0; --col-7: 0.35 1 0; }
.block.table.erp-sup-orders { --col-1: 1 1 0; --col-2: 0.8 1 0; --col-3: 0.5 1 0; --col-4: 0.9 1 0; --col-5: 0.8 1 0; }
.block.table.erp-stock-units { --col-1: 0.8 1 0; --col-2: 1.8 1 0; --col-3: 1.2 1 0; --col-4: 1.4 1 0; --col-5: 1.5 1 0; --col-6: 0.9 1 0; }
.block.table.erp-offers { --col-1: 1.6 1 0; --col-2: 1.3 1 0; --col-3: 1.1 1 0; --col-4: 0.8 1 0; --col-5: 0.7 1 0; --col-6: 0.9 1 0; --col-7: 0.7 1 0; }
.block.table.erp-offer-pos { --col-1: 0.3 1 0; --col-2: 2.4 1 0; --col-3: 0.5 1 0; --col-4: 0.9 1 0; --col-5: 0.5 1 0; --col-6: 0.9 1 0; }
.block.table.erp-offer-inv { --col-1: 1.2 1 0; --col-2: 0.9 1 0; --col-3: 0.9 1 0; --col-4: 1 1 0; }
.block.table.erp-inv-list { --col-1: 1.5 1 0; --col-2: 1.2 1 0; --col-3: 0.9 1 0; --col-4: 1 1 0; --col-5: 0.8 1 0; --col-6: 0.9 1 0; --col-7: 0.7 1 0; --col-8: 1.1 1 0; }
/* .limit-Zellen sind display:block (Ellipsis) und wuerden in hoeheren Zeilen
   (Badge/Aktions-Icon) oben kleben - in den ERP-Tabellen vertikal zentrieren */
.block.table.erp-orders .table-rows>div.limit,
.block.table.erp-positions .table-rows>div.limit,
.block.table.erp-units .table-rows>div.limit,
.block.table.erp-invoices .table-rows>div.limit,
.block.table.erp-articles .table-rows>div.limit,
.block.table.erp-buys .table-rows>div.limit,
.block.table.erp-suppliers .table-rows>div.limit,
.block.table.erp-sup-orders .table-rows>div.limit,
.block.table.erp-stock-units .table-rows>div.limit,
.block.table.erp-offers .table-rows>div.limit,
.block.table.erp-offer-pos .table-rows>div.limit,
.block.table.erp-offer-inv .table-rows>div.limit,
.block.table.erp-inv-list .table-rows>div.limit { align-self: center; }
.erp-progress { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 190px; }
.erp-progress .track { flex: 1; height: 6px; border-radius: 999px; overflow: hidden; }
.erp-progress .fill { height: 100%; border-radius: 999px; }
.erp-progress .fill.p0 { width: 0; } .erp-progress .fill.p25 { width: 25%; } .erp-progress .fill.p50 { width: 50%; } .erp-progress .fill.p100 { width: 100%; }
.erp-progress .pct { font-size: 11.5px; white-space: nowrap; }
.po-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 6px 0 18px; flex-wrap: wrap; }
.po-head .t .no { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.po-head .t .meta { font-size: 13px; margin-top: 6px; }
.po-head .actions { display: flex; gap: 10px; align-items: center; }
.erp-iconbtn { cursor: pointer; font-size: 18px; padding: 8px 10px; border-radius: 8px; }
.pu-pos-line .sum { margin-left: auto; font-weight: 600; }
.ticket-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.ticket-chip:hover { text-decoration: underline; }

/* ========================================================================
   AUS DEN SEITEN UEBERNOMMEN

   Diese Regeln standen als <style> im <head> der jeweiligen Seite. Sie
   liegen bewusst am Dateiende: inline gewann frueher gegen alles davor,
   und diese Rangfolge bleibt so erhalten.

   Gegliedert nach Bauteil, nicht nach Quelldatei - fuenf der zwoelf
   Seiten teilten sich dasselbe Formular.

   Farben stehen wie ueberall in light/dark/neon.css.
   ======================================================================== */

/* ========================================================================
   KENNZEICHEN IN DER NUTZER-UEBERSICHT

   Zwei Dinge sah der Nutzer bisher erst im geoeffneten Ticket: dass er selbst
   eine Freigabe erteilen muss, und dass die Anfrage gar nicht seine eigene ist,
   sondern ihm nur zugaenglich gemacht wurde. Beides steht jetzt an der Zeile.
   ======================================================================== */
.ureq-flag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ureq-flag i { font-size: 12px; line-height: 1; }
/* Offene eigene Freigabe ist eine Aufgabe, keine Information - die Zeile bekommt
   deshalb zusaetzlich eine Signalkante, wie die neue Kundenantwort im Master. */
.req-list.ureq .req-card.needs-approval { position: relative; }
.req-list.ureq .req-card.needs-approval::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; }

/* ========================================================================
   HILFE-ARTIKEL IN DIE ANTWORT (Master-Ticket)

   Auswahl im Antwortbereich neben "Datei anhaengen". Eingefuegt wird Titel
   und Direktlink auf die Nutzeransicht - der Kunde soll im Artikel landen,
   nicht auf der Startseite des Hilfe-Centers.
   ======================================================================== */
/* Selbst Flex-Container: der Knopf darin ist inline-flex und saesse in einem
   Blockelement auf der Textgrundlinie. Die Unterlaenge darunter macht den
   Wrapper hoeher als seinen Inhalt - der Knopf stuende dann nicht auf einer
   Linie mit "Datei anhaengen" daneben. */
.rq-kb { position: relative; display: flex; align-items: center; }
.rq-kb-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60; width: 360px; max-width: 70vw; border-width: 1px; border-style: solid; border-radius: 11px; padding: 8px; display: none; }
.rq-kb.open .rq-kb-pop { display: block; }
.rq-kb-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-width: 1px; border-style: solid; border-radius: 9px; }
.rq-kb-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 13px; }
.rq-kb-list { margin-top: 6px; max-height: 260px; overflow-y: auto; }
.rq-kb-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.rq-kb-item .t { font-size: 13px; font-weight: 500; }
.rq-kb-item .c { margin-top: 2px; font-size: 11.5px; }
.rq-kb-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; }

/* ========================================================================
   ANFRAGE-FORMULARE (.ra-*)

   Gemeinsames Bauteil der fuenf Anfrage-Seiten und der ERP-Seiten
   (offers, procurement, export). Es gab die Regeln doppelt: einmal
   hier, einmal als <style> in den Formularen - und beide Fassungen
   waren auseinandergelaufen. Was nur fuer die Formulare gilt, haengt
   jetzt an .wrapper.content.form; die ungebundene Basis bleibt fuer
   die ERP-Seiten unveraendert.
   ======================================================================== */
/* ===== Neue Anfrage – kompakte Karte (Farben: light/dark/neon-Variablen) ===== */
   /* Hintergrund wie auf den anderen Seiten (Standard --color-bg); die Karte ist das graue Panel. */
.wrapper.content.form .ra-card { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; border-width: 1px; border-style: solid; border-radius: 16px; padding: 24px 28px 22px; }
.wrapper.content.form .ra-head .ra-sub { font-size: 12.5px; margin: 4px 0 0; max-width: 640px; }
.wrapper.content.form .ra-x { cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; border-radius: 8px; }
.wrapper.content.form .ra-hr { height: 1px; margin: 18px 0 16px; }
/* Deutlicher Abstand zwischen den Punkten; innerhalb eines Feldes bleibt es eng (Label 6px, Chips 9px) –
   so ist klar erkennbar, was zusammengehört */
.wrapper.content.form .ra-field { margin-bottom: 26px; position: relative; }
.wrapper.content.form .ra-lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.wrapper.content.form .ra-lbl .opt { font-weight: 400; }
.wrapper.content.form .ra-hint { font-size: 11.5px; font-weight: 400; }
.wrapper.content.form .ra-inp { width: 100%; min-height: 42px; border-width: 1px; border-style: solid; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px; outline: none; transition: border-color .15s; box-sizing: border-box; }
.wrapper.content.form textarea.ra-inp { resize: vertical; min-height: 150px; line-height: 1.5; }
/* "Im Namen von": Suchfeld so hoch wie der gewählte-Nutzer-Chip (kein Höhensprung bei Auswahl) */
#userSearch { min-height: 48px; }
@media (max-width: 640px) { .ra-row2 { grid-template-columns: 1fr; } }
/* Priorität segmentiert */
.wrapper.content.form .ra-seg { display: flex; min-height: 42px; box-sizing: border-box; border-width: 1px; border-style: solid; border-radius: 9px; padding: 3px; gap: 3px; }
.wrapper.content.form .ra-seg .ra-seg-btn { flex: 1; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 9px 6px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.wrapper.content.form .ra-seg .ra-seg-btn.active { font-weight: 600; }
.ra-dot { width: 8px; height: 8px; border-radius: 50%; }
/* Ergebnis der Prioritätsmatrix (Impact x Urgency) samt Reaktionsziel */
.ra-prio-preview { border-width: 1px; border-style: solid; border-left-width: 3px; border-left-style: solid; border-radius: 9px; padding: 11px 14px; font-size: 13px; }
/* Combobox (Overlay-Dropdown) */
.wrapper.content.form .ra-dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); border-width: 1px; border-style: solid; border-radius: 11px; z-index: 20; max-height: 264px; overflow: auto; padding: 6px; display: none; }
/* Muss mitgescoped werden: die Basisregel darueber traegt .wrapper.content.form
   und damit vier Klassen. Ein ungebundenes ".ra-combo.open .ra-dd" haette nur
   drei und verloere gegen deren "display: none" - die Vorschlagsliste ginge
   dann nie auf. Betrifft beide Comboboxen (Nutzersuche und Zugriff). */
.wrapper.content.form .ra-combo.open .ra-dd { display: block; }
.ra-urow, .ra-dd .access-row { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: 9px; cursor: pointer; }
.ra-dd .access-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ra-urow.empty, .ra-dd .access-row.empty { cursor: default; justify-content: center; font-size: 13px; padding: 14px 10px; }
.ra-av, .ra-dd .access-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; overflow: hidden; }
.ra-av .img, .ra-dd .access-avatar .img { width: 100%; height: 100%; object-fit: cover; }
.ra-dd .access-namewrap { min-width: 0; }
.ra-un, .ra-dd .access-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-ue, .ra-dd .access-email { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* gewählter Nutzer als Chip (ersetzt das Suchfeld).
   Der Innenabstand stand vor der Zusammenführung bei 7px 10px (Master) und
   9px 12px (Nutzer) – Kopierdrift, kein Entwurf. Vereinheitlicht auf den
   größeren Wert; das Ergebnis steht weiter unten bei den übrigen Chip-Regeln. */
.ra-chip-x { cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 7px; }
/* Zugriff: gewählte Chips (createAccessPicker-Ausgabe) */
.ra-acc-sel { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ra-acc-sel:empty { display: none; }
.ra-acc-sel .access-selected-placeholder { display: none; }
.ra-acc-sel .access-chip { display: inline-flex; align-items: center; gap: 7px; border-width: 1px; border-style: solid; border-radius: 999px; padding: 4px 8px 4px 4px; font-size: 12.5px; }
.ra-acc-sel .access-chip-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.ra-acc-sel .access-chip-avatar .img { width: 100%; height: 100%; object-fit: cover; }
.ra-acc-sel .access-chip-name { font-size: 12.5px; }
.ra-acc-sel .access-chip-remove { cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
/* Anhänge */
.ra-dz { border-width: 1.5px; border-style: dashed; border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }
.ra-dz b { font-weight: 600; }
.ra-files { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.ra-frow { display: flex; align-items: center; gap: 10px; border-width: 1px; border-style: solid; border-radius: 9px; padding: 7px 10px; }
.ra-fic { width: 28px; height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ra-fic img { width: 24px; height: 24px; object-fit: contain; }
.ra-fmeta { min-width: 0; flex: 1; }
.ra-fn { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-fs { font-size: 11px; }
.ra-frow .ra-rm { cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 16px; line-height: 1; }
.wrapper.content.form .ra-err { font-size: 12.5px; min-height: 0; }
.ra-err.show { min-height: 16px; }
.wrapper.content.form .ra-btn.ra-cta.disabled { cursor: not-allowed; pointer-events: none; }
.ra-hidden { display: none; }
.ra-row2.even { grid-template-columns: 1fr 1fr; }
.ra-chip-target { display: flex; align-items: center; gap: 11px; border-width: 1px; border-style: solid; border-radius: 10px; padding: 9px 12px; }
.ra-uw { min-width: 0; flex: 1; }
#grpSelected .access-chip { padding: 6px 8px 6px 12px; }
.ra-notice { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.ra-notice i { flex: none; font-size: 18px; margin-top: 1px; }

/* ========================================================================
   TICKETANSICHT NUTZER (.ut-*, .rq-* mit .ureq)
   ======================================================================== */
/* Kunden-Ticketansicht: 3 Spalten (eigene Daten | Konversation | Info-Sidebar).
   Nur Layout/Struktur – Farben kommen ausschließlich aus den Theme-Variablen. */
   /* gleiche Spaltenbreiten wie im Master (432px links / 448px rechts) */
.content.request-detail.ureq .rq-cols { grid-template-columns: 432px minmax(0, 1fr) 448px; }
/* Kleinere Auflösungen: beim Nutzer NICHT die rechte Info-Spalte ausblenden (wie im Master),
   sondern die LINKE Spalte (eigene Daten). Die rechte Spalte bleibt, der Verlauf hat Vorrang. */
@media (max-width: 1600px) { .content.request-detail.ureq .rq-cols { grid-template-columns: minmax(0, 1fr) 448px; } .content.request-detail.ureq .rq-rail.l { display: none; } .content.request-detail.ureq .rq-rail.r { display: block; } }
@media (max-width: 1100px) { .content.request-detail.ureq .rq-cols { grid-template-columns: 1fr; } .content.request-detail.ureq .rq-rail.l { display: none; } .content.request-detail.ureq .rq-rail.r { display: none; } }
.content.request-detail.ureq .rq-person + .rq-person { margin-top: 13px; }
.content.request-detail.ureq .rq-person .sub { font-size: 11px; margin-top: 2px; }
.content.request-detail.ureq .rq-person .nm { font-size: 13px; font-weight: 600; }
.content.request-detail.ureq .rq-reply-error { font-size: 12px; }
/* Status-Fortschritt (kompakt, kleine Punkte) */
.content.request-detail.ureq .ut-steps { display: flex; flex-direction: column; }
.content.request-detail.ureq .ut-step { display: flex; align-items: flex-start; gap: 11px; position: relative; padding-bottom: 15px; }
.content.request-detail.ureq .ut-step:last-child { padding-bottom: 0; }
.content.request-detail.ureq .ut-step .pt { box-sizing: border-box; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border-width: 2px; border-style: solid; margin-top: 4px; z-index: 1; }
/* Verbindungslinie: mittig unter dem 8px-Punkt (left 3px) und bis zum nächsten Punkt (bottom -4px = margin-top des nächsten) */
.content.request-detail.ureq .ut-step::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: -4px; width: 2px; }
.content.request-detail.ureq .ut-step:last-child::before { display: none; }
.content.request-detail.ureq .ut-step .t { font-size: 13px; font-weight: 500; }
.content.request-detail.ureq .ut-step .d { font-size: 11px; margin-top: 1px; }
/* Aktionsmenü + Sende-Optionen je nach Status ein-/ausblenden */
.content.request-detail.ureq .rq-acts.open .arrow-toggle { transform: rotate(180deg); }
.content.request-detail.ureq[data-state="closed"] [data-opt="close"] { display: none; }
.content.request-detail.ureq:not([data-state="closed"]) [data-opt="reopen"], .content.request-detail.ureq:not([data-state="closed"]) [data-act="reopen"] { display: none; }
/* Der Trenner gehoert zu "Wieder öffnen" - seit "Schließen" in die Fußzeile
   gewandert ist, waere er bei offenen Tickets die letzte sichtbare Zeile
   im Menü und sähe aus wie ein Darstellungsfehler. */
.content.request-detail.ureq:not([data-state="closed"]) .rq-actmenu .rq-actsep { display: none; }
/* "Schließen" steht ausserhalb von .rq-send-wrap (siehe Kommentar im Markup),
   damit es bei leerem Textfeld nicht ausgegraut wird. Ohne eigenen Ausgleich
   verteilt das space-between der Fusszeile den Freiraum aber auf alle vier
   Kinder und der Knopf landet mittig. margin-left: auto schluckt den ganzen
   Freiraum und rueckt Schließen wie im Master direkt neben Absenden. */
.content.request-detail.ureq .rq-reply-foot .rq-send-alt { margin-left: auto; }
/* Zufriedenheits-Feedback (nach Abschluss) */
.content.request-detail.ureq .ut-feedback { margin: 18px auto 4px; max-width: 80%; border-radius: 12px; padding: 18px 20px; text-align: center; }
.content.request-detail.ureq .ut-fb-q { font-size: 14px; font-weight: 600; }
.content.request-detail.ureq .ut-fb-opts { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.content.request-detail.ureq .ut-fb-opt { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; border-width: 1px; border-style: solid; font-size: 13px; }
.content.request-detail.ureq .ut-fb-opt i { font-size: 17px; }
.content.request-detail.ureq .ut-fb-thanks { font-size: 13px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.content.request-detail.ureq .ut-fb-thanks i { font-size: 18px; }
/* Bestellung auslösen (nur bei geschlossenem Angebot): fest über dem Antwortfeld, nicht im Scrollbereich.
   Nur so breit wie der Inhalt, zentriert; max-width verhindert Überlaufen auf schmalen Spalten */
.content.request-detail.ureq .ut-ordercta { flex: 0 0 auto; box-sizing: border-box; width: fit-content; max-width: calc(100% - 52px); margin: 12px auto 16px; border-radius: 12px; padding: 20px 26px; text-align: center; }
.content.request-detail.ureq .ut-ordercta .t { font-size: 14px; font-weight: 600; }
.content.request-detail.ureq .ut-ordercta .s { font-size: 12.5px; margin-top: 6px; }
.content.request-detail.ureq .ut-ordercta .btn-order { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; }
.content.request-detail.ureq .ut-ordercta .btn-order.disabled { cursor: not-allowed; }
/* align-items: flex-start, damit das Symbol bei mehrzeiligem Text oben bleibt */
.content.request-detail.ureq .ut-ordercta .no-right { font-size: 12px; margin-top: 12px; display: flex; align-items: flex-start; justify-content: center; gap: 6px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.55; text-align: left; }
.content.request-detail.ureq .ut-ordercta .no-right i { flex-shrink: 0; margin-top: 2px; }
/* Freigabe fuer Zugriffs- und On-/Offboarding-Anliegen. Wie der Bestell-CTA
   fest ueber dem Antwortfeld, damit die Entscheidung nicht im Verlauf
   untergeht. Gelb solange offen, gruen/rot nach der Entscheidung. */
/* width: fit-content laesst den Kasten auf seinen Text schrumpfen, statt die
   ganze Spalte zu fuellen - rechts stand sonst eine leere Flaeche. max-width
   bleibt die Bremse: passt der Satz nicht in eine Zeile, bricht er dort um. */
.content.request-detail.ureq .ut-approval { flex: 0 0 auto; box-sizing: border-box; width: fit-content; max-width: calc(100% - 52px); margin: 12px auto; }
/* Grid statt umbrechendem Flex: bei einem umbrechenden Flex-Container ergibt
   sich die natuerliche Breite aus der breitesten EINEN Zeile - also Symbol,
   Text UND Knopfzeile nebeneinander, obwohl die Knoepfe darunter stehen. Der
   Kasten wurde dadurch breiter als sein Text, und "width: fit-content" am
   Elternteil half nicht, weil es genau diese zu grosse Breite uebernahm.
   Im Grid zaehlt je Spalte das Maximum; die Knopfzeile spannt ueber beide
   Spalten und traegt nichts zur Breite bei. */
.content.request-detail.ureq .ut-appr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 18px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.content.request-detail.ureq .ut-appr i { font-size: 19px; margin-top: 1px; }
.content.request-detail.ureq .ut-appr-btns { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; }
.content.request-detail.ureq .ut-appr-btns .btn.disabled { pointer-events: none; opacity: .6; }
/* Zugriff verwalten: ganze Trefferzeile klickbar */
#accessDrawer #drwAccessResults .drw-acc:hover { border-radius: 8px; }
/* Editierbare Karten-Überschrift (Erreichbarkeit) */
.content.request-detail.ureq .rq-card-h.rq-edit { cursor: pointer; }
.content.request-detail.ureq .rq-card-h.rq-edit i { margin-left: 6px; }

/* ========================================================================
   SUPPORTANFRAGEN MASTER (Ticketdetail)
   ======================================================================== */
/* Inline-Workpool-Zuweisung im Antwortbereich: Chips nebeneinander wie in der Eingang-Triage */
.content.request-detail .rq-assign .wp-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.content.request-detail .rq-assign .wp-pick .wp { font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border-width: 1px; border-style: solid; cursor: pointer; transition: color .14s ease, background .14s ease, border-color .14s ease; }
.content.request-detail .rq-assign .wp-pick .wp-empty { font-size: 12px; }
/* Zugriff verwalten: ganze Trefferzeile klickbar */
#actionDrawer #drwAccessResults .drw-acc:hover { border-radius: 8px; }
/* Editierbare Karten-Überschrift (Erreichbarkeit) */
.content.request-detail .rq-card-h.rq-edit { cursor: pointer; }
.content.request-detail .rq-card-h.rq-edit i { margin-left: 6px; }
/* Zugriff: Liste mit Namen (wie User-Ansicht) */
.content.request-detail .rq-access.rq-access-list { flex-direction: column; align-items: stretch; gap: 12px; }
.content.request-detail .rq-access.rq-access-list .rq-person .nm { font-size: 13px; font-weight: 600; }
.content.request-detail .rq-access.rq-access-list .rq-person .sub { font-size: 11px; margin-top: 2px; }
/* Status-Fortschritt (Stepper) – gespiegelt von der User-Ansicht */
.content.request-detail .ut-steps { display: flex; flex-direction: column; }
.content.request-detail .ut-step { display: flex; align-items: flex-start; gap: 11px; position: relative; padding-bottom: 15px; }
.content.request-detail .ut-step:last-child { padding-bottom: 0; }
.content.request-detail .ut-step .pt { box-sizing: border-box; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border-width: 2px; border-style: solid; margin-top: 4px; z-index: 1; }
.content.request-detail .ut-step::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: -4px; width: 2px; }
.content.request-detail .ut-step:last-child::before { display: none; }
.content.request-detail .ut-step .t { font-size: 13px; font-weight: 500; }
.content.request-detail .ut-step .d { font-size: 11px; margin-top: 1px; }
/* Bestell-Stufen im Master: anklickbar zum Vorwärtsbewegen */
   /* Bestell-Stufen: anklickbar. Regeln dazu stehen in main.css bzw. den
   Theme-Dateien (.ut-step.clickable, .ut-steps-hint). */
   /* Angebotsbezug (nur Bestellungen): AN-Nummer prominent + Quelle + Sprung zum Angebots-Ticket */
.content.request-detail .rq-offer-no { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.content.request-detail .rq-offer-no i { font-size: 14px; }
.content.request-detail .rq-offer-src { font-size: 11.5px; margin-top: 3px; }
.content.request-detail .rq-offer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.content.request-detail .rq-offer-link:hover { text-decoration: underline; }
/* Ohne eigene Größe erbt das Symbol die 12.5px des Textes; seine Zeilenbox ist
   dann so hoch wie die Textzeile, das Zeichen sitzt darin aber tiefer als der
   Text (abweichende Metrik des Icon-Fonts) und wirkt nach unten verrutscht.
   line-height: 1 schneidet die Box auf das Zeichen zu - erst dadurch stellt
   align-items: center beide wirklich auf eine Höhe. Alle übrigen Icons dieser
   Ansicht sind aus demselben Grund explizit bemaßt. */
.content.request-detail .rq-offer-link i { font-size: 14px; line-height: 1; flex-shrink: 0; }
/* "Weitere anzeigen" in den gruppierten Listen. Bewusst zurückhaltend und
   nicht als Schaltfläche: die Liste soll kurz wirken, der Weg zum Rest
   aber sichtbar sein. Steht im selben Container wie die Seitenzahlen der
   flachen Ansichten, deshalb dieselbe Positionierung. */
.req-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 6px auto 0; padding: 8px 16px; border-width: 1px; border-style: solid; border-radius: 9px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.req-more-note { margin: 6px auto 0; font-size: 12px; text-align: center; }
/* Wareneinkauf: zugewiesene Einzelstücke + Angebote als klickbare Karten-Zeilen
   (gleiche Optik wie die Anhänge: bg-Fläche, weiche Kontur, Hover = Primärrahmen) */
.content.request-detail [data-field="erp_units"] { display: flex; flex-direction: column; gap: 6px; }
/* Klickbar (Sprung in den ERP-Bereich) nur mit ERP-Recht (.link) */
.content.request-detail .rq-erp-item { padding: 8px 11px; border-radius: 9px; border-width: 1px; border-style: solid; }
.content.request-detail .rq-erp-item.link { cursor: pointer; }
.content.request-detail .rq-erp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.content.request-detail .rq-erp-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Status-Pill: neutral = Im Zulauf, ok (grün) = Geliefert/Angenommen,
   err (rot) = Storniert/Abgelehnt, info (blau) = Offen/Angekommen */
.content.request-detail .rq-erp-status { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.content.request-detail .rq-erp-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 11.5px; }
.content.request-detail .rq-erp-meta .sn { font-family: monospace; }
/* Begründung der KI-Triage über den internen Notizen. Bewusst NICHT in der
   Primärfarbe: die signalisiert im Notizbereich "da hat jemand etwas
   vermerkt". Der gedämpfte Rahmen und die zurückgenommene Schrift stellen
   den Eintrag erkennbar neben die Notizen von Kolleginnen und Kollegen,
   statt ihn wie eine zu verwechseln. */
   /* Abstand nach unten am Block selbst, nicht als Geschwister-Regel: der
   Hinweis steht mal vor einer Notiz, mal vor "Noch keine internen
   Notizen" - und .rq-note + .rq-note greift nur im ersten Fall. Bewusst
   größer als die 10px zwischen zwei Notizen, damit die Grenze zwischen
   Maschine und Mensch sichtbar bleibt. */
.rq-drawer .rq-note.triage { border-left-width: 3px; border-left-style: solid; opacity: .85; margin-bottom: 18px; }
.rq-drawer .rq-note.triage .nb { font-style: italic; }
.rq-drawer .rq-note.triage .nm .corr { font-weight: 600; }

/* ========================================================================
   WORKPOOLS (.wp-*)
   ======================================================================== */
/* Kennzahlenreihe der Triage */
.wp-kpis { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 20px; }
.wp-kpis .kpi { flex: 1 1 130px; padding: 14px 16px; border-radius: 10px; border-width: 1px; border-style: solid; }
.wp-kpis .kpi .val { font-size: 20px; font-weight: 600; line-height: 1.2; }
.wp-kpis .kpi .lbl { font-size: 12px; margin-top: 4px; }
.wp-hint { font-size: 13px; margin: -12px 0 18px; max-width: 780px; line-height: 1.55; }
/* Workpool-Zeilen: Kopf immer sichtbar, Felder erst beim Aufklappen */
.wp-list { display: flex; flex-direction: column; gap: 8px; }
.wp-item { border-width: 1px; border-style: solid; border-radius: 10px; overflow: hidden; }
.wp-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.wp-chev { font-size: 14px; flex: 0 0 auto; transition: transform .15s; }
.wp-item.open .wp-chev { transform: rotate(90deg); }
.wp-name { font-size: 14px; font-weight: 600; }
.wp-flag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.wp-nums { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.wp-num { font-size: 11.5px; white-space: nowrap; }
.wp-num b { display: block; font-size: 14px; font-weight: 600; }
.wp-body { display: none; padding: 4px 16px 16px; border-top-width: 1px; border-top-style: solid; }
.wp-item.open .wp-body { display: block; }
.wp-field { margin-top: 14px; }
.wp-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.wp-field label span { font-weight: 400; }
.wp-field textarea { width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; border-width: 1px; border-style: solid; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.5; outline: none; }
.wp-field textarea:disabled { opacity: .6; cursor: not-allowed; }
.wp-len { font-size: 11px; text-align: right; margin-top: 4px; }
.wp-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.wp-msg { font-size: 12.5px; }
/* Korrekturen */
.wp-corr { display: flex; flex-direction: column; gap: 8px; }
.wp-corr .row { border-width: 1px; border-style: solid; border-radius: 10px; padding: 12px 16px; }
.wp-corr .row .t { font-size: 13px; }
.wp-corr .row .m { font-size: 11.5px; margin-top: 5px; line-height: 1.6; }
.wp-corr .row .m .from { font-weight: 600; }
.wp-corr .row .m .to { font-weight: 600; }
.wp-empty { font-size: 13px; padding: 18px 2px; line-height: 1.6; max-width: 780px; }

/* ========================================================================
   ANFRAGEN-LISTE NUTZER
   ======================================================================== */
/* Infinite-Scroll-Ladeanzeige */
.req-loadmore { min-height: 28px; }
.req-loadmore.is-end { display: none; }
.req-loadmore .lm-inner { display: none; align-items: center; justify-content: center; gap: 10px; padding: 12px; font-size: 13px; }
.req-loadmore.is-loading .lm-inner { display: flex; }
.req-loadmore .spin { width: 16px; height: 16px; border-width: 2px; border-style: solid; border-radius: 50%; animation: reqspin .7s linear infinite; flex: 0 0 auto; }
@keyframes reqspin { to { transform: rotate(360deg); } }
/* Abstand unter den letzten Tickets, damit die Liste nicht am Seitenende klebt */
.req-layout.ureq .req-main-col { padding-bottom: 40px; }

/* ========================================================================
   KUNDENVERWALTUNG (Nutzer, Rechte)
   ======================================================================== */
/* Lizenz-Tags am rechten Zeilenende der Benutzerkarten, vertikal mittig (die Karte
   ist align-items:center). Die Chips nutzen die gemeinsame .lic-chips/.lic-chip-
   Klasse -> identisches Aussehen (Groesse, Padding) wie in der Detailansicht.
   Hier nur die Positionierung + Umbruchschutz. */
.access-list .access-card .ac-lics { justify-content: flex-end; align-items: center; max-width: 50%; margin-left: auto; }
.access-list .access-card .ac-lics .lic-chip { white-space: nowrap; }

/* ========================================================================
   ANFRAGETYP WAEHLEN

   Der Selektor stand inline und traf dort nur diese eine Seite. Ohne
   die Bindung an .request-typ wuerde er jeden Seitenkopf im Portal
   nach unten schieben - die Seite traegt die Klasse eigens dafuer.
   ======================================================================== */
/* Auswahl etwas tiefer setzen – mehr Abstand zwischen Seitenkopf und der Frage */
.wrapper.content.request-typ .container .top-menu { margin-top: 70px; }

/* ========================================================================
   SICHERHEIT - GEO-CACHING (Weltkarte + Adressliste)
   ========================================================================
   Die Karte liefert jsVectorMap (assets/plugins/jsvectormap, MIT). Deren
   Stylesheet bringt nur das Noetigste mit; Groesse, Rahmen und Farben kommen
   von hier bzw. aus den Themedateien.

   Die Selektoren sind bewusst so lang wie die Haus-Tabellenregeln: kuerzere
   verlieren gegen '.wrapper .container .content .blocks .block-wrapper
   .block.table.custom-cols ...' und die Ausrichtung bliebe wirkungslos.
   ---------------------------------------------------------------------- */
.wrapper .container .content .blocks .block-wrapper .block .geo-map { flex: 1 1 100%; width: 100%; height: 470px; margin-top: 6px; }
.geo-map .jvm-container { background: transparent !important; }
.geo-map .jvm-region { stroke-width: .4; cursor: pointer; }
.jvm-tooltip { border-radius: 7px; padding: 7px 11px; font-size: 12.5px; line-height: 1.45; white-space: normal; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

.wrapper .container .content .blocks .block-wrapper .block .geo-legend { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.geo-legend .steps { display: flex; align-items: center; gap: 3px; }
.geo-legend .steps i { display: block; width: 30px; height: 9px; border-radius: 2px; }

/* Kopfzeile der Liste: Titel links, Filter und Suche rechts */
.geo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.geo-toolbar .geo-title { font-size: 15px; font-weight: 600; }
.geo-toolbar .geo-title span { font-size: 12.5px; font-weight: 400; margin-left: 8px; }
.geo-toolbar .geo-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-toolbar .input-group { margin: 0; width: 240px; }
.geo-chip { display: none; align-items: center; gap: 7px; font-size: 12.5px; border-radius: 999px; padding: 6px 10px 6px 13px; white-space: nowrap; }
.geo-chip.on { display: inline-flex; }
.geo-chip button { border: 0; background: none; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.geo-switches { display: flex; gap: 8px; flex-wrap: wrap; }

/* Adressliste - fuenf Spalten, schmaler als die ERP-Tabellen (kurze Werte).
   min-width: 0 ist hier entscheidend: die Hauszelle steht auf "flex: 1 0" mit
   white-space: nowrap und kann ohne diese Angabe nicht unter ihre Textbreite
   schrumpfen. Ein langer Anbietername verschiebt dann die ganze Zeile gegenueber
   allen anderen. Gekuerzt wird im span.t, damit die Spalten stehen bleiben. */
.block.table.sec-geo { --col-1: 1.15 1 0; --col-2: 0.9 1 0; --col-3: 1.9 1 0; --col-4: 0.75 1 0; --col-5: 0.2 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-header { padding: 18px 22px 10px 22px; margin-bottom: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-rows { padding: 11px 22px; font-size: 13.5px; align-items: center; min-height: 42px; }
/* Das Aktionssymbol erbt aus dem Haus-CSS 20px und macht eine Datenzeile hoeher
   als die Hinweiszeile "Keine Adressen fuer diese Auswahl". Gleiche Schriftgroesse
   plus min-height sorgen dafuer, dass beide exakt gleich hoch sind. */
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-rows>div i { font-size: 17px; margin-right: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-header>div,
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-rows>div { min-width: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-header>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-rows>div:nth-child(4) { justify-content: flex-end; text-align: right; }
.block.table.sec-geo .table-rows>div .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.block.table.sec-geo .table-rows>div .country { margin-right: 8px; flex: 0 0 auto; }
.block.table.sec-geo .table-rows>div.mono { font-variant-numeric: tabular-nums; }
.block.table.sec-geo .table-rows>div .access-badge { margin-left: 8px; flex: 0 0 auto; }

@media (max-width: 900px) {
    .wrapper .container .content .blocks .block-wrapper .block .geo-map { height: 300px; }
    .geo-toolbar .input-group { width: 100%; }
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-header>div:nth-child(3),
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-geo .table-rows>div:nth-child(3) { display: none; }
}

/* Detailfenster einer Adresse (Klick auf eine Zeile der Adressliste).
   Zwei Spalten je Zeile - wer und wann zuletzt. Mehr braucht die Zuordnung
   nicht; ob eine Anmeldung geklappt hat, beantworten die Protokolle. */
.geo-detail .gd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.geo-detail .gd-place { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.geo-detail .gd-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-detail .gd-note { font-size: 12.5px; margin-top: 4px; }
.geo-detail .gd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin-top: 16px; }
.geo-detail .gd-meta .k { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.geo-detail .gd-meta .v { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-detail .gd-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; margin: 26px 0 2px; }
.geo-detail .gd-title span { font-size: 11.5px; font-weight: 400; }
.geo-detail .gd-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid transparent; }
.geo-detail .gd-row:last-child { border-bottom: 0; }
.geo-detail .gd-row .who { flex: 1 1 auto; min-width: 0; }
.geo-detail .gd-row .who .n { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-detail .gd-row .who .s { font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-detail .gd-row .last { flex: 0 0 auto; font-size: 12px; white-space: nowrap; text-align: right; }
.geo-detail .gd-empty { font-size: 13px; padding: 4px 0 2px; line-height: 1.5; }

/* Flaggen auf dieser Seite kleiner als im Rest des Portals - in einer dichten
   Liste traegt die Farbe, nicht die Groesse. */
.block.table.sec-geo .table-rows>div .country,
.geo-detail .gd-place .country { width: 16px; height: 11px; }

/* ------------------------------------------------------------------------
   SICHERHEIT - SPERRLISTE
   ------------------------------------------------------------------------
   Gleicher Aufbau wie Geo-Caching (Karte oben, Tabelle darunter), nur in Rot:
   hier ist jeder Eintrag eine Sperre, und die Farbe soll das sagen.
   ---------------------------------------------------------------------- */
.block.table.sec-blk { --col-1: 1.5 1 0; --col-2: 0.7 1 0; --col-3: 1.5 1 0; --col-4: 0.7 1 0; --col-5: 0.7 1 0; --col-6: 0.2 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header { padding: 18px 22px 10px 22px; margin-bottom: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows { padding: 11px 22px; font-size: 13.5px; align-items: center; min-height: 42px; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header>div,
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div { min-width: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header>div:nth-child(5),
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div:nth-child(5) { justify-content: flex-end; text-align: right; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div i { font-size: 17px; margin-right: 0; }
.block.table.sec-blk .table-rows>div .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.block.table.sec-blk .table-rows>div .country { width: 16px; height: 11px; margin-right: 8px; flex: 0 0 auto; }
.block.table.sec-blk .table-rows>div.mono { font-variant-numeric: tabular-nums; }
.block.table.sec-blk .table-rows>div .access-badge { margin-left: 8px; flex: 0 0 auto; }
.block.table.sec-blk .table-rows.inactive { opacity: .55; }

@media (max-width: 900px) {
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header>div:nth-child(3),
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div:nth-child(3),
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-header>div:nth-child(5),
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-blk .table-rows>div:nth-child(5) { display: none; }
}

/* ------------------------------------------------------------------------
   SICHERHEIT - ANMELDEVERLAUF (Protokollseite)
   ------------------------------------------------------------------------
   Tabelle wie bei Geo-Caching und Sperrliste, dazu Tagesueberschriften: man
   ueberfliegt Tage, nicht Zeilen. Weil das Datum in der Ueberschrift steht,
   zeigt die Zeile nur die Uhrzeit.
   ---------------------------------------------------------------------- */
/* Punkt, Uhrzeit und Aktion bekommen feste Breiten - sie tragen immer denselben
   Inhalt. Nur Benutzer und Herkunft teilen sich den Rest, denn nur dort wird es
   unterschiedlich lang. */
.block.table.sec-log { --col-1: 0 0 22px; --col-2: 1.3 1 0; --col-3: 1.7 1 0; --col-4: 0 0 116px; --col-5: 0 0 34px; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-header { padding: 18px 22px 10px 22px; margin-bottom: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-rows { padding: 11px 22px; font-size: 13.5px; align-items: center; min-height: 42px; cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-header>div,
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-rows>div { min-width: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-header>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-rows>div:nth-child(4) { justify-content: flex-end; text-align: right; }
.wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-rows>div i { font-size: 17px; margin-right: 0; }
.block.table.sec-log .table-rows>div .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.block.table.sec-log .table-rows>div .country { width: 16px; height: 11px; margin-right: 8px; flex: 0 0 auto; }
.block.table.sec-log .table-rows>div.mono { font-variant-numeric: tabular-nums; }
.block.table.sec-log .log-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

@media (max-width: 900px) {
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-header>div:nth-child(3),
    .wrapper .container .content .blocks .block-wrapper .block.table.sec-log .table-rows>div:nth-child(3) { display: none; }
}