/* Erzeugt aus app.html mit scripts/erzeuge-hejdoc-standard-css.js — nicht von Hand aendern, sondern das Werkzeug erneut laufen lassen. */
:root {
      --bg: #f4f7f8;
      --surface: #ffffff;
      --surface-soft: #f7faf9;
      --surface-strong: #fcfcfb;
      --line: rgba(28, 39, 48, 0.08);
      --line-strong: rgba(28, 39, 48, 0.12);
      --text: #1c2730;
      --heading: #0f1820;
      --muted: #667681;
      --primary: #2f6f71;
      --primary-dark: #214c50;
      --primary-soft: #dceceb;
      --primary-contrast: #eff7f7;
      --success: #5c7f71;
      --warning: #9a7b44;
      --danger: #925555;
      
      --danger-text: #8e4e4e;
      
      --warning-text: #6f5930;
      
      --primary-tone: rgba(51, 92, 97, 0.1);
      --success-tone: rgba(92, 127, 113, 0.16);
      --warning-tone: rgba(154, 123, 68, 0.14);
      --danger-tone: rgba(146, 85, 85, 0.14);
      --neutral-tone: rgba(102, 118, 129, 0.12);
      --shadow: 0 24px 60px rgba(15, 23, 32, 0.08);
      --shadow-soft: 0 14px 34px rgba(15, 23, 32, 0.06);
      --shadow-strong: 0 24px 60px rgba(15, 23, 32, 0.14);
      --shadow-control: 0 12px 28px rgba(15, 23, 32, 0.06);
      
      --radius-pill: 999px;
      --radius-card: 28px;
      --radius: 24px;
      --radius-lg: 20px;
      --radius-md: 18px;
      --radius-sm: 16px;
      --radius-ms: 14px;
      --radius-xs: 12px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-page: clamp(16px, 2.2vw, 32px);
      --space-card: clamp(18px, 2.1vw, 26px);
      --panel-gap: clamp(18px, 2vw, 28px);
      --sidebar-w: 292px;
      --content-max: 1640px;
      --tap: 48px;
      
      --control-h: 48px;
      --control-h-md: 40px;
      --control-h-sm: 36px;
      
      --safe-oben: env(safe-area-inset-top, 0px);
      --safe-unten: env(safe-area-inset-bottom, 0px);
      --safe-links: env(safe-area-inset-left, 0px);
      --safe-rechts: env(safe-area-inset-right, 0px);
    }

* { box-sizing: border-box; }

button { font-family: inherit; }

html {
      min-height: 100%;
      overflow-x: hidden;
      background: radial-gradient(circle at top, #fbfcfb 0%, #f3f5f2 42%, #eeefea 100%);
    }

body {
      margin: 0;
      min-height: 100dvh;
      
      font-family: Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: var(--text);
      background: radial-gradient(circle at top, #fbfcfb 0%, #f3f5f2 42%, #eeefea 100%);
      overflow-x: hidden;
      line-height: 1.5;
    }

.sidebar {
      min-height: 100%;
      background: linear-gradient(180deg, #1f3439 0%, #18292d 100%);
      color: rgba(255,255,255,0.92);
      padding: 20px 16px 18px;
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      gap: 14px;
      min-width: 0;
      overflow: visible;
      align-self: stretch;
      border-right: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
    }

.brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

.brand-mark {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

.brand-mark img {
      display: block;
      height: 60px;
      width: auto;
      max-width: 240px;
      object-fit: contain;
      filter: drop-shadow(0 14px 24px rgba(8, 14, 18, 0.22));
    }

.brand-wordmark {
      display: none;
    }

.sidebar-nav {
      display: grid;
      gap: 10px;
      align-content: start;
      min-height: 0;
      overflow: visible;
      padding-right: 0;
    }

.nav-button {
      border: 1px solid transparent;
      background: rgba(255,255,255,0.02);
      color: rgba(255,255,255,0.84);
      text-align: left;
      padding: 12px 14px;
      min-height: var(--tap);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font: inherit;
      font-weight: 600;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

.nav-button.active {
      background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow: 0 8px 18px rgba(8, 14, 18, 0.14);
      color: rgba(255,255,255,0.96);
    }

.nav-button:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.94); }

.nav-button:focus-visible,
    .mobile-drawer-link:focus-visible,
    .chat-thread-item:focus-visible,
    .button:focus-visible,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    input[type="file"]:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(51, 92, 97, 0.16);
    }

.nav-button .nav-icon,
    .mobile-drawer-link .nav-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 34px;
      color: rgba(255,255,255,0.92);
      border-radius: 11px;
      background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 100%);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

.nav-button .nav-icon svg,
    .mobile-drawer-link .nav-icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.8;
    }

