/* =============================================================================
   Betriebskompass – Ergänzungen zur öffentlichen Website
   -----------------------------------------------------------------------------
   Wird nach styles.css geladen und enthält nur Bausteine, die dort bewusst
   nicht stehen: die mobile Handlungsleiste, die Vertrauensleiste und einzelne
   Seitensonderfälle.

   Hinweis: Die früheren Marken-Variablen (Navy/Orange) dieser Datei sind
   entfallen. Farben kommen ausschließlich aus design-system.css.
   ========================================================================== */

/* =============================================================================
   Mobile Handlungsleiste
   -----------------------------------------------------------------------------
   Auf kleinen Bildschirmen bleibt die Hauptaktion dauerhaft erreichbar, ohne
   den Nutzer mit einem Overlay zu unterbrechen. Bewusst kein Pop-up: auf
   Mobilgeräten sind Overlays schwer zu schließen und werden als Störung
   wahrgenommen.
   ========================================================================== */

/* position:sticky statt fixed: die Leiste bleibt beim Scrollen am unteren Rand,
   übernimmt aber die Breite des Dokuments. Bei position:fixed würde sie sich am
   Viewport inklusive Scrollbalken ausrichten und waagerechten Überlauf erzeugen. */
.mobile-cta-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 60;
  width: 100%;
  gap: 2px;
  padding: 0;
  background: var(--color-divider);
  border-top: var(--rule-strong);
}
.mobile-cta-bar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.mobile-cta-bar .mobile-cta-primary { background: var(--color-accent); color: var(--color-bg); }
.mobile-cta-bar .mobile-cta-secondary { background: var(--color-bg); color: var(--color-text); }

@media (max-width: 780px) {
  .mobile-cta-bar { display: flex; }
}

/* =============================================================================
   Vertrauensleiste
   -----------------------------------------------------------------------------
   Enthält ausschließlich nachprüfbare Aussagen über den Betrieb der Software.
   Bewusst keine erfundenen Kundenzahlen, Sterne oder Testimonials: gefälschter
   Social Proof ist in Deutschland abmahnfähig und zerstört Vertrauen.
   ========================================================================== */

.trust-strip {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2px;
  background: var(--color-divider);
  border-bottom: var(--rule);
}
.trust-strip > div {
  background: var(--color-bg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.trust-strip strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.trust-strip span {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.trust-strip a { color: var(--color-accent-700); }

/* =============================================================================
   Einzelne Seitensonderfälle
   ========================================================================== */

/* Danke-Seite und schmale Bestätigungsseiten mittig ausrichten. */
.narrow-hero { max-width: 68ch; }

/* Fehlerseite 404 */
.error-page {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}
.error-code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

/* Marken-Zeichen als reines CSS-Quadrat (Header-Fallback, Fußbereich). */
.brand-mark-square {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.brand-mark-square::before,
.brand-mark-square::after {
  content: '';
  position: absolute;
  inset-inline: 0;
}
.brand-mark-square::before { top: 0; bottom: 50%; background: var(--color-accent); }
.brand-mark-square::after { top: 50%; bottom: 0; background: var(--color-text); }

/* =============================================================================
   Admin-Center
   ========================================================================== */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: var(--space-6);
  background: var(--color-divider);
  border-block: var(--rule);
}
.admin-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin-nav a:hover { background: var(--color-surface); color: var(--color-accent-800); }
.admin-nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-bg); }

.admin-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2px;
  margin-bottom: var(--space-6);
  background: var(--color-divider);
  border-block: var(--rule);
}
.admin-group-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
}
.admin-group-card:hover { background: var(--color-surface); }
.admin-group-card strong { font-family: var(--font-heading); font-weight: 800; }
.admin-group-card span { font-size: var(--text-sm); color: var(--color-text-muted); }
.admin-group-card small {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

/* Einzelnes Einstellungsfeld mit Herkunftskennzeichnung */
.admin-field { padding-bottom: var(--space-4); border-bottom: var(--hairline); }
.admin-field:last-of-type { border-bottom: 0; }
.admin-field .form-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-field code { background: var(--color-surface); padding: 1px 5px; }

.code-block {
  padding: var(--space-3);
  background: var(--color-surface-raised);
  border: var(--rule);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre;
}