/* Schriften lokal, nicht mehr von Google. Beim externen Laden geht bei jedem Aufruf
   die IP des Mitarbeiters an Google, das ist in Deutschland ein Abmahnthema und in
   einer Anwendung mit Beschaeftigtendaten unnoetig. Oswald + Inter, Stand 10.08.2026. */
@import url('../vendor/fonts.css');

/* ===== CSS Custom Properties ===== */
:root {
  --primary: #468f9e;
  --primary-dark: #3a7a88;
  --accent: #90bcc5;
  --link: #ef6a00;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --text: #575656;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --score-green: #22C55E;
  --score-yellow: #EAB308;
  --score-red: #EF4444;
  --radius-btn: 8px;
  --radius-card: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-name, .completion-title {
  font-family: 'Oswald', -apple-system, sans-serif;
  letter-spacing: 0.01em;
}

/* ===== App Shell ===== */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===== Screens ===== */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 24px 20px 40px;
  min-height: 100vh;
}

.screen.active {
  display: flex;
}

/* ===== Header ===== */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.screen-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.screen-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

/* ===== Logo / Brand ===== */
.brand {
  text-align: center;
  padding: 48px 0 16px;
}

.brand-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.brand-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== Cards ===== */
.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ===== Category Card ===== */
.category-card {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.category-card:active {
  transform: scale(0.985);
  box-shadow: var(--shadow);
}

.category-card.done {
  border-left: 4px solid var(--score-green);
}

.category-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.category-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ===== Buttons ===== */
.btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
}

.btn-secondary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* Olivers Vorgabe: was anklickbar ist, sieht auch anklickbar aus. Ohne Hintergrund
   liest sich ein Knopf wie eine Beschriftung und wird uebersehen. Der zweitrangige
   Knopf bleibt deshalb gefuellt, nur in der hellen Marken-Abstufung, damit die
   Rangfolge zum gefuellten Hauptknopf sichtbar bleibt. */
.btn-ghost {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn-ghost:hover { background: var(--primary); }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.btn-row .btn { flex: 1; }

/* Zurueck ist ein Knopf, kein Text. Vorher war es ein farbiges Zeichen ohne Rahmen und
   damit die vierte Art, eine Funktion anzuzeigen. Jetzt hat es dieselbe Form wie jede
   andere Aktion in einer Karte: gefuellte Pille in der Markenfarbe. Zusammen mit dem
   grossen gefuellten Knopf bleiben genau zwei Formen fuer alles Bedienbare. */
.btn-back {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  flex: 0 0 auto;
  transition: background 0.15s;
}

.btn-back:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ===== Info Icon ===== */
.btn-info {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.25rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.btn-info:hover { background: var(--border); }

/* ===== Form Elements ===== */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  font-size: 1rem;
  color: var(--text);
  background: var(--card);
  transition: border-color 0.15s;
  outline: none;
  min-height: 48px;
}

.form-input:focus {
  border-color: var(--primary);
}

.form-input.error {
  border-color: var(--score-red);
}

.form-error {
  font-size: 0.8rem;
  color: var(--score-red);
  margin-top: 4px;
  display: none;
}

.form-error.visible { display: block; }

/* ===== Perspective Selector ===== */
.perspective-options {
  display: flex;
  gap: 12px;
}

.perspective-option {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perspective-option.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 109, 158, 0.07);
}

/* ===== Questionnaire ===== */
.question-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.question-category-name {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.question-category-intro {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 8px 0 16px;
}

.results-sub-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 2px 0 0;
  font-weight: 500;
}

.question-progress {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.question-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 32px;
}

/* ===== Likert Scale ===== */
.likert-scale {
  margin-bottom: 24px;
}

.likert-buttons {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.likert-btn {
  flex: 1;
  aspect-ratio: 1;
  max-width: 56px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.likert-btn.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Likert Button Labels */
.likert-num {
  line-height: 1;
  pointer-events: none;
}

.likert-btn-label {
  display: none;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  opacity: 0.7;
  pointer-events: none;
}

@media (min-width: 769px) {
  .likert-btn-label {
    display: block;
  }
  .likert-btn.with-labels {
    aspect-ratio: unset;
    max-width: none;
    border-radius: 8px;
    min-height: 64px;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
  }
}

.likert-labels {
  display: flex;
  justify-content: space-between;
}

.likert-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  max-width: 56px;
  text-align: center;
}

/* ===== Yes/No ===== */
.yesno-options {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.yesno-btn {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--card);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-height: 48px;
}

.yesno-btn.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 109, 158, 0.07);
}

/* ===== Choice Options ===== */
.choice-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.choice-option {
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--card);
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 48px;
}