.nav-button.active .nav-icon,
    .mobile-drawer-link.active .nav-icon {
      background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 100%);
      border-color: rgba(255,255,255,0.18);
    }

.nav-button { position: relative; }

.table-shell {
      display: grid;
      
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      margin-top: 16px;
    }

.table-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

.table-toolbar-main,
    .table-toolbar-actions,
    .table-pagination {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

.table-search {
      min-width: min(100%, 320px);
      max-width: 360px;
    }

.data-table-wrap {
      border: 1px solid rgba(28,39,48,0.08);
      border-radius: 22px;
      overflow: auto;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,249,0.98));
      box-shadow: 0 10px 24px rgba(15,23,32,0.03);
    }

.data-table {
      width: 100%;
      min-width: 720px;
      border-collapse: separate;
      border-spacing: 0;
    }

.data-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      text-align: left;
      padding: 14px 16px;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      background: rgba(247,250,249,0.96);
      border-bottom: 1px solid rgba(28,39,48,0.08);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

.data-table td {
      padding: 16px;
      border-bottom: 1px solid rgba(28,39,48,0.06);
      vertical-align: top;
    }

.data-table tr:hover td {
      background: rgba(248,250,249,0.76);
    }

.data-table tr:last-child td {
      border-bottom: 0;
    }

.data-table td.numeric,
    .data-table th.numeric {
      text-align: right;
      white-space: nowrap;
    }

.table-empty {
      padding: 18px;
      border: 1px dashed rgba(51,92,97,0.12);
      border-radius: var(--radius-md);
      background: rgba(251,252,252,0.9);
    }

@media (max-width: 420px) {
.chat-thread-copy strong,
      .chat-thread-copy .muted,
      .chat-attachment-file-copy strong,
      .chat-attachment-file-copy .muted,
      .chat-direct-person-copy strong,
      .chat-direct-person-copy span,
      .chat-thread-time,
      .data-table td.numeric,
      .data-table th.numeric {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
}

.chat-scope-switch {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      margin-bottom: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-ms);
      background: var(--surface);
    }

.chat-scope-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      min-height: var(--control-h-md);
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }

.chat-scope-tab:hover { background: var(--surface-soft); }

.chat-scope-tab.is-active { background: var(--primary-dark); color: #fff; }

.chat-scope-tab .nav-icon { display: inline-flex; align-items: center; }

.chat-scope-tab.is-active .chat-scope-badge { background: rgba(255,255,255,.24); }

@media (max-width: 640px) {
.chat-scope-switch { display: flex; width: 100%; }
.chat-scope-tab { flex: 1 1 0; justify-content: center; }
}

.topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 18px 22px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247,250,249,0.97) 100%);
      border: 1px solid rgba(28, 39, 48, 0.08);
      box-shadow: 0 16px 34px rgba(15, 23, 32, 0.05);
      position: sticky;
      top: 18px;
      z-index: 30;
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

.topbar h1,
    .topbar h2,
    .topbar p,
    .topbar .helper {
      margin: 0;
    }

.topbar h1,
    .topbar h2,
    h1.section-title,
    h2.section-title,
    h3.section-title {
      letter-spacing: -0.03em;
      color: var(--heading);
    }

.button {
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      padding: 12px 18px;
      min-height: var(--control-h);
      background: linear-gradient(135deg, var(--primary) 0%, #397d80 48%, var(--primary-dark) 100%);
      background-size: 180% 180%;
      color: white;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      letter-spacing: -0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 14px 30px rgba(47, 111, 113, 0.18);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.28s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

.button:hover { box-shadow: 0 18px 36px rgba(47, 111, 113, 0.22); background-position: 100% 50%; }

.list-item .button:hover { transform: none; }

.button:active { transform: translateY(0) scale(0.988); }

.button:disabled,
    .button[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.82;
      transform: none;
      box-shadow: 0 8px 18px rgba(15, 23, 32, 0.04);
      border-color: rgba(51, 92, 97, 0.12);
      filter: saturate(0.86);
    }

.button.secondary {
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,249,249,0.98) 100%);
      color: var(--text);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-control);
    }

