:root {
  color-scheme: light;
  --navy: #082d59;
  --blue: #075bbd;
  --blue-dark: #0e4bab;
  --blue2: #1674dd;
  --yellow: #ffd500;
  --ink: #10192b;
  --muted: #64748b;
  --line: #e3e8f0;
  --surface: #ffffff;
  --background: #f5f7fb;
  --danger: #c0293c;
  --success: #157a52;
  --warning: #8a5b00;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 10px;
  --shadow-xs: 0 1px 2px rgba(16, 25, 43, .05);
  --shadow-sm: 0 2px 8px rgba(16, 25, 43, .06);
  --shadow-md: 0 10px 28px rgba(16, 25, 43, .09);
  --shadow-lg: 0 24px 60px rgba(16, 25, 43, .14);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(900px 460px at 88% -8%, rgba(20,99,209,.09), transparent 60%),
    radial-gradient(760px 420px at -6% 4%, rgba(255,217,0,.10), transparent 55%),
    var(--background);
}
a { color: var(--blue); }
button, input, select, textarea { font: inherit; }

.test-banner {
  position: relative;
  z-index: 10;
  padding: 9px 16px;
  background: var(--yellow);
  color: #342c00;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 12px clamp(20px, 5vw, 72px);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar { position: relative; z-index: 21; }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.topbar nav a, .link-button { color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: color .12s ease; }
.topbar nav a:hover, .link-button:hover { color: var(--blue); }
.topbar form { margin: 0; }
.link-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { display: flex; align-items: center; gap: 5px; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary:hover { color: var(--blue); }
.nav-dropdown > summary::after { content: "▾"; font-size: 11px; }
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 22;
}
.nav-dropdown-panel a, .nav-dropdown-panel .link-button {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}
.nav-dropdown-panel a:hover, .nav-dropdown-panel .link-button:hover { background: #f2f6fc; }
.nav-toggle-btn { display: none; }
.wordmark { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 800; }
.wordmark strong, .wordmark small { display: block; }
.wordmark small { display: block; color: var(--blue); font-size: 10px; letter-spacing: .12em; }
.brand-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--radius-sm); object-fit: contain; background: #fff; box-shadow: var(--shadow-xs); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: 24px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(8,46,95,.1);
}

.auth-shell, .setup-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: calc(100vh - 34px);
  padding: 38px 18px;
}
.auth-card, .setup-card, .panel, .account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.auth-card { min-width: 0; width: min(100%, 480px); padding: clamp(28px, 5vw, 46px); }
.setup-card { min-width: 0; width: min(100%, 900px); padding: clamp(26px, 5vw, 54px); }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.brand strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin-top: 0; font-weight: 800; letter-spacing: -.02em; }
h1 { margin-bottom: 12px; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: 22px; }
.lede { max-width: 740px; margin: 0 0 26px; color: var(--muted); font-size: 16px; line-height: 1.6; }