.choice-option.selected {
  border-color: var(--primary);
  background: rgba(0, 109, 158, 0.07);
  color: var(--primary);
  font-weight: 600;
}

/* ===== Free Text ===== */
.freetext-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  font-size: 1rem;
  color: var(--text);
  background: var(--card);
  resize: vertical;
  min-height: 120px;
  outline: none;
  font-family: inherit;
  margin-bottom: 24px;
  transition: border-color 0.15s;
}

.freetext-input:focus { border-color: var(--primary); }

/* ===== Required hint ===== */
.required-hint {
  font-size: 0.8rem;
  color: var(--score-red);
  margin-bottom: 12px;
  display: none;
}

.required-hint.visible { display: block; }

/* ===== Navigation buttons ===== */
.question-nav {
  margin-top: auto;
  padding-top: 16px;
}

/* ===== Score / Results ===== */
.overall-score-box {
  text-align: center;
  padding: 32px 20px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.overall-score-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.overall-score-value {
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.overall-score-max {
  font-size: 1.5rem;
  color: var(--text-muted);
  font-weight: 400;
}

.overall-score-name {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ===== Category Score Row ===== */
.category-score-row {
  margin-bottom: 20px;
}

.category-score-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.category-score-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.category-score-num {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.score-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-bar-fill.green { background: var(--score-green); }
.score-bar-fill.yellow { background: var(--score-yellow); }
.score-bar-fill.red { background: var(--score-red); }

/* ===== Completion Screen ===== */
.completion-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: 20px;
  padding: 40px 0;
}

.checkmark-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.checkmark-icon {
  font-size: 2.5rem;
}

.completion-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.completion-sub {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.completion-stats {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}

/* ===== Info Screen ===== */
.info-section {
  margin-bottom: 24px;
}

.info-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.info-section p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===== Previous Scans List ===== */
.scan-history-item {
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.scan-history-item:hover { box-shadow: var(--shadow-md); }

.scan-history-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9375rem;
}

.scan-history-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.scan-history-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
  float: right;
}

/* ===== Progress indicator header ===== */
.progress-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}

.progress-bar-header {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-header-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ===== Divider ===== */
.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* ===== Spacers ===== */
.spacer { flex: 1; }
.mt-auto { margin-top: auto; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ===== Utilities ===== */
.text-muted { color: var(--text-muted); font-size: 0.875rem; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ===== Header Button Group (fixed top-right container) ===== */
.header-btn-group {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 100;
}

/* ===== Role Switch / Ausloggen Button (gefüllt in B+P Farbe) ===== */
.btn-role-switch {
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  min-height: 32px;
  transition: background 0.15s;
}
.btn-role-switch:hover { background: var(--primary-dark); }

/* ===== Dashboard: Karten ruhig/weiß, nur Buttons in B+P Farbe ===== */
/* Klickbare Karte (Unternehmen, Organisationseinheit) bleibt neutral weiß */
.dash-clickable {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.dash-clickable:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.dash-clickable:active { transform: scale(0.99); }

/* Klickbare Aktionen (Löschen, Link kopieren): gefüllt in B+P Farbe, weiße Schrift */
.dash-action {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dash-action:hover { background: var(--primary-dark); }

/* ===== Login Screen ===== */
.login-hero {
  text-align: center;
  padding: 56px 0 32px;
}

.login-hero .brand-name {
  font-size: 2.25rem;
  font-weight: 700;
}

.login-hero .brand-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.login-role-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-role-card {
  padding: 28px 24px;
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--card);
  -webkit-tap-highlight-color: transparent;
}

.login-role-card:hover,
.login-role-card:active {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.login-role-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.login-role-card-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.login-role-card--bp {
  background: var(--primary);
  border-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.login-role-card--bp:hover,
.login-role-card--bp:active {
  border-color: var(--primary);
  filter: brightness(1.08);
}

.login-bp-logo {
  max-height: 70px;
  width: auto;
  display: block;
}

/* ===== Dashboard ===== */
.dashboard-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--text-muted);
}

.manager-scan-card {
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  overflow: hidden;
}

.manager-scan-card:hover { box-shadow: var(--shadow-md); }

.manager-scan-card-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9375rem;
}

.manager-scan-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.manager-scan-card-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  float: right;
  margin-left: 8px;
}

.manager-scan-card-status.needs-scan {
  background: #FEF9C3;
  color: #854D0E;
}

.manager-scan-card-status.has-scan {
  background: #DCFCE7;
  color: #166534;
}

/* ===== Comparison Screen ===== */
.comparison-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.comparison-tab {
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -2px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.comparison-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comparison-table th {
  text-align: left;
  padding: 8px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.comparison-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.comparison-table td.score-cell {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.diff-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.diff-badge.green { background: #DCFCE7; color: #166534; }
.diff-badge.yellow { background: #FEF9C3; color: #854D0E; }
.diff-badge.red { background: #FEE2E2; color: #991B1B; }

/* ===== Manager hint box on results screen ===== */
.manager-hint-box {
  background: rgba(0, 109, 158, 0.06);
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 16px;
  /* Abstand nach oben: der Kasten klebte im Ergebnisbildschirm unmittelbar unter dem
     Ausloggen-Knopf und sah dadurch aus, als gehoere er noch zur Knopfgruppe. */
  margin-top: 28px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ===== Startbildschirm ===== */
#screen-startbildschirm {
  background: linear-gradient(160deg, #175f6d 0%, #091c26 100%);
  padding: 48px 24px 32px;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
}

.startbildschirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.startbildschirm-logo {
  height: 70px;
  width: auto;
  margin-bottom: 8px;
}

.startbildschirm-title {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
}

.startbildschirm-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #90bcc5;
  text-align: center;
  letter-spacing: 0.04em;
}

.startbildschirm-divider {
  width: 60px;
  height: 2px;
  background: #468f9e;
  border-radius: 1px;
  margin: 4px 0;
}

.startbildschirm-btn {
  margin-top: 12px;
  background: #468f9e;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 16px 48px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.startbildschirm-btn:hover { background: #3a7a88; }
.startbildschirm-btn:active { transform: scale(0.97); }

.startbildschirm-copyright {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding-bottom: 8px;
}

@media (max-width: 480px) {
  .startbildschirm-title { font-size: 28px; }
  .startbildschirm-sub { font-size: 17px; }
  .startbildschirm-logo { height: 56px; }
  .startbildschirm-btn { padding: 14px 40px; }
}

/* ===== Datenschutz-Screen ===== */
.datenschutz-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #468f9e;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.datenschutz-scrollbox {
  flex: 1;
  overflow-y: auto;
  max-height: 62vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  background: #f8fafc;
  -webkit-overflow-scrolling: touch;
}

.datenschutz-scrollbox p {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  color: #575656;
  line-height: 1.6;
  margin-bottom: 20px;
}

.datenschutz-scrollbox p:last-child { margin-bottom: 0; }

.datenschutz-scrollbox strong {
  font-weight: 600;
  color: var(--text);
}

.datenschutz-btn {
  margin-top: 16px;
  flex-shrink: 0;
}

.datenschutz-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== Radar Chart ===== */
.radar-chart-wrapper {
  margin: 24px 0;
  display: flex;
  justify-content: center;
}
.radar-chart-wrapper canvas {
  max-width: 600px;
  max-height: 600px;
  width: 100%;
  height: auto;
}

/* ===== Categories Grid ===== */
.categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Info Screen Desktop ===== */
#screen-info .info-section {
  max-width: 800px;
  margin: 0 auto;
}

/* ===== B+P Login Card ===== */
.login-role-card--bp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.login-bp-logo {
  max-height: 70px;
  width: auto;
  display: block;
}

/* ===== Desktop Layout ===== */
@media (min-width: 769px) {
  #app {
    max-width: 960px;
  }

  #screen-startbildschirm > *,
  #screen-datenschutz > *,
  #screen-login > *,
  #screen-broker-code > *,
  #screen-start > *,
  #screen-config > *,
  #screen-questionnaire > *,
  #screen-completion > * {
    max-width: 440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Results: Score-Box und Buttons zentriert */
  .overall-score-box {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  #screen-results .btn {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Dashboard: einspaltig. Unternehmen und Einheiten staffeln vertikal,
     das Anlegefeld bleibt eine kompakte Zeile statt vom Raster gestreckt zu werden. */
  #dashboard-dept-list {
    display: block;
    max-width: 720px;
  }

  /* Action-Buttons auf Content-Screens */
  #screen-bp-insight .btn,
  #screen-dept-comparison .btn,
  #screen-comparison .btn {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* BP-Insight Formular */
  #bp-insight-form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* History: 2-Spalten-Grid */
  #history-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ===== Liste der Einmal-Codes =====
   Die Codes sollen zum Ausschneiden taugen: gleich grosse Kaestchen, gut lesbare
   Schrift mit fester Zeichenbreite, klare Trennlinien. Beim Drucken faellt alles
   weg, was nicht auf den Zettel gehoert. */
.code-liste-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.code-liste-zelle {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--bg);
}

@media print {
  .screen:not(.active) { display: none !important; }
  .screen-header,
  .code-liste-aktionen,
  .code-liste-hinweis,
  .btn-role-switch { display: none !important; }
  #screen-code-liste { padding: 0; }
  .code-liste-zelle {
    border: 1px dashed #94a3b8;
    color: #000;
    background: #fff;
  }
  .code-liste-raster { gap: 6px; }
}