.button.ghost {
      background: rgba(220, 236, 235, 0.5);
      color: var(--primary-dark);
      border-color: rgba(47, 111, 113, 0.12);
      box-shadow: none;
    }

.button.danger {
      background: white;
      color: var(--danger);
      border: 1px solid rgba(146, 85, 85, 0.2);
      box-shadow: 0 10px 24px rgba(15, 23, 32, 0.04);
    }

.button.secondary:hover,
    .button.ghost:hover,
    .button.danger:hover {
      border-color: rgba(51, 92, 97, 0.16);
      box-shadow: 0 14px 26px rgba(15, 23, 32, 0.07);
    }

input:disabled,
    select:disabled,
    textarea:disabled,
    input[readonly],
    textarea[readonly] {
      color: rgba(23, 48, 56, 0.74);
      background: linear-gradient(180deg, rgba(246, 248, 247, 0.98) 0%, rgba(240, 244, 243, 0.96) 100%);
      border-color: rgba(51, 92, 97, 0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }

.card {
      background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,249,0.97) 100%);
      border: 1px solid rgba(28, 39, 48, 0.08);
      border-radius: var(--radius-card);
      box-shadow: 0 20px 46px rgba(15, 23, 32, 0.055);
      padding: var(--space-card);
      min-width: 0;
      position: relative;
      overflow: hidden;
    }

.card::after {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.24), rgba(255,255,255,0.92));
      pointer-events: none;
    }

.panel { display: none; }

.panel.active { display: block; min-width: 0; }

.list { display: grid; gap: var(--space-3); margin-top: 18px; }

.list-item {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--surface-soft) 0%, var(--surface-strong) 100%);
      border-radius: var(--radius-lg);
      padding: 18px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      min-width: 0;
      box-shadow: var(--shadow-soft);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

.list-item:hover {
      border-color: var(--line-strong);
      box-shadow: 0 18px 36px rgba(15, 23, 32, 0.08);
    }

.list-item > div { min-width: 0; }

.list-item > * { min-width: 0; }

.list-item strong,
    .list-item span,
    .list-item a,
    .helper,
    .muted { overflow-wrap: anywhere; }

.list-item strong,
    .soft-card strong,
    .workspace-card strong,
    .dashboard-card strong {
      letter-spacing: -0.02em;
    }

.nav-group-label {
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin: 8px 0 2px;
    }

.nav-group-label:first-child {
      margin-top: 2px;
      padding-top: 0;
      border-top: 0;
    }

.key-value-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

.soft-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(244,247,246,0.92) 100%);
      box-shadow: 0 10px 24px rgba(15, 23, 32, 0.03);
      min-width: 0;
    }

.form-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea {
      width: 100%;
      min-width: 0;
      min-height: 52px;
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,250,250,0.98) 100%);
      color: var(--heading);
      font: inherit;
      font-size: 16px;
      line-height: 1.45;
      letter-spacing: 0;
      color-scheme: light;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 8px 20px rgba(15, 23, 32, 0.03);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])::placeholder,
    textarea::placeholder {
      color: #748791;
    }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
    select:focus,
    textarea:focus,
    input[type="file"]:focus {
      border-color: rgba(47, 111, 113, 0.36);
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 0 0 4px rgba(47, 111, 113, 0.1), 0 12px 24px rgba(15, 23, 32, 0.05);
    }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):user-invalid,
    select:user-invalid,
    textarea:user-invalid,
    input[type="file"]:user-invalid,
    .field-stack.has-error > :is(input, select, textarea, .input-with-avatar, .checkbox-list) {
      border-color: rgba(176, 98, 98, 0.42);
      background: rgba(255, 248, 247, 0.96);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 0 0 4px rgba(176, 98, 98, 0.08);
    }

.edit-modal .beleg-fenster { display: block; }

.beleg-status, .badge.beleg-status, .status-pill.beleg-status { white-space: nowrap; }

select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 50px;
      background-image:
        linear-gradient(45deg, transparent 50%, #60747d 50%),
        linear-gradient(135deg, #60747d 50%, transparent 50%);
      background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);
      background-size: 7px 7px, 7px 7px;
      background-repeat: no-repeat;
    }

