@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · PUBLIC PAGES BASE
   ---------------------------------------------------------------------
   Gemeinsame Marken- und Shell-Schicht für Jobbörse, Stellendetail und
   Arbeitgeberseite. Das bestehende app.css bleibt Funktionsfundament;
   diese Datei vereinheitlicht nur öffentliche Tokens, Kopf, Fuß und die
   typografische Grundhaltung. Seitenspezifische Regeln folgen danach.
   ===================================================================== */

.public-page {
  /* Die Basisschicht delegiert ihre Markenrollen an public-brand.css.
     Fallbacks halten die Seite auch bei einer isolierten CSS-Prüfung
     lesbar; die 26 HTML-Seiten laden die Brand-Schicht verbindlich. */
  --sand: var(--gc-canvas, #f5f1e8);
  --sand-ton: var(--gc-canvas-2, #ece6db);
  --karte: var(--gc-surface, #fff);
  --dunkel: var(--gc-dark-2, #0d1f15);
  --dunkel-tief: var(--gc-dark, #0a1710);
  --marker: var(--gc-green-deep, #15803d);
  --marker-licht: var(--gc-mint, #6ee7a0);
  --orange: var(--gc-action, #00d261);
  --orange-tief: var(--gc-action-hover, #00b957);
  --ink-hell-900: var(--gc-ink, #1a1a1a);
  --ink-hell-800: var(--gc-ink-strong, #30332f);
  --ink-hell-700: var(--gc-ink-soft, #4a4a4a);
  --ink-hell-600: var(--gc-ink-muted, #555853);
  --ink-hell-500: var(--gc-ink-faint, #686c66);
  --ink-hell-400: var(--gc-ink-faint, #686c66);
  --linie-hell: var(--gc-line, #e2dccf);
  --linie-hell-2: var(--gc-line-strong, #cfc8ba);
  --auf-dunkel: var(--gc-on-dark, #f4f1e8);
  --auf-dunkel-leise: var(--gc-on-dark-soft, rgb(244 241 232 / 0.76));
  --auf-dunkel-still: var(--gc-on-dark-faint, rgb(244 241 232 / 0.62));
  --public-control: var(--gc-surface, #fff);
  --public-control-hover: var(--gc-canvas-2, #ece6db);
  --public-focus: var(--gc-green-deep, #15803d);
  --public-radius-control: var(--gc-radius-control, 12px);
  --public-radius-panel: var(--gc-radius-feature, 22px);
  --public-ease: var(--gc-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --kopf-h: 86px;
  --kopf-h-mobil: 72px;
  --breite: 1280px;
  background: var(--sand);
  color: var(--ink-hell-800);
  -webkit-font-smoothing: antialiased;
}

.public-page h1,
.public-page h2,
.public-page h3 {
  hyphens: none;
  text-wrap: balance;
}

.public-page p,
.public-page li {
  text-wrap: pretty;
}

.public-page .band--hell {
  background: var(--sand);
}

.public-page .band--ton {
  background: var(--sand-ton);
}

.public-page .band--dunkel {
  background: var(--dunkel-tief);
}

/* Kopf ---------------------------------------------------------------- */

/* Design 05 (D1): Der Kopf ist hell und wird vollständig von der
   Markenebene gestaltet (.kopf--hell in public-brand.css). Hier steht
   nur noch die Unterstreichungsposition. */
.public-page .nav__link::after {
  bottom: 6px;
}

/* Gemeinsame Controls ------------------------------------------------- */

.public-page :is(button, a, input, select, summary):focus-visible {
  /* Über die Rolle, nicht über das Token: auf .dunkel bindet app.css --fokus
     auf --fokus-dunkel (Akzent, R0 11,4:1), auf hell bleibt das Waldgrün. */
  outline-color: var(--fokus);
}

.public-page .btn:active {
  transform: translateY(1px);
}

.public-page .btn-aktion {
  background: var(--gc-action);
  color: var(--gc-action-ink);
}

.public-page .btn-aktion:hover {
  background: var(--gc-action-hover);
  color: var(--gc-action-ink);
}

/* Fuß ----------------------------------------------------------------- */

/* Design 05 (D1): Der Fuß kommt vollständig aus der Markenebene
   (.footer--reich in public-brand.css). */

@media (min-width: 1200px) {
  .public-page .nav__liste {
    gap: 22px;
  }
}

@media (max-width: 639px) {
  .public-page .footer__branchen {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page *,
  .public-page *::before,
  .public-page *::after {
    scroll-behavior: auto !important;
  }
}