form { display: grid; gap: 18px; }
fieldset { display: grid; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
legend { padding: 0 8px; color: var(--navy); font-weight: 800; }
label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }
label small { color: var(--muted); font-weight: 500; line-height: 1.45; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 110px; resize: vertical; }
select { appearance: auto; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3.5px rgba(20,99,209,.15); }
input[readonly] { color: var(--muted); background: #f6f8fb; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue2)); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.16); }
.button-primary:hover { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.16); transform: translateY(-1px); }
.button-secondary { color: var(--navy); background: #fff; border-color: var(--line); }
.button-secondary:hover { border-color: #b9c9da; box-shadow: var(--shadow-xs); }
.button-danger { color: var(--danger); background: #fdf7f8; border-color: #efc6cb; }
.button-danger:hover { border-color: var(--danger); box-shadow: var(--shadow-xs); }
.table-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.security-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-help { margin: 18px 0 0; padding: 12px 14px; color: var(--muted); font-size: 13px; line-height: 1.5; background: #f4f7fb; border-radius: var(--radius-sm); }
.login-help strong { color: var(--ink); }
.password-reset-form { display: grid; gap: 10px; margin-top: 10px; min-width: 240px; }
.password-reset-details > summary { list-style: none; cursor: pointer; }
.password-reset-details > summary::-webkit-details-marker { display: none; }
.back-link { display: inline-block; margin-top: 22px; font-weight: 700; }

.alert { margin: 0 0 20px; padding: 14px 16px; border: 1px solid; border-radius: var(--radius-md); line-height: 1.5; }
.alert p { margin: 8px 0; }
.alert-error { color: var(--danger); background: #fdf2f3; border-color: #f0bcc3; }
.alert-success { color: var(--success); background: #eefaf4; border-color: #b9e3ce; }
.alert-warning { color: var(--warning); background: #fdf8e8; border-color: #efd88e; }

.content-shell { width: min(100% - 36px, 1220px); margin: 0 auto; padding: 56px 0 84px; }
.content-shell.narrow { width: min(100% - 36px, 740px); }
.hero { padding: 14px 0 36px; }
.hero.compact { padding-bottom: 22px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.app-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  min-height: 100px;
  padding: 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-card:hover { transform: translateY(-1px); border-color: #c7d6ea; box-shadow: var(--shadow-md); }
.app-card strong, .app-card small { display: block; }
.app-card strong { font-weight: 750; }
.app-card small { margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.app-icon { width: 54px; height: 54px; border-radius: var(--radius-md); object-fit: cover; background: #fff; }
.app-icon-fallback { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--navy), var(--blue)); font-size: 22px; font-weight: 800; }
.arrow { color: var(--blue); font-size: 22px; }
.account-card { display: grid; gap: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.account-card-row { display: grid; gap: 5px; }
.account-card-row + .account-card-row { padding-top: 13px; border-top: 1px solid var(--line); }
.account-card span { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.account-card strong { display: block; font-size: 14.5px; font-weight: 700; }
.account-card small { color: var(--muted); overflow-wrap: anywhere; font-size: 12.5px; }
.status-pill { display: inline-flex; width: fit-content; margin-top: 12px; padding: 5px 10px; color: var(--success); background: #e9f8f1; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status-pill.muted { color: var(--muted); background: #eef1f6; }
.status-pill.warning { color: var(--warning); background: #fdf3cd; }
.status-pill.danger { color: var(--danger); background: #fdf2f3; }
.role-pill { margin-top: 1px; color: var(--navy); background: #eef2f7; }
.empty-state { padding: 26px; color: var(--muted); background: #fff; border: 1px dashed #c3cee0; border-radius: var(--radius-lg); }

.panel { padding: clamp(22px, 4vw, 38px); }
.secret-box { margin: 22px 0; padding: 18px; background: #eef5fd; border: 1px solid #c9dcf1; border-radius: var(--radius-md); }
.secret-box span, .secret-box strong { display: block; }
.secret-box span { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.secret-box strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(16px, 3vw, 22px); overflow-wrap: anywhere; }
details:not(.nav-dropdown) { margin: 0 0 22px; color: var(--muted); }
.uri-code, .secret-output { display: block; margin-top: 12px; padding: 12px; background: #f3f5f9; border-radius: var(--radius-sm); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.audit-json { white-space: pre-wrap; }
.recovery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.recovery-list code { display: block; padding: 12px; background: #f3f5f9; border-radius: var(--radius-sm); text-align: center; user-select: all; }
.filter-panel { padding: 18px clamp(22px, 4vw, 38px); }
.conditions-matrix-form { display: flex; flex-direction: column; gap: 14px; }
.conditions-matrix-actions { display: flex; justify-content: flex-end; }
/* Allgemeines Muster für breite Tabellen, die lieber horizontal scrollen als
   Zellen umzubrechen oder (schlimmer) stillschweigend abzuschneiden – zuerst
   für die Buchungsmatrix gebaut, jetzt auch für die Benutzerverwaltung
   genutzt (Unternehmen/Markt-Spalten bei mehreren Zuweisungen). */
.table-panel.scroll-table-panel {
  /* Höhere Spezifität nötig, sonst gewinnt .table-panel{overflow:hidden}
     weiter unten im Stylesheet und die Tabelle lässt sich nicht mehr nach
     rechts scrollen – die letzte Spalte (z. B. Vermietung) war dadurch
     unerreichbar abgeschnitten, ganz ohne Scrollbalken oder Hinweis. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
    linear-gradient(to right, rgba(16,25,43,.12), rgba(16,25,43,0)),
    linear-gradient(to left, rgba(16,25,43,.12), rgba(16,25,43,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.conditions-matrix { width: auto; min-width: 100%; }
.conditions-matrix th, .conditions-matrix td { padding: 8px 5px; white-space: nowrap; }
.conditions-matrix th { letter-spacing: .03em; white-space: normal; vertical-align: bottom; }
.conditions-matrix td.condition-row-label { white-space: normal; max-width: 200px; }
.conditions-matrix th:first-child, .conditions-matrix td.condition-row-label { padding-left: 12px; }
.conditions-matrix th:first-child, .conditions-matrix td.condition-row-label { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.conditions-matrix th:first-child { z-index: 2; background: #f8fafc; }
.condition-row-label { font-weight: 700; min-width: 150px; }
.condition-row-market .condition-row-label { padding-left: 22px; font-weight: 500; color: var(--muted); }
.condition-row-label .status-pill { margin-left: 6px; }
.condition-cell { position: relative; min-width: 72px; }
.cell-price-input { width: 64px; min-height: 40px; padding: 6px 6px; font-size: 13px; }
.cell-per-user-hint { display: block; margin-top: 3px; color: var(--blue); font-size: 10px; font-weight: 700; white-space: nowrap; }
.condition-cell.is-booked .cell-price-input { border-color: var(--blue); background: #f2f6fc; font-weight: 700; }
.condition-cell.is-inherited .cell-price-input { border-color: var(--success); background: #f3fbf7; }
.cell-per-user-hint.inherited { color: var(--success); }
.condition-cell-na { color: var(--muted); text-align: center; }
.cell-advanced { position: absolute; top: 2px; right: 2px; }
.cell-advanced > summary { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; color: var(--muted); cursor: pointer; list-style: none; font-size: 13px; }
.cell-advanced > summary::-webkit-details-marker { display: none; }
.cell-advanced > summary:hover { background: #eef2f7; color: var(--ink); }
.cell-advanced-panel { position: absolute; top: calc(100% + 4px); left: 0; display: flex; flex-direction: column; gap: 8px; width: 160px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 3; white-space: normal; }
.cell-advanced-panel label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); }
.cell-advanced-panel input, .cell-advanced-panel select { padding: 6px 8px; font-size: 13px; }
.table-panel { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f8fafc; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
td small { display: block; margin-top: 5px; color: var(--muted); }
td form { display: block; }
.table-app { display: flex; align-items: center; gap: 12px; }
.table-app-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; }
.admin-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.security-principle { display: flex; gap: 14px; margin-bottom: 14px; padding: 11px 18px; box-shadow: none; font-size: 13px; }
.security-principle span { color: var(--muted); }
.compact-button { min-height: 38px; padding: 7px 13px; }
.admin-form { gap: 24px; }
.admin-form fieldset { background: #fff; box-shadow: var(--shadow-sm); }
.admin-form h3 { margin: 6px 0 0; color: var(--navy); font-size: 14px; font-weight: 750; }
.filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 16px; }
.filter-form label { flex: 1 1 180px; min-width: 0; }
.filter-form .button { flex: 0 0 auto; }
.scope-lines { display: flex; flex-direction: column; gap: 10px; }
/* Mehrere Unternehmen/Märkte/Rollen sollen je eine EIGENE Zeile bleiben
   (siehe flex-direction:column oben), aber jede einzelne Zeile selbst nicht
   zusätzlich umbrechen – sonst wird aus "eine Zeile je Zuweisung" schnell ein
   unübersichtlicher Fließtext-Block. Lange Zeilen dürfen umbrechen – eine
   Liste, die man zum Bearbeiten seitlich scrollen muss, ist keine Lösung. */
.scope-lines span { white-space: normal; overflow-wrap: break-word; }
.pill-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pill-stack .status-pill { margin-top: 0; white-space: nowrap; }
@media (min-width: 1001px) {
  .users-table th, .users-table td { padding: 14px 14px; }
  .users-table td.c-action, .users-table th:last-child { white-space: nowrap; width: 1%; }
}
/* Tablet / halbes Fenster (701–1000 px): die sechsspaltige Tabelle passt nicht –
   jede Person wird eine Karte mit Raster, der Knopf bleibt ohne Scrollen erreichbar. */
@media (min-width: 701px) and (max-width: 1000px) {
  .table-panel:has(table.users-table) { overflow-x: visible; background: var(--surface); }
  table.users-table, table.users-table tbody, table.users-table td { display: block; width: 100%; }
  table.users-table thead { display: none; }
  table.users-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  table.users-table tr:last-child { border-bottom: 0; }
  table.users-table td { padding: 0; border: 0; width: auto; min-width: 0; }
  table.users-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  table.users-table td.c-name { order: -3; grid-column: span 2; }
  table.users-table td.c-role { order: -2; }
  table.users-table td.c-action { order: 9; grid-column: 1 / -1; }
  table.users-table td.c-action .button { width: 100%; justify-content: center; }
}
@media (max-width: 700px) {
  .pill-stack { flex-direction: row; flex-wrap: wrap; }
}
.section-explainer { padding: 13px 15px; color: var(--muted); background: #f4f7fb; border-radius: var(--radius-md); line-height: 1.5; font-size: 13.5px; }
.optional { color: var(--muted); font-size: 11px; font-weight: 600; }
.check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.check-card, .app-access-toggle, .permission-row { display: flex; align-items: center; gap: 12px; }
.check-card { padding: 13px; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .12s ease; }
.check-card:has(input:checked) { border-color: #aecbf0; background: #f2f7fd; }
.check-card input, .app-access-toggle input, .permission-row input { width: 18px; min-height: 18px; flex: 0 0 18px; accent-color: var(--blue); }
.check-card span, .check-card strong, .check-card small, .app-access-toggle span, .app-access-toggle strong, .app-access-toggle small, .permission-row span, .permission-row strong, .permission-row small { display: block; }
.check-card small, .app-access-toggle small, .permission-row small { margin-top: 3px; color: var(--muted); font-weight: 500; }
.danger-check { border-color: #efc6cb; background: #fdf7f8; }
.meta-line { margin: 0; color: var(--muted); font-size: 12px; }
/* Karten fließen in zwei Spalten ohne Leerflächen unter kürzeren Nachbarn */
.app-permissions-grid { column-count: 2; column-gap: 14px; }
.app-permissions-grid > .app-permission-card { break-inside: avoid; margin: 0 0 14px; }
.app-permission-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.app-access-toggle { padding: 15px; background: #f4f7fb; border-bottom: 1px solid var(--line); }
.app-booking-hint { display: block; padding: 7px 15px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--line); }
.app-booking-hint.booked { color: var(--success); background: #f3fbf7; }
.app-booking-hint.unbooked { color: var(--warning); background: #fffaf0; }
.app-booking-hint a { color: inherit; text-decoration: underline; }
/* .is-locked: App ist für keine Firma/keinen Markt gebucht (serverseitig fest,
   render_unbooked_app_card() rendert gar keine Eingabefelder). .is-not-booked:
   App ist zwar irgendwo gebucht, aber nicht für die gerade ausgewählte(n)
   Unternehmens-/Marktrolle(n) – admin-permissions.js schaltet das Attribut
   live um, sobald sich die Rollen-Auswahl ändert. */
.app-permission-card.is-locked,
.app-permission-card.is-not-booked { background: #fafbfc; opacity: .6; }
.app-permission-card.is-not-booked .permission-list,
.app-permission-card.is-not-booked .market-rights { pointer-events: none; }
.permission-app-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; }
.permission-list { display: grid; }
.provisioning-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.provision-option { padding: 0 15px 15px; border-top: 1px solid var(--line); }
.provision-option .check-card { margin-top: 15px; }
.market-rights { border-top: 1px solid var(--line); }
.market-rights > summary { padding: 11px 15px; color: var(--blue); cursor: pointer; font-weight: 750; font-size: 13.5px; }
.market-rights > summary:hover { color: var(--blue-dark); }
.market-right-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 15px 15px; }
.company-record-body { padding: 4px 15px 15px; }
.company-record-body .company-condition-summary { margin: 10px 0 0; }
.company-record-section > summary strong { color: var(--ink); }
.market-right-card { display: grid; gap: 6px; padding: 11px; border: 1px solid #e6ecf3; border-radius: var(--radius-sm); background: #fbfcfe; }
.market-right-card strong, .market-right-card small { display: block; }
.market-right-card small { color: var(--muted); }
.is-covered { opacity: .58; }
.is-covered select { background: #eef2f7; cursor: not-allowed; }
.market-right-card.is-uncovered { opacity: .7; background: #fffaf0; }
.market-right-card .app-booking-hint { display: block; margin: 4px 0 8px; padding: 0; border-bottom: 0; background: transparent; }
/* ⚠-Hinweis an kritischen Rechten, Vorbild EDEKAs eigenes IDM-UI (siehe
   permission_risk_badge() in app/views.php) – zeigt seit "nur noch
   kritische" nur noch eine Farbe, die .risk-critical-Klasse bleibt am
   Element, falls später doch wieder eine zweite Stufe sichtbar werden soll.
   cursor:help weil der Tooltip (title-Attribut) die eigentliche Erklärung
   liefert. */
.risk-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 1px 5px; color: var(--danger); background: #fdf2f3; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.6; cursor: help; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; }
.master-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.master-column { display: grid; gap: 24px; }
.master-column .panel { box-shadow: var(--shadow-sm); }
.master-list { display: grid; gap: 12px; }
.master-list h2 { margin-bottom: 2px; }
.master-record { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) 120px; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.master-record.market-record { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 110px; }
.master-departments { margin-top: 24px; }
.master-record.department-record { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 110px; }
.compact-master-record { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) 110px auto; align-items: end; padding: 10px 12px; gap: 8px; }
.compact-master-record .master-record-action { grid-column: auto; justify-content: flex-end; }
.compact-master-record label { gap: 3px; font-size: 11.5px; }
.compact-master-record input, .compact-master-record select { min-height: 34px; padding: 5px 9px; }
.master-departments .master-list { gap: 6px; }
.company-price-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -6px 0 4px; padding: 0 4px; }
.price-hint { display: block; margin: 0 0 12px; padding: 0 4px; color: var(--muted); }
.price-hint:not(.muted) { color: var(--navy); font-weight: 600; }
.market-rights summary .status-pill { margin: 0 0 0 8px; vertical-align: middle; }
.market-department-card { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.8fr) auto; gap: 14px; align-items: start; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.market-department-card strong, .market-department-card small { display: block; }
.market-department-card small { margin-top: 4px; color: var(--muted); }
.market-department-card .master-market-checks { grid-column: auto; margin: 0; }
.master-market-checks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; grid-column: 1 / -1; margin: 12px 0; }
.compact-check { min-height: 44px; padding: 9px 12px; }
.master-record input, .master-record select { min-height: 42px; padding: 8px 11px; }
.master-record-action { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .topbar { align-items: center; gap: 12px; flex-wrap: nowrap; }
  .nav-toggle-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
  }
  .nav-toggle-btn span, .nav-toggle-btn span::before, .nav-toggle-btn span::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
  }
  .nav-toggle-btn span { position: relative; }
  .nav-toggle-btn span::before { position: absolute; top: -6px; }
  .nav-toggle-btn span::after { position: absolute; top: 6px; }
  .topbar nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    z-index: 20;
  }
  .nav-toggle-input:checked ~ nav { display: flex; }
  .nav-backdrop { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(16,25,43,.35); }
  .topbar:has(.nav-toggle-input:checked) ~ .nav-backdrop { display: block; }
  .topbar nav a, .topbar nav .link-button {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: left;
  }
  .topbar nav a:hover, .topbar nav .link-button:hover { background: #f2f6fc; }
  .wordmark span:last-child { display: none; }
  .nav-dropdown > summary { min-height: 46px; padding: 0 12px; }
  .nav-dropdown-panel { position: static; margin: 0 0 4px 12px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .grid, .app-grid, .dashboard-grid, .check-grid, .market-right-grid, .master-layout, .master-record, .master-record.market-record, .master-record.department-record, .compact-master-record, .market-department-card, .master-market-checks { grid-template-columns: 1fr; }
  .compact-master-record .master-record-action, .market-department-card .master-market-checks { grid-column: 1; }
  .admin-hero, .security-principle { align-items: stretch; flex-direction: column; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form label { flex: 0 0 auto; }
  .content-shell { padding-top: 34px; }
  .recovery-list { grid-template-columns: 1fr; }
  .table-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
      linear-gradient(to right, rgba(16,25,43,.12), rgba(16,25,43,0)),
      linear-gradient(to left, rgba(16,25,43,.12), rgba(16,25,43,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--surface);
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  table { min-width: 680px; }
  .button, .button-secondary, .button-primary { min-height: 44px; }
}
/* Nicht gebuchte Apps nur so hoch wie ihr Inhalt – sonst große leere Fläche neben der höheren Nachbarkarte */
.app-permission-card.is-locked { align-self: start; }
/* Rechte-Zeilen: mehrzeilige Namen nicht eng an die Trennlinie, erste Zeile nicht direkt unter dem Hinweisband */
/* Handy: Listen mit Aktion als Karten – Name zuerst, Knopf immer sichtbar, ohne seitliches Scrollen */
@media (max-width: 700px) {
  .table-panel:has(table.mobile-cards), .table-panel.scroll-table-panel:has(table.mobile-cards) { overflow-x: visible; background: var(--surface); }
  table.mobile-cards td.c-action .table-actions, table.mobile-cards td.c-action .table-actions form, table.mobile-cards td.c-action .table-actions .button { width: 100%; }
  table.mobile-cards .audit-json { white-space: pre-wrap; word-break: break-word; }
  table.mobile-cards { min-width: 0; }
  table.mobile-cards, table.mobile-cards tbody, table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards tr { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
  table.mobile-cards tr:last-child { border-bottom: 0; }
  table.mobile-cards td { padding: 0; border: 0; }
  table.mobile-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  table.mobile-cards td.c-name { order: -3; }
  table.mobile-cards td.c-role { order: -2; }
  table.mobile-cards td.c-action { order: 9; }
  table.mobile-cards td.c-action .button { width: 100%; justify-content: center; text-align: center; }
  table.mobile-cards .scope-lines span { white-space: normal; }
  table.mobile-cards .password-reset-details summary { display: flex; justify-content: center; }
}

/* Tablet / halbes Fenster (701–1000 px): die Buchungsmatrix hat elf Spalten und passt
   nicht – je Firma/Markt eine Karte mit Raster statt Seitwärts-Scrollen. */
@media (min-width: 701px) and (max-width: 1000px) {
  .table-panel:has(table.conditions-matrix.auto-cards) { overflow-x: visible; background: var(--surface); }
  table.conditions-matrix.auto-cards { min-width: 0 !important; width: 100%; }
  table.conditions-matrix.auto-cards, table.conditions-matrix.auto-cards tbody, table.conditions-matrix.auto-cards td { display: block; width: 100%; }
  table.conditions-matrix.auto-cards thead { display: none; }
  table.conditions-matrix.auto-cards tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 14px; border-bottom: 1px solid var(--line); }
  table.conditions-matrix.auto-cards tr:last-child { border-bottom: 0; }
  table.conditions-matrix.auto-cards td { padding: 0; border: 0; width: auto; min-width: 0; white-space: normal; }
  table.conditions-matrix.auto-cards td.condition-row-label { grid-column: 1 / -1; position: static; box-shadow: none; max-width: none; background: none; padding: 0; }
  table.conditions-matrix.auto-cards td[data-label] { position: relative; }
  table.conditions-matrix.auto-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  table.conditions-matrix.auto-cards .cell-price-input { width: 100%; }
  table.conditions-matrix.auto-cards .cell-advanced { top: 18px; right: 4px; }
  table.conditions-matrix.auto-cards .condition-cell-na { text-align: left; }
}

/* ===== Handy: kompakter Kopfbereich, Tabellen als Karten (kein seitliches Scrollen) ===== */
@media (max-width: 700px) {
  .test-banner { padding: 4px 8px; font-size: 9.5px; letter-spacing: .05em; line-height: 1.2; }
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .wordmark img { width: 38px; height: 38px; }
  .content-shell { padding-top: 12px; padding-bottom: 70px; }
  .hero, .hero.compact { padding: 0 0 10px; }
  .hero h1 { font-size: 26px; margin: 2px 0 4px; letter-spacing: -.02em; }
  .hero .lede { display: none; }
  .eyebrow { margin: 0 0 2px; font-size: 10.5px; }
  .security-principle { display: none; }
  .panel { padding: 14px; }
  .filter-form { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .filter-form label { flex: 1 1 140px; font-size: 12px; gap: 3px; }
  .filter-form select, .filter-form input { min-height: 40px; padding: 8px 10px; }
  .filter-form .button { flex: 1 1 100%; min-height: 40px; }

  .table-panel:has(table.auto-cards), .table-panel.scroll-table-panel:has(table.auto-cards) { overflow-x: visible; background: var(--surface); }
  table.auto-cards { min-width: 0 !important; width: 100%; }
  table.auto-cards, table.auto-cards tbody, table.auto-cards tr, table.auto-cards td { display: block; width: 100%; }
  table.auto-cards thead { display: none; }
  table.auto-cards tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  table.auto-cards tr:last-child { border-bottom: 0; }
  table.auto-cards td { padding: 0; border: 0; }
  table.auto-cards td.c-first { font-size: 16px; font-weight: 800; }
  table.auto-cards td[data-label] { display: flow-root; font-size: 14px; }
  table.auto-cards td[data-label]::before { content: attr(data-label); float: left; width: 37%; margin: 2px 3% 0 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
  /* Buchungsmatrix: je Unternehmen/Markt eine Karte, die Preisfelder zweispaltig */
  table.conditions-matrix.auto-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  table.conditions-matrix.auto-cards td.condition-row-label { grid-column: 1 / -1; position: static; box-shadow: none; min-width: 0; padding: 0; background: none; }
  table.conditions-matrix.auto-cards td[data-label] { display: block; position: relative; white-space: normal; min-width: 0; }
  table.conditions-matrix.auto-cards td[data-label]::before { float: none; display: block; width: auto; margin: 0 0 3px; }
  table.conditions-matrix.auto-cards .cell-price-input { width: 100%; }
  table.conditions-matrix.auto-cards .cell-advanced { top: 18px; right: 4px; }
  table.conditions-matrix.auto-cards .condition-cell-na { text-align: left; }
}
@media(max-width:700px){
table.auto-cards td form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
table.auto-cards td form input:not([type=checkbox]):not([type=hidden]),table.auto-cards td form select{flex:1 1 130px;min-width:0;width:auto}
table.auto-cards td form .button,table.auto-cards td form button{flex:0 0 auto}
}

/* Rechte-Matrix: je Kategorie eine Gruppe, je Recht eine gleich gebaute Zeile
   (Häkchen – Name – ⚠-Spalte). Gilt identisch für globale Rechte und für die
   Markt-Abweichungen. */
.permission-list { display: block; }
.right-group { padding: 10px 15px 8px; border-top: 1px solid #edf1f6; }
.permission-list > .right-group:first-child { border-top: 0; }
.right-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; margin-bottom: 2px; }
.right-group-title { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.group-all { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.group-all input, .right-row input { width: 16px; min-height: 16px; height: 16px; padding: 0; margin: 0; flex: 0 0 16px; accent-color: var(--blue); }
.right-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 26px; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 4px 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.right-name { min-width: 0; overflow-wrap: anywhere; }
.right-flag { display: flex; justify-content: center; }
.right-row .risk-badge { margin: 0; }
.market-right-card { gap: 0; padding: 4px 0 0; }
.market-right-title { padding: 8px 15px 2px; }
.market-right-title small { margin-top: 2px; }
.market-right-card > .right-group:first-of-type { border-top: 0; padding-top: 6px; }
.market-right-card[hidden], .market-rights[hidden] { display: none; }
@media (max-width: 760px) {
  .app-permissions-grid { column-count: 1; }
}
/* gesperrt: Recht, das der Verwaltende selbst nicht hat */
.right-row.is-foreign { opacity: .55; cursor: not-allowed; }
.right-row.is-foreign input { cursor: not-allowed; }

.brand > div, .brand > span { min-width: 0; overflow-wrap: anywhere; }
.app-card-soon { opacity: .6; cursor: default; }
.app-card-soon:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm, none); }

/* Passkeys / Face ID */
.passkey-block { margin-top: 18px; text-align: center; }
.passkey-or { margin: 0 0 12px; color: var(--muted, #667); font-size: .9rem; }
.passkey-status { min-height: 1.3em; margin: 10px 0 0; font-size: .92rem; color: var(--muted, #556); }
.passkey-status.is-error { color: #b42318; }
.passkey-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.passkey-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #d8dee8); border-radius: 12px; }
.passkey-item small { display: block; color: var(--muted, #667); margin-top: 2px; }
.passkey-add { display: grid; gap: 12px; margin-top: 18px; }
.alert-info { background: #eef4ff; border: 1px solid #c9dafb; color: #1f3d7a; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: .95rem; }
.checkbox-row input { width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 2px 0 0; flex: 0 0 20px; accent-color: var(--blue); }
.checkbox-row span { flex: 1; min-width: 0; line-height: 1.4; }
.checkbox-row small { display: block; color: var(--muted, #667); }

/* QR-Code der 2FA-Einrichtung */
.qr-box { display: flex; justify-content: center; margin: 18px 0; }
.qr-box svg { width: 240px; height: 240px; max-width: 100%; border: 1px solid var(--line, #d8dee8); border-radius: 12px; padding: 6px; background: #fff; }

.panel-heading{padding:18px 20px 6px}
.panel-heading h2{margin:0;font-size:1.15rem}
.panel-heading small{display:block;margin-top:2px;color:var(--muted,#64748b)}
.panel-body{padding:4px 20px 12px}