textarea {
      min-height: 128px;
      resize: vertical;
      padding-top: 15px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

input[type="checkbox"],
    input[type="radio"] {
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      margin: 0;
      accent-color: var(--primary-dark);
      box-shadow: none;
      flex: 0 0 auto;
    }

.section-title { margin: 0 0 8px; }

.helper { font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; }

.inline-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.field-stack {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

.field-stack.has-error label {
      color: var(--danger-text);
    }

.field-stack.has-error .field-error {
      display: block;
    }

.field-stack label {
      font-size: 0.83rem;
      font-weight: 700;
      color: var(--heading);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.field-stack > :is(input, select, textarea),
    .form-grid > :is(input, select, textarea),
    .form-grid > .field-stack,
    .inline-actions,
    .shift-actions {
      min-width: 0;
    }

@media (max-width: 640px) {
body.fab-oben-rechts .main > .topbar { padding-right: 72px; }
body.fab-oben-links .main > .topbar { padding-left: 72px; }
}

.status-pill,
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-pill);
      font-size: 0.83rem;
      font-weight: 700;
      line-height: 1.2;
      white-space: normal;
      max-width: 100%;
      
      overflow-wrap: break-word;
      word-break: normal;
      letter-spacing: -0.01em;
      background: var(--primary-tone);
      color: var(--primary-dark);
    }

.status-pill.success, .badge.success { background: var(--success-tone); color: var(--success); }

.status-pill.warning, .badge.warning { background: var(--warning-tone); color: var(--warning-text); }

.status-pill.danger, .badge.danger { background: var(--danger-tone); color: var(--danger); }

.status-pill.neutral, .badge.neutral { background: var(--neutral-tone); color: var(--muted); }

.status-pill::before, .badge::before { content: none; }

.modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10, 18, 24, 0.46);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 110;
    }

.modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

.confirm-modal {
      position: fixed;
      left: 50%;
      bottom: 18px;
      width: min(560px, calc(100% - 24px));
      transform: translate(-50%, 18px) scale(0.98);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.24s ease, opacity 0.24s ease;
      z-index: 120;
      background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,249,0.98) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      box-shadow: 0 28px 90px rgba(15, 23, 32, 0.22);
      padding: var(--space-6);
      display: grid;
      gap: var(--space-4);
    }

.confirm-modal.open {
      transform: translate(-50%, 0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

.edit-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10, 18, 24, 0.46);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 130;
    }

.edit-modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

.edit-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      width: min(920px, calc(100% - 24px));
      max-height: min(90vh, 980px);
      transform: translate(-50%, -46%) scale(0.98);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.24s ease, opacity 0.24s ease;
      z-index: 140;
      background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,249,0.98) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      box-shadow: 0 28px 90px rgba(15, 23, 32, 0.22);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
    }

.edit-modal.open {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

.edit-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,0.9);
    }

.edit-modal-body {
      overflow: auto;
      padding: 22px;
    }

.edit-modal-close {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.95);
      color: var(--heading);
      font-size: 1.35rem;
      cursor: pointer;
    }

.edit-modal-shell > .section-title:first-child,
    .edit-modal-shell > h2:first-child,
    .edit-modal-shell > h3:first-child {
      margin-top: 0;
    }

.confirm-modal-header,
    .confirm-modal-title-row,
    .confirm-modal-actions {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

.confirm-modal-header,
    .confirm-modal-actions { justify-content: space-between; }

.confirm-modal-actions { justify-content: flex-end; flex-wrap: wrap; }

.confirm-modal-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      background: rgba(47, 111, 113, 0.12);
      color: var(--primary-dark);
      flex: 0 0 auto;
    }

.confirm-modal-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }

.confirm-modal.warning .confirm-modal-icon { background: rgba(154, 123, 68, 0.14); color: var(--warning); }

.confirm-modal.danger .confirm-modal-icon { background: rgba(146, 85, 85, 0.14); color: var(--danger); }

.confirm-modal-close {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-xs);
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 1.2rem;
    }

@media (max-width: 720px) {
.data-table:has(td[data-label]) { min-width: 0; }
.data-table:has(td[data-label]) thead { display: none; }
.data-table:has(td[data-label]) tr { display: block; padding: 10px 2px; }
.data-table:has(td[data-label]) tr + tr { border-top: 1px solid var(--line); }
.data-table:has(td[data-label]) td {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        width: auto;
        min-width: 0;
        border: 0;
        padding: 5px 10px;
      }
.data-table:has(td[data-label]) td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding-top: 2px;
      }
