:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #161922;
  background: #f4f4f2;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --yellow: #ffed00;
  --yellow-dark: #d5c500;
  --ink: #161922;
  --muted: #6e7481;
  --surface: #ffffff;
  --surface-2: #f3f4f5;
  --border: #dfe2e7;
  --danger: #b42318;
  --success: #16803a;
  --shadow: 0 18px 50px rgba(26, 31, 44, .12);
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
body { overflow: hidden; background: #f4f4f2; }
.hidden { display: none !important; }

.shell { height: 100%; display: grid; grid-template-columns: 248px 1fr; background: #f4f4f2; }
.sidebar { background: #171a22; color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px; }
.brand img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; }
.brand strong { display: block; font-size: 18px; letter-spacing: .01em; }
.brand small { color: #aeb4c1; }
.nav { display: grid; gap: 6px; }
.nav button { border: 0; color: #d8dce4; background: transparent; text-align: left; padding: 12px 14px; border-radius: 10px; }
.nav button.active { color: #111; background: var(--yellow); font-weight: 750; }
.nav button:disabled { opacity: .44; cursor: not-allowed; }
.sidebar-footer { margin-top: auto; padding: 10px; color: #aeb4c1; font-size: 12px; line-height: 1.45; }

.main { min-width: 0; display: grid; grid-template-rows: 72px 1fr; }
.topbar { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; backdrop-filter: blur(12px); }
.topbar h1 { font-size: 20px; margin: 0; }
.userbox { display: flex; align-items: center; gap: 12px; }
.user-meta { text-align: right; }
.user-meta strong { display: block; font-size: 13px; }
.user-meta span { color: var(--muted); font-size: 12px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.content { overflow: auto; padding: 24px; }

.login-page { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, rgba(255,237,0,.23), transparent 34%), #f4f4f2; }
.login-card { width: min(470px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }
.login-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.login-logo img { width: 72px; height: 72px; object-fit: contain; }
.login-logo h1 { margin: 0; font-size: 27px; }
.login-logo p { margin: 5px 0 0; color: var(--muted); }
.status-line { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #b2b7c1; }
.status-dot.ok { background: #22a447; box-shadow: 0 0 0 4px rgba(34,164,71,.12); }
.status-dot.bad { background: #d92d20; box-shadow: 0 0 0 4px rgba(217,45,32,.12); }
.form-grid { display: grid; gap: 14px; }
label span { display: block; margin: 0 0 6px; color: #383d49; font-weight: 650; font-size: 13px; }
input, select { width: 100%; border: 1px solid #ccd1d9; border-radius: 11px; padding: 12px 13px; outline: none; background: #fff; }
input:focus, select:focus { border-color: #a99800; box-shadow: 0 0 0 3px rgba(255,237,0,.24); }
.primary { border: 0; border-radius: 11px; padding: 12px 16px; color: #111; background: var(--yellow); font-weight: 800; }
.primary:hover { background: #ffe600; }
.secondary { border: 1px solid var(--border); border-radius: 11px; padding: 11px 15px; background: #fff; color: #292e3a; font-weight: 700; }
.danger-link { border: 0; background: transparent; color: var(--danger); font-weight: 700; }
.error { color: var(--danger); font-size: 13px; min-height: 20px; }
.help { color: var(--muted); font-size: 12px; line-height: 1.45; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-header h2 { margin: 0 0 4px; font-size: 26px; }
.page-header p { margin: 0; color: var(--muted); }
.actions { display: flex; gap: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.project-card { background: #fff; border: 1px solid var(--border); border-radius: 17px; padding: 18px; box-shadow: 0 5px 18px rgba(26,31,44,.05); display: grid; gap: 13px; }
.project-card:hover { border-color: #cbbb00; transform: translateY(-1px); }
.project-card h3 { margin: 0; font-size: 18px; }
.project-card .number { color: #736b00; background: #fff9bd; border-radius: 999px; width: max-content; padding: 4px 8px; font-size: 11px; font-weight: 800; }
.project-card dl { margin: 0; display: grid; grid-template-columns: 94px 1fr; gap: 7px 10px; font-size: 13px; }
.project-card dt { color: var(--muted); }
.project-card dd { margin: 0; overflow-wrap: anywhere; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.empty { background: #fff; border: 1px dashed #c9ced6; border-radius: 18px; padding: 44px 22px; text-align: center; color: var(--muted); }
.spinner { width: 20px; height: 20px; border: 3px solid #dfe2e7; border-top-color: #756d00; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(13,16,24,.48); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { width: min(560px, 100%); background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 24px; }
.modal h3 { margin: 0 0 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.viewer-page { position: fixed; inset: 0; background: #f4f4f2; z-index: 90; display: grid; grid-template-rows: 62px 1fr; }
.viewer-header { background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.viewer-header .back { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 22px; }
.viewer-title { min-width: 0; }
.viewer-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title span { display: block; color: var(--muted); font-size: 12px; }
.viewer-spacer { flex: 1; }
.viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pill { border-radius: 999px; padding: 6px 10px; background: #f0f1f3; color: #4d5360; font-size: 12px; font-weight: 700; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 78px 1fr; }
  .brand-copy, .nav .label, .sidebar-footer { display: none; }
  .brand { justify-content: center; }
  .nav button { text-align: center; padding: 12px 6px; }
  .content { padding: 16px; }
}

/* Alpha 01c – sichtbarer Login-Fortschritt und robuster OAuth-Fallback */
.auth-progress {
  display: none;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff9bd;
  color: #4d4700;
  font-size: 13px;
  font-weight: 700;
}
.auth-progress.visible { display: flex; }
.auth-progress.visible::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(77,71,0,.24);
  border-top-color: #665e00;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.oauth-note {
  margin: -2px 0 0;
  color: #6e7481;
  font-size: 11px;
  line-height: 1.45;
  padding-left: 12px;
  border-left: 3px solid #ffed00;
}
button:disabled, input:disabled { cursor: wait; opacity: .72; }

/* Alpha 02 – Wix-Cloudspeicherung und Projektstände */
.setup-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d8c914;
  border-radius: 12px;
  background: #fff9bd;
  color: #4e4800;
}
.setup-warning strong { white-space: nowrap; }
.setup-warning span { color: #625c18; font-size: 13px; }
.setup-warning code { padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.7); }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.role-pill { padding: 4px 8px; border-radius: 999px; background: #edf0f4; color: #555c68; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.viewer-page { grid-template-rows: 66px 1fr; }
.viewer-header.cloud-header { gap: 10px; padding-right: 12px; }
.viewer-project-icon { width: 40px; height: 40px; object-fit: contain; }
.viewer-action { white-space: nowrap; padding: 9px 13px; }
.cloud-state {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(390px, 34vw);
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #f0f1f3;
  color: #515865;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
}
.cloud-state span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cloud-state-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #9ca3af; }
.cloud-state.loading .cloud-state-dot, .cloud-state.saving .cloud-state-dot { background: #c3a900; box-shadow: 0 0 0 4px rgba(255,237,0,.25); animation: pulse 1s ease-in-out infinite; }
.cloud-state.saved { background: #edf8f0; color: #24623a; }
.cloud-state.saved .cloud-state-dot { background: #22a447; box-shadow: 0 0 0 4px rgba(34,164,71,.12); }
.cloud-state.dirty { background: #fff8c7; color: #665d00; }
.cloud-state.dirty .cloud-state-dot { background: #d4b700; box-shadow: 0 0 0 4px rgba(212,183,0,.15); }
.cloud-state.error { background: #fff0ee; color: #9c241b; }
.cloud-state.error .cloud-state-dot { background: #d92d20; box-shadow: 0 0 0 4px rgba(217,45,32,.12); }
.cloud-state.offline { background: #eef2f6; color: #536170; }
.cloud-state.offline .cloud-state-dot { background: #758394; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
.viewer-loading {
  position: absolute;
  inset: 66px 0 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(244,244,242,.92);
  backdrop-filter: blur(8px);
  color: #3c424d;
}
.viewer-loading strong { font-size: 18px; }
.viewer-loading span { color: var(--muted); font-size: 13px; }
.viewer-loading .spinner { width: 30px; height: 30px; }
.revision-modal { width: min(850px, 96vw); max-height: min(720px, 90vh); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.revision-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.revision-head h3 { margin: 0 0 4px; }
.revision-head p { margin: 0; color: var(--muted); font-size: 13px; }
.revision-loading { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.revision-list { overflow: auto; padding-top: 10px; }
.revision-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 8px; border-bottom: 1px solid #eceef1; }
.revision-row.current { background: #fffce3; border-radius: 10px; }
.revision-number { display: grid; place-items: center; width: 52px; height: 38px; border-radius: 10px; background: #eef0f3; color: #424955; font-weight: 850; }
.revision-row.current .revision-number { background: var(--yellow); color: #181818; }
.revision-copy { min-width: 0; }
.revision-copy strong, .revision-copy span { display: block; }
.revision-copy span { margin-top: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.revision-actions { display: flex; gap: 8px; }
.compact { padding: 8px 10px !important; font-size: 12px; }
#globalModalRoot { position: relative; z-index: 300; }

@media (max-width: 1000px) {
  .cloud-state { max-width: 210px; }
  .viewer-action { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 760px) {
  .cloud-state { display: none; }
  .viewer-title span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .revision-row { grid-template-columns: 54px 1fr; }
  .revision-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Alpha 03 – dauerhafte Wix-Modelle und Dokumente */
.card-action-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
button.danger { border-color: #e3b9b5; background: #fff3f1; color: #a92a21; }
button.danger:hover:not(:disabled) { border-color: #d99189; background: #ffe7e3; }
.asset-modal {
  width: min(1120px, 96vw);
  max-height: min(860px, 92vh);
  display: grid;
  grid-template-rows: auto auto auto minmax(180px,1fr);
  gap: 14px;
  overflow: hidden;
}
.asset-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.asset-project-select { display: grid; gap: 5px; min-width: min(420px,100%); flex: 1 1 320px; }
.asset-project-select span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.asset-project-select select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 11px; background: #fff; padding: 9px 12px; color: var(--ink); font: inherit; }
.asset-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  min-height: 76px;
  padding: 14px 18px;
  border: 1.5px dashed #b7bec9;
  border-radius: 14px;
  background: #f7f8fa;
  color: #555e6a;
  text-align: center;
  transition: .16s ease;
}
.asset-dropzone strong { color: #272d36; }
.asset-dropzone span { font-size: 12px; }
.asset-dropzone.dragover { border-color: #d2b900; background: #fffbd5; transform: translateY(-1px); }
.asset-error { margin: 0; padding: 9px 11px; border-radius: 9px; background: #fff1ef; }
.asset-list { min-height: 0; overflow: auto; border-top: 1px solid var(--border); }
.asset-row, .asset-upload-row {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto minmax(270px,auto);
  align-items: center;
  gap: 13px;
  padding: 13px 8px;
  border-bottom: 1px solid #eceef1;
}
.asset-row.archived { opacity: .58; background: #f7f8fa; }
.asset-kind {
  display: grid;
  place-items: center;
  min-width: 50px;
  height: 38px;
  border-radius: 10px;
  background: #fff8ad;
  color: #3e3900;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}
.asset-copy { min-width: 0; }
.asset-copy strong, .asset-copy span, .asset-copy small { display: block; }
.asset-copy strong { color: #232933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-copy span { margin-top: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-copy small { margin-top: 3px; color: #747b86; font-size: 11px; }
.asset-autoload { display: inline-flex; align-items: center; gap: 6px; color: #606874; font-size: 11px; font-weight: 700; }
.asset-autoload input { width: 16px; height: 16px; accent-color: #d4bd00; }
.asset-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; flex-wrap: wrap; }
.asset-upload-row { grid-template-columns: 62px minmax(0,1fr) minmax(120px,auto); background: #fffceb; }
.asset-upload-row.failed { background: #fff1ef; }
.asset-upload-state { color: #5d6470; font-size: 12px; font-weight: 700; text-align: right; }
.asset-upload-row.failed .asset-upload-state { color: #a92a21; }
.asset-progress-bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e2e5e9; }
.asset-progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e0c800,#ffed00); transition: width .18s ease; }

@media (max-width: 900px) {
  .asset-row { grid-template-columns: 52px minmax(0,1fr) auto; }
  .asset-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .asset-upload-row { grid-template-columns: 52px minmax(0,1fr); }
  .asset-upload-state { grid-column: 1 / -1; text-align: right; }
}
@media (max-width: 620px) {
  .asset-modal { width: 100%; max-height: 94vh; padding: 17px; }
  .asset-toolbar > button { width: 100%; }
  .asset-row { grid-template-columns: 48px minmax(0,1fr); }
  .asset-autoload { grid-column: 1 / -1; justify-content: flex-end; }
  .asset-actions { justify-content: stretch; }
  .asset-actions button { flex: 1 1 135px; }
  .card-action-group { width: 100%; }
  .card-action-group button { flex: 1 1 auto; }
}

/* Alpha 04 – Projektmitglieder und Rollen */
.member-modal {
  width: min(980px, 96vw);
  max-height: min(850px, 92vh);
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr);
  gap: 14px;
  overflow: hidden;
}
.member-toolbar { display: flex; align-items: end; gap: 12px; }
.member-add-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .7fr) auto;
  align-items: end;
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid #e4e6ea;
  border-radius: 14px;
  background: #f8f9fa;
}
.member-add-form .member-form-help {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.member-add-form .error { grid-column: 1 / -1; min-height: 0; }
.member-readonly-note, .member-notice {
  padding: 10px 12px;
  border-radius: 10px;
  color: #555d68;
  background: #f1f3f5;
  font-size: 12px;
}
.member-notice {
  color: #315f3b;
  background: #edf8f0;
  border: 1px solid #cde8d4;
}
.member-list { min-height: 0; overflow: auto; border-top: 1px solid var(--border); }
.member-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(210px, auto) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 8px;
  border-bottom: 1px solid #eceef1;
}
.member-row.inactive { opacity: .62; background: #f7f8fa; }
.member-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #2e2b00;
  background: #fff5a4;
  font-weight: 850;
  letter-spacing: .02em;
}
.member-copy { min-width: 0; }
.member-copy strong, .member-copy span, .member-copy small { display: block; }
.member-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-copy span { margin-top: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-copy small { margin-top: 4px; color: #747b86; font-size: 11px; line-height: 1.3; }
.member-role-control { display: grid; justify-items: stretch; gap: 6px; min-width: 190px; }
.member-role-control select { min-height: 38px; padding: 8px 10px; }
.member-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef0f3;
  color: #48505c;
  font-size: 11px;
  font-weight: 850;
}
.member-role-pill.owner { background: #fff4a2; color: #4b4300; }
.member-role-pill.admin { background: #e7eeff; color: #2d4f95; }
.member-role-pill.editor { background: #ecf8ef; color: #25613a; }
.member-role-pill.viewer { background: #f1f2f4; color: #535b67; }
.member-active-state { text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.member-active-state.active { color: #268344; }
.member-active-state.inactive { color: #8a4c46; }
.member-actions { display: flex; justify-content: flex-end; }

@media (max-width: 850px) {
  .member-add-form { grid-template-columns: 1fr 1fr; }
  .member-add-form > button { grid-column: 1 / -1; }
  .member-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .member-role-control { grid-column: 2 / -1; justify-self: stretch; }
  .member-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .member-modal { width: 100%; max-height: 94vh; padding: 17px; }
  .member-add-form { grid-template-columns: 1fr; }
  .member-add-form > button, .member-add-form .member-form-help, .member-add-form .error { grid-column: 1; }
  .member-row { grid-template-columns: 44px minmax(0, 1fr); }
  .member-role-control, .member-actions { grid-column: 1 / -1; }
  .member-actions button { width: 100%; }
}

/* Alpha 04b – Selbstregistrierung mit manueller Wix-Genehmigung */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 16px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #f3f4f5;
}
.auth-tab {
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  background: transparent;
  color: #656b76;
  font-weight: 750;
  cursor: pointer;
}
.auth-tab.active {
  background: #fff;
  color: #171a22;
  box-shadow: 0 2px 8px rgba(26,31,44,.08);
}
.two-column-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-secondary-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
.link-button {
  border: 0;
  background: transparent;
  color: #675f00;
  padding: 10px 5px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-notice {
  display: none;
  padding: 11px 12px;
  border: 1px solid #d6c800;
  border-radius: 11px;
  background: #fffbd5;
  color: #514b00;
  font-size: 12px;
  line-height: 1.45;
}
.auth-notice.visible { display: block; }
.auth-notice.manual-approval-note {
  display: grid;
  gap: 3px;
}
.auth-notice.manual-approval-note strong { font-size: 13px; }
.pending-approval {
  display: grid;
  gap: 15px;
  text-align: center;
}
.pending-approval h2 { margin: 0; font-size: 23px; }
.pending-approval > p { margin: 0; color: var(--muted); line-height: 1.5; }
.pending-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #171a22;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 0 0 8px rgba(255,237,0,.18);
}
.pending-steps {
  display: grid;
  gap: 8px;
  text-align: left;
}
.pending-steps > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 10px;
  background: #f5f6f7;
}
.pending-steps span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #171a22;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.pending-steps p { margin: 2px 0 0; color: #4e5460; font-size: 12px; line-height: 1.4; }
@media (max-width: 520px) {
  .login-card { padding: 22px; }
  .two-column-form, .auth-secondary-actions { grid-template-columns: 1fr; }
  .link-button { justify-self: center; }
}

/* Alpha 05 – zentrale Viewer-Versionen */
.viewer-release-modal {
  width: min(1120px, 96vw);
  max-height: min(90vh, 920px);
  overflow: auto;
}
.viewer-release-upload-form {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #f8f9fa;
}
.release-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.release-form-grid .release-notes { grid-column: 1 / -1; }
.release-form-grid textarea { min-height: 74px; resize: vertical; }
.release-upload-footer {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: center; margin-top: 14px; color: var(--muted); font-size: 12px;
}
.viewer-release-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 16px;
}
.viewer-release-card {
  border: 1px solid var(--border); border-radius: 15px; padding: 16px;
  background: #fff; box-shadow: 0 8px 20px rgba(26,31,44,.06);
}
.viewer-release-card.stable {
  border-color: #c8b900; background: linear-gradient(180deg,#fffef0,#fff);
  box-shadow: 0 0 0 2px rgba(255,237,0,.24),0 8px 20px rgba(26,31,44,.08);
}
.viewer-release-card.archived { opacity: .72; }
.viewer-release-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.viewer-release-top > div { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.release-id,.release-channel,.release-source,.release-status {
  display:inline-flex; align-items:center; min-height:25px; padding:4px 9px;
  border-radius:999px; font-size:10px; font-weight:850; letter-spacing:.03em;
}
.release-id { background:var(--yellow); color:#171a22; }
.release-channel { background:#eef0f4; color:#424955; }
.release-source { background:#e7f4ff; color:#1e5b89; }
.release-status { background:#f0f1f3; color:#727985; }
.release-status.ready { background:#e6f5e9; color:#246d34; }
.viewer-release-card h4 { margin:13px 0 7px; font-size:18px; }
.viewer-release-card > p { margin:0; min-height:38px; color:var(--muted); font-size:12px; line-height:1.45; }
.release-meta {
  display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:14px 0;
  padding:11px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:11px;
}
.release-meta dt { color:var(--muted); }
.release-meta dd { margin:0; font-weight:700; }
.release-actions { display:flex; flex-wrap:wrap; gap:7px; }
.danger-soft { color:#9c4738 !important; border-color:#d9b1aa !important; }
.project-version-modal { width:min(660px,96vw); }
.project-version-modal label { display:grid; gap:7px; margin-top:18px; }
.version-help {
  margin-top:14px; padding:12px 14px; border-left:4px solid var(--yellow);
  border-radius:8px; background:#fffde7; color:#535966; font-size:12px; line-height:1.5;
}
@media (max-width:860px) {
  .release-form-grid,.viewer-release-list { grid-template-columns:1fr; }
  .release-upload-footer { align-items:stretch; flex-direction:column; }
  .release-upload-footer button { width:100%; }
}

/* Alpha 06 – Bearbeitungssperre und sicherer Mehrbenutzerbetrieb */
.project-card-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.project-lock-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 800; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.project-lock-pill.free { background: #edf8f0; color: #24623a; }
.project-lock-pill.own { background: #fff8c7; color: #665d00; }
.project-lock-pill.busy { background: #fff0ee; color: #92281f; }
.project-lock-state { display: flex; align-items: center; gap: 7px; max-width: min(270px, 24vw); min-height: 36px; padding: 8px 11px; border-radius: 999px; background: #eef1f4; color: #515865; font-size: 12px; font-weight: 750; white-space: nowrap; overflow: hidden; }
.project-lock-state span:last-child { overflow: hidden; text-overflow: ellipsis; }
.project-lock-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #758394; }
.project-lock-state.own { background: #fff8c7; color: #665d00; }
.project-lock-state.own .project-lock-dot { background: #d4b700; box-shadow: 0 0 0 4px rgba(212,183,0,.14); }
.project-lock-state.busy { background: #fff0ee; color: #92281f; }
.project-lock-state.busy .project-lock-dot { background: #d92d20; box-shadow: 0 0 0 4px rgba(217,45,32,.11); }
.project-lock-state.readonly { background: #eef2f6; color: #536170; }
.lock-takeover { border-color: #d8c914 !important; background: #fffbe2 !important; color: #514b00 !important; }
.lock-takeover[hidden] { display: none !important; }
@media (max-width: 1180px) {
  .project-lock-state { max-width: 190px; }
}
@media (max-width: 900px) {
  .project-lock-state { display: none; }
}
.lock-readonly-banner { position: absolute; top: 72px; left: 50%; z-index: 4; transform: translateX(-50%); max-width: min(760px, calc(100vw - 60px)); padding: 9px 16px; border: 1px solid #e3b9b5; border-radius: 999px; background: rgba(255,240,238,.96); color: #8d2b22; font-size: 12px; font-weight: 800; box-shadow: 0 5px 18px rgba(80,30,25,.10); pointer-events: none; }
.lock-readonly-banner.hidden { display: none; }

/* Alpha 08 – installierte Windows-App, Offline-Warteschlange und fortsetzbare Synchronisierung */
.nav button { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nav-badge { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--yellow); color:#171a22; font-size:10px; font-weight:900; }
.nav button.active .nav-badge { background:#171a22; color:#fff; }
.offline-app-banner,.sync-app-banner {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
  margin:0 0 14px; padding:12px 15px; border-radius:13px; font-size:12px; line-height:1.45;
}
.offline-app-banner { border:1px solid #b9c6d4; background:#eef3f8; color:#3f5367; }
.sync-app-banner { border:1px solid #d8c91a; background:#fffbd7; color:#5b5300; }
.offline-app-banner strong,.sync-app-banner strong { white-space:nowrap; font-size:13px; }
.offline-app-banner span,.sync-app-banner span { color:inherit; opacity:.88; }
.project-sync-pill { display:inline-flex; align-items:center; min-height:22px; padding:4px 8px; border-radius:999px; background:#fff4a2; color:#625800; font-size:10px; line-height:1; font-weight:850; white-space:nowrap; }
.project-lock-pill.offline { background:#e9f0f7; color:#496075; }
.project-lock-state.offline { background:#e8f0f7; color:#405b72; }
.project-lock-state.offline .project-lock-dot { background:#6489a7; box-shadow:0 0 0 4px rgba(100,137,167,.14); }
.cloud-state.queued { background:#fff6bd; color:#655b00; }
.cloud-state.queued .cloud-state-dot { background:#d6b900; box-shadow:0 0 0 4px rgba(214,185,0,.16); }
.lock-readonly-banner.offline { border-color:#b7c7d6; background:rgba(235,243,249,.97); color:#405b72; }
.sync-modal { width:min(980px,96vw); max-height:min(88vh,880px); overflow:auto; }
.sync-summary { display:grid; gap:3px; margin:16px 0; padding:13px 15px; border-radius:12px; }
.sync-summary.online { background:#edf8f0; color:#24623a; }
.sync-summary.offline { background:#eef3f8; color:#405b72; }
.sync-summary span { font-size:12px; opacity:.82; }
.sync-list { display:grid; gap:10px; }
.sync-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 15px; border:1px solid var(--border); border-radius:13px; background:#fff; }
.sync-row > div:first-child { display:grid; gap:4px; min-width:0; }
.sync-row strong { font-size:14px; }
.sync-row span,.sync-row small { color:var(--muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.sync-row.conflict,.sync-row.failed { border-color:#e3b9b5; background:#fff5f3; }
.sync-row.locked { border-color:#e4d682; background:#fffbdf; }
.sync-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.desktop-modal { width:min(760px,96vw); }
.desktop-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.desktop-status-grid > div { display:grid; gap:5px; padding:14px; border:1px solid var(--border); border-radius:13px; background:#f8f9fa; }
.desktop-status-grid span { color:var(--muted); font-size:11px; }
.desktop-status-grid strong { font-size:14px; }
@media(max-width:760px){
  .offline-app-banner,.sync-app-banner,.sync-row { grid-template-columns:1fr; }
  .sync-actions { justify-content:stretch; }
  .sync-actions button { flex:1; }
  .desktop-status-grid { grid-template-columns:1fr; }
}
.status-dot.offline { background:#6489a7; box-shadow:0 0 0 4px rgba(100,137,167,.14); }

/* Alpha 08 – Administration, Diagnose, Backup und Konfliktassistent */
.admin-modal { width:min(1180px,97vw); max-height:min(92vh,980px); overflow:auto; }
.admin-project-select { margin:14px 0 18px; }
.admin-project-select label { display:grid; gap:7px; }
.admin-project-select span { font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.admin-project-select select { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--border); border-radius:12px; background:#fff; font:700 14px/1.2 inherit; }
.admin-section { margin:14px 0; padding:17px; border:1px solid var(--border); border-radius:15px; background:#fff; }
.admin-section h4 { margin:0 0 4px; font-size:17px; }
.admin-section p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.admin-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.admin-section-head > div:last-child { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.admin-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:12px 0; }
.admin-kpi-grid.global { grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-kpi-grid > div { display:grid; gap:5px; min-height:70px; padding:12px 13px; border:1px solid #e2e5e9; border-radius:12px; background:#f8f9fa; }
.admin-kpi-grid span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; }
.admin-kpi-grid strong { font-size:15px; overflow-wrap:anywhere; }
.diagnostic-banner { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; font-size:12px; }
.diagnostic-banner.green { background:#eaf7ed; color:#27663a; border:1px solid #b9dfc4; }
.diagnostic-banner.yellow { background:#fff9d2; color:#6e6100; border:1px solid #e4d36a; }
.diagnostic-banner.red { background:#fff0ed; color:#8b2d25; border:1px solid #e5b5ae; }
.diagnostic-banner strong { font-size:14px; }
.diagnostic-issues { display:grid; gap:7px; margin-top:10px; }
.diagnostic-issue { display:grid; grid-template-columns:72px minmax(0,1fr); gap:9px; align-items:start; padding:10px 12px; border-radius:10px; font-size:12px; }
.diagnostic-issue.info { background:#eef4fa; color:#365870; }
.diagnostic-issue.warning { background:#fff9df; color:#6d5e00; }
.diagnostic-issue.error { background:#fff1ef; color:#8a3027; }
.diagnostic-ok { padding:12px; border-radius:10px; background:#eff9f1; color:#28643a; font-size:12px; font-weight:700; }
.backup-options { display:flex; flex-wrap:wrap; gap:12px 20px; margin:12px 0; padding:12px; border-radius:11px; background:#f7f8fa; }
.backup-options label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.backup-options input { width:17px; height:17px; accent-color:#d7bd00; }
.admin-action-line { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.admin-action-line .muted { min-width:0; overflow-wrap:anywhere; }
.activity-list { display:grid; gap:6px; max-height:340px; overflow:auto; padding-right:4px; }
.activity-row { display:grid; grid-template-columns:12px minmax(0,1fr); gap:10px; padding:10px 11px; border:1px solid #e3e5e8; border-radius:11px; background:#fbfbfc; }
.activity-row > div:last-child { display:grid; gap:3px; }
.activity-row strong { font-size:12px; }
.activity-row span,.activity-row small { color:var(--muted); font-size:10px; line-height:1.4; }
.activity-dot { width:8px; height:8px; margin-top:4px; border-radius:999px; background:#7b8793; }
.activity-row.warning .activity-dot { background:#d0ac00; }
.activity-row.error .activity-dot { background:#bf4437; }
.danger-zone { border-color:#e5cbc7; background:#fffafa; }
.compact-empty { padding:18px!important; min-height:0!important; }
.conflict-modal { width:min(900px,96vw); }
.conflict-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.conflict-comparison > div { display:grid; gap:6px; padding:15px; border:1px solid var(--border); border-radius:13px; background:#f8f9fa; }
.conflict-comparison span,.conflict-comparison small { color:var(--muted); font-size:11px; }
.conflict-comparison strong { font-size:16px; }
.conflict-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:16px 0; }
.conflict-actions button { min-height:46px; }
@media(max-width:850px){
  .admin-section-head,.admin-action-line { flex-direction:column; align-items:stretch; }
  .admin-section-head > div:last-child { justify-content:stretch; }
  .admin-section-head button,.admin-action-line button { flex:1; }
  .admin-kpi-grid,.admin-kpi-grid.global,.conflict-comparison,.conflict-actions { grid-template-columns:1fr; }
}


/* Desktop 1.0 – System-Selbsttest */
.desktop-selftest-panel{margin-top:16px;padding:16px;border:1px solid #dfe3ea;border-radius:16px;background:#f8f9fb}
.desktop-selftest-panel h4{margin:0 0 4px;font-size:16px}.desktop-selftest-panel p{margin:0;color:#687180;font-size:13px}
.rc2-selftest-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:14px 0 10px;padding:11px 13px;border-radius:12px;background:#fff}
.rc2-selftest-summary span{color:#687180;font-size:12px}.rc2-selftest-list{display:grid;gap:7px}
.rc2-selftest-row{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid #e5e8ee}
.rc2-selftest-row>span{font:800 10px/1 Arial,sans-serif;letter-spacing:.05em}.rc2-selftest-row strong,.rc2-selftest-row small{display:block}.rc2-selftest-row small{color:#687180;margin-top:2px}
.rc2-selftest-row.pass>span{color:#2c7a35}.rc2-selftest-row.warn>span{color:#9a6a00}.rc2-selftest-row.fail>span{color:#b42318}.rc2-selftest-row.info>span{color:#3569a8}


/* Desktop 1.0.3 – timeout-sicherer Uploadabschluss und provider-neutrale Dateiverwaltung */
.asset-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.asset-row .asset-copy small{display:block;margin-top:5px;color:#6d7480;line-height:1.35}
@media(max-width:820px){.asset-toolbar-actions{width:100%;justify-content:stretch}.asset-toolbar-actions button{flex:1 1 auto}}


/* Mobile Alpha 02 – kompakte Projektliste statt Kartenraster */
.project-list { display:grid; gap:9px; min-width:0; }
.project-list-head,
.project-list-item {
  display:grid;
  grid-template-columns:minmax(220px,1.25fr) minmax(180px,1fr) minmax(240px,1.35fr) minmax(180px,.9fr) minmax(150px,auto);
  gap:14px;
  align-items:center;
}
.project-list-head {
  padding:0 14px 3px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.project-list-item {
  position:relative;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 12px rgba(26,31,44,.045);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.project-list-item:hover { border-color:#cbbb00; box-shadow:0 5px 16px rgba(26,31,44,.07); }
.project-list-identity { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; }
.project-list-item .number { color:#736b00; background:#fff9bd; border-radius:999px; width:max-content; max-width:135px; padding:4px 8px; font-size:10px; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-list-title { min-width:0; }
.project-list-title h3 { margin:0; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-list-title span { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:750; }
.project-list-meta { min-width:0; display:grid; gap:4px; }
.project-list-meta strong,
.project-list-meta span { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-list-meta strong { color:#2e3440; font-size:12px; }
.project-list-meta span { color:var(--muted); font-size:10.5px; }
.project-list-badges { min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:6px; flex-wrap:wrap; }
.project-list-actions { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.project-open-btn { min-width:82px; padding:9px 12px; }
.project-list-more { position:relative; }
.project-list-more summary {
  min-height:38px;
  display:grid;
  place-items:center;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#292e3a;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.project-list-more summary::-webkit-details-marker { display:none; }
.project-list-more[open] summary { border-color:#cbbb00; background:#fffde8; }
.project-list-more-panel {
  position:absolute;
  z-index:30;
  right:0;
  top:calc(100% + 7px);
  width:210px;
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 38px rgba(26,31,44,.18);
}
.project-list-more-panel button { width:100%; text-align:left; }
@media (max-width:1180px) and (min-width:901px) {
  .project-list-head,
  .project-list-item { grid-template-columns:minmax(210px,1.25fr) minmax(160px,.9fr) minmax(210px,1.1fr) minmax(160px,.8fr) auto; gap:10px; }
}