/* =============================================================================
 * Umgebungshinweis (Auftrag: DSGVO-technische Umsetzung, 05.08.2026).
 * Fest am unteren Bildschirmrand, nur in der Entwicklungsumgebung sichtbar
 * (_env_banner.html rendert nur, wenn is_development_environment gesetzt ist).
 *
 * Gestaltung folgt der dunklen Markenbuehne des Redesigns: Fast-Schwarz mit
 * Marken-Gelb als Signalfarbe und einer gelben Oberkante. Die fruehere braune
 * Warnflaeche stammte aus der hellen Statuspalette und stand quer zum Rest der
 * Oberflaeche.
 *
 * Kontrast gemessen: --d-ink (#f4f5f7) auf --d-surface (#16181d) 15,9:1,
 * --d-ink-muted (#a8aeba) 7,3:1, --d-accent (#f8e000) auf --d-surface 13,3:1.
 * Alle deutlich ueber WCAG AA.
 * ============================================================================= */

.env-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-env-banner);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.25rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--d-accent);
  background: var(--d-surface);
  color: var(--d-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Angemeldete Oberflaeche: Die Sidebar ist fest positioniert und darf nicht
 * ueberdeckt werden -- sonst verschwindet der Anfang des Hinweistextes hinter
 * ihr. Unterhalb von 60rem weicht die Sidebar einem Drawer, dort nimmt der
 * Hinweis wieder die volle Breite ein (Breakpoint identisch zu app.css). */
.app--shell .env-banner { left: var(--sidebar-w); }

@media (max-width: 60rem) {
  .app--shell .env-banner { left: 0; }
}

.env-banner__text { margin: 0; flex: 1 1 auto; }

.env-banner__text strong {
  color: var(--d-accent);
  font-weight: var(--weight-semibold);
}

/* Der Nachsatz traegt die Aufzaehlung und darf zuruecktreten. */
.env-banner__hint { color: var(--d-ink-muted); }

/* Eigene Farben statt Vererbung: Der Knopf steht auf dunkler Flaeche, waehrend
 * die umgebende Seite hell ist -- ohne diese Festlegung schlaegt in der
 * angemeldeten Oberflaeche das helle Knopfbild durch. */
.env-banner .env-banner__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--d-ink-muted);
  cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2);
}

.env-banner .env-banner__close:hover {
  background: var(--d-surface-3);
  color: var(--d-ink);
}

.env-banner .env-banner__close:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .env-banner { align-items: flex-start; gap: .6rem; }
  /* Auf schmalen Geraeten traegt die Kurzfassung; die Aufzaehlung der
   * Datenarten wuerde dort den halben Bildschirm einnehmen. */
  .env-banner__hint { display: none; }
}

/* --- Platz fuer den Hinweis schaffen ---------------------------------------
 * Der Hinweis liegt fest ueber der Seite und wuerde sonst am Seitenende den
 * letzten Inhalt verdecken -- beim Dashboard die Unterkante der Tabelle, in
 * der Bewerberstrecke die Fusszeile.
 *
 * Diese Regeln stehen bewusst hier und nicht in app.css/applicant.css: Das
 * Stylesheet wird nur eingebunden, wenn der Hinweis tatsaechlich gerendert
 * wird (_env_banner.html). Damit entsteht der Abstand ausschliesslich dann,
 * wenn es auch etwas auszugleichen gibt -- ohne :has() und ohne dass die
 * Produktionsoberflaeche eine Regel traegt, die dort nie greift. */

:root { --env-banner-h: 4.5rem; }

.app-main,
.app-bare-main { padding-bottom: var(--env-banner-h); }

main.applicant,
footer.applicant { padding-bottom: var(--env-banner-h); }

/* Die Kiosk-Startseite ist eine Buehne ueber die volle Anzeigehoehe und traegt
 * den Startknopf unten. Hier wirkt nicht padding, sondern die Hoehe selbst:
 * Der Hinweis nimmt dem Sichtbereich seine Zeile weg, sonst liegt er auf dem
 * Knopf. place-items: center zentriert den Inhalt danach im Rest. */
.hero { min-height: calc(100dvh - var(--env-banner-h)); }