.data-table:has(td[data-label]) td.numeric { text-align: left; }
}

.edit-modal.tagessicht-weit { width: min(1240px, calc(100% - 24px)); }

body.aufkb-offen { overflow: hidden; }

body.aufkb-offen #mobile-nav-fab, body.aufkb-offen .hejdoc-language-floating { display: none !important; }

.list-item.ics-pruefen {
      background: rgba(154, 123, 68, 0.07);
      border-left: 3px solid var(--warning);
    }

body.planner-focus-locked {
      overflow: hidden;
    }

@media (max-width: 1280px) {
.sidebar { display: none; }
}

@media (max-width: 1100px) {
.grid-4, .grid-3, .grid-2, .time-row, .time-row-3, .cards, .form-grid, .key-value-grid, .time-insight-grid, .time-spotlight-row, .time-meta-grid, .time-detail-grid, .workspace-layout, .shifts-layout, .team-shell, .shift-actions, .dashboard-main-grid, .shift-bottom-grid, .employee-card-facts { grid-template-columns: 1fr; }
.topbar {
        position: static;
      }
.nav-group-label,
      .sidebar-note {
        display: none;
      }
.edit-modal {
        width: calc(100% - 16px);
        max-height: 94vh;
      }
.edit-modal-body {
        padding: 16px;
      }
}

@media (max-width: 640px) {
.topbar,
      .topbar-actions,
      .inline-actions {
        align-items: stretch;
      }
.topbar {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: rgba(252, 252, 250, 0.96);
        box-shadow: 0 10px 28px rgba(15, 23, 32, 0.06);
      }
.topbar h1,
      .topbar h2 {
        font-size: 1.12rem;
        line-height: 1.15;
      }
.helper {
        font-size: 0.84rem;
      }
.topbar .topbar-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
      }
.topbar .topbar-actions .button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
      }
.topbar .topbar-actions .mitteilungen { flex: 0 0 auto; }
.topbar .topbar-actions .hilfe-knopf { flex: 0 0 auto; }
.topbar .topbar-actions .context-switch:not([hidden]) { flex: 1 1 100%; }
.topbar .topbar-actions:has(.context-switch:not([hidden])) { flex-wrap: wrap; }
.topbar .hejdoc-language-mount { margin-top: 6px; }
.topbar #topbar-subtitle { display: none; }
.topbar .hejdoc-language-control { min-height: var(--control-h); padding: 1px 6px 1px 12px; }
.topbar .hejdoc-language-control label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.metric-label,
      .metric-value,
      .info-pair,
      .soft-card,
      .card h2,
      .card h3,
      .card p,
      .list-item strong,
      .list-item span {
        overflow-wrap: anywhere;
        word-break: break-word;
      }
.button,
      .inline-actions .button,
      .inline-actions a.button {
        width: 100%;
      }
.confirm-modal {
        width: calc(100% - 16px);
        padding: 18px;
        bottom: 8px;
      }
.confirm-modal-actions .button {
        flex: 1 1 100%;
      }
.card,
      .workspace-card,
      .workspace-editor,
      .dashboard-card,
      .time-hero,
      .time-clock-panel,
      .time-section-card {
        padding: 16px;
        border-radius: var(--radius-lg);
      }
.list-item {
        padding: 12px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
      }
.list-item > div,
      .list-item > * {
        width: 100%;
      }
.table-toolbar,
      .table-toolbar-main,
      .table-toolbar-actions,
      .table-pagination {
        width: 100%;
        align-items: stretch;
      }
.table-toolbar-actions .button,
      .table-toolbar-actions a.button,
      .table-pagination .button,
      .table-pagination a.button {
        width: 100%;
      }
.table-search {
        min-width: 0;
        max-width: none;
      }
.data-table-wrap {
        border-radius: var(--radius-md);
      }
.data-table {
        min-width: 640px;
      }
.list-item .inline-actions {
        width: 100%;
      }
.inline-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
      }
.list,
      .stacked-list {
        gap: 10px;
        margin-top: 12px;
      }
.quick-actions-grid,
      .cards,
      .key-value-grid,
      .time-insight-grid,
      .time-spotlight-row,
      .time-meta-grid,
      .time-detail-grid,
      .time-capture-modes,
      .employee-card-facts,
      .employee-card-grid,
      .employee-permissions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
.summary-strip .soft-card,
    .quick-actions-grid .soft-card,
    .stacked-list .soft-card,
    .soft-card {
      padding: 12px;
      border-radius: var(--radius-sm);
    }
.sidebar {
        padding: 10px;
        gap: 10px;
      }
.brand {
        font-size: 1rem;
      }
.nav-button {
        min-height: 40px;
        padding: 10px 12px;
        border-radius: var(--radius-ms);
        font-size: 0.92rem;
      }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
      select,
      textarea,
      input[type="file"] {
        min-height: 46px;
        padding: 12px 13px;
        border-radius: var(--radius-ms);
      }
textarea {
        min-height: 104px;
      }
.form-grid {
        gap: 10px;
      }
}

@media (max-width: 420px) {
.topbar {
        padding: 10px;
      }
.nav-button {
        padding: 11px 14px;
        border-radius: var(--radius-ms);
      }
.card,
      .time-hero,
      .time-clock-panel,
      .time-section-card,
      .soft-card,
      .list-item {
        border-radius: var(--radius-sm);
      }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
      select,
      textarea,
      input[type="file"] {
        padding: 11px 12px;
      }
.quick-actions-grid,
      .cards,
      .key-value-grid,
      .time-insight-grid,
      .time-spotlight-row,
      .time-meta-grid,
      .time-detail-grid,
      .time-capture-modes,
      .employee-card-facts,
      .employee-card-grid,
      .employee-permissions-grid {
        grid-template-columns: 1fr;
      }
.sidebar {
        display: none;
      }
.topbar > div:first-child { padding-right: 56px; }
}

@media (max-width: 420px) {
.topbar .topbar-actions { flex-wrap: wrap; }
.topbar .topbar-actions .button { flex: 1 1 calc(50% - 4px); }
}

.ladehinweis {
      color: var(--muted);
      font-size: 0.92rem;
      animation: ladehinweis-puls 1.6s ease-in-out infinite;
    }

@keyframes ladehinweis-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
.ladehinweis { animation: none; }
}

.card.kompakt { padding: 16px; }

.badge.farbe-eigen { color: #fff; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.8rem; }

.u-w-100,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]).u-w-100,
    select.u-w-100,
    textarea.u-w-100 { width: 100px; }

.field-stack label.checkbox-row {
      font-size: inherit;
      font-weight: 500;
      color: var(--text);
      letter-spacing: normal;
      text-transform: none;
    }

@media (max-width: 1024px) {
:root {
        --control-h-md: 44px;
        --control-h-sm: 44px;
      }
.button,
      .behandler-chip,
      .chat-scope-tab,
      .fb-reiter-knopf,
      .mitteilungen-knopf,
      .hilfe-knopf,
      .checkbox-row,
      .chat-member-option,
      .toggle-password,
      .kalender-tag-kopf,
      .kalender-tag-plus,
      .nav-button,
      .topbar .hejdoc-language-control {
        min-height: 44px;
      }
input[type="checkbox"],
      input[type="radio"] {
        width: 24px;
        height: 24px;
      }
}

html { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1023px) {
body.fab-oben-rechts .app-layout .main > .topbar { padding-right: 72px; }
body.fab-oben-links .app-layout .main > .topbar { padding-left: 72px; }
}

@media (hover: none) and (pointer: coarse) {
.button:active,
      .behandler-chip:active,
      .nav-button:active,
      .mobile-drawer-link:active,
      a.quick-action-tile:active,
      [data-dashboard-panel]:active {
        transform: scale(0.97);
        transition-duration: 0.08s;
      }
}

@media (prefers-reduced-motion: reduce) {
.button:active,
      .behandler-chip:active,
      .nav-button:active,
      .mobile-drawer-link:active,
      a.quick-action-tile:active,
      [data-dashboard-panel]:active { transform: none; }
}

body .app-layout { grid-template-columns: minmax(0, 1fr); }

body .app-layout > .sidebar { display: none; }

body:not(.fenster-offen) #mobile-nav-fab { display: inline-flex; align-items: center; justify-content: center; }

body.fab-oben-rechts .app-layout .main > .topbar { padding-right: 72px; }

body.fab-oben-links .app-layout .main > .topbar { padding-left: 72px; }

@media (min-width: 1024px) {
body:not(.fenster-offen) #mobile-nav-fab { top: 46px !important; right: 46px !important; left: auto !important; bottom: auto !important; }
body .app-layout .main > .topbar { padding-right: 76px; }
}