@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · GEMEINSAMER SEITENHERO
   ---------------------------------------------------------------------
   Ein Geometrievertrag für Blog, Kontakt, FAQ und die drei Rechtsseiten.
   Die Füllungen unterscheiden sich, der linke Textanfang und der
   Inhaltsstapel nicht. Alle Maße greifen auf die vorhandene Marken- und
   Abstandsskala zurück.

   DER VERTRAG, EINMAL FESTGEHALTEN (D6-N2 Punkt 3, 18.09.2026):
   - Innenabstand oben/unten: var(--gc-section-y-wide) / var(--gc-section-y)
     (136,8 / 115,2 px bei 1440px, 88 / 72 px bei 390px).
   - H1: font-size var(--gc-fs-page), line-height var(--gc-lh-hero),
     letter-spacing var(--gc-ls-hero), font-weight 600 (60 / 63,6 px bei
     1440px, 36 / 38,16 px bei 390px, siehe .aligned-hero__title unten).
   Codex-Bericht 148 fand hier drei Sondergeometrien: Über-uns 760px hoch
   mit einer eigenen, größeren H1-Skala (--gc-fs-hero statt --gc-fs-page,
   public-about.css), Blog 760,5/942,2px mit einer eigenen Panel-Hülle
   (public-blog.css) und Kontakt bereits korrekt (240px zu schmaler
   Container war Punkt 2, nicht dieser Vertrag). Kontakt, FAQ und die drei
   Rechtsseiten benutzen diese Klasse direkt und brauchten keine Änderung.
   Blog benutzt sie über .blog-hero.aligned-hero und .blog-wrap.aligned-
   hero__inner (dual-classed, siehe blog.html-Markup); seine eigenen
   padding-/font-Deklarationen auf beiden Elementen werden von genau
   diesem Vertrag überschrieben, weil public-hero.css im HTML-Kopf nach
   public-blog.css lädt (gleiche Spezifität, später gewinnt). Das war
   schon vor diesem Auftrag so und ist keine neue Änderung, mit
   getComputedStyle direkt nachgemessen (siehe public-blog.css). Damit
   ist Blogs Padding und H1-Skala bereits identisch mit diesem Vertrag,
   die verbleibende Höhe (760,5/942,2px gegen 559/483px bei Kontakt) ist
   ausschließlich der zusätzliche Rasterinhalt (Titelgeschichte-Karte),
   keine Geometrieabweichung mehr. Über-uns benutzt diese Klasse nicht
   (eigene Bildbühne mit Vordergrundfoto statt einer reinen Textfläche),
   zieht die beiden Werte oben aber jetzt explizit nach, siehe
   public-about.css. */

.public-page .aligned-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--gc-section-y-wide) var(--gc-section-y);
  padding-inline: 0;
  background: var(--gc-dark-deep);
  color: var(--gc-on-dark-soft);
  /* D5a-Nachtrag, 17.09.2026 (AUFTRAG_D5.md D5a-Nachtrag Punkt 6). Ohne diese
     Zeile bleibt --fokus der globale helle Ring (public-brand.css, var(--gc-
     green-deep)), der auf dieser dunklen Fläche nur 2,05:1 hält (Brotkrumen-
     Link, gemessen rgb(18,100,64) gegen rgb(20,45,29) auf kontakt, impressum,
     datenschutz, agb, blog, blog-archiv; 1,72:1 auf blog-artikel und
     software-baumschule, dort dunkleres Blattgrün als Grund). --fokus-dunkel
     ist derselbe Akzent, den jede andere dunkle Fläche des Systems für ihren
     Ring nutzt (public-home.css, public-jobs.css, public-blog.css,
     public-blog-index.css, public-contact.css, public-job.css). */
  --fokus: var(--fokus-dunkel);
}

.public-page .aligned-hero::after {
  content: "";
  position: absolute;
  top: -220px;
  right: -120px;
  z-index: -1;
  width: min(720px, 72vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gc-accent) 18%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.public-page .aligned-hero > .aligned-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--gc-gutter);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.public-page .aligned-hero > .aligned-hero__inner::after {
  content: none;
}

.public-page .aligned-hero .aligned-hero__breadcrumb {
  max-width: 100%;
  margin: 0 0 var(--sp-10);
  color: var(--gc-on-dark-faint);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-page .aligned-hero .aligned-hero__breadcrumb ol {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  list-style: none;
}

.public-page .aligned-hero .aligned-hero__breadcrumb li {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
}

.public-page .aligned-hero .aligned-hero__breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--gc-on-dark-faint);
}

.public-page .aligned-hero .aligned-hero__breadcrumb a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-block: -10px;
  color: var(--gc-on-dark-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--t-basis) var(--gc-ease),
    text-decoration-color var(--t-basis) var(--gc-ease);
}

.public-page .aligned-hero .aligned-hero__breadcrumb a:hover {
  color: var(--gc-on-dark);
  text-decoration-color: currentColor;
}

.public-page .aligned-hero .aligned-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-10) var(--sp-5);
  align-items: start;
  margin-top: 0;
}

.public-page .aligned-hero .aligned-hero__copy {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
}

.public-page .aligned-hero .aligned-hero__eyebrow {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-6);
  color: var(--gc-accent);
}

.public-page .aligned-hero .aligned-hero__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: 0 0 18px;
  background: currentColor;
}

.public-page .aligned-hero .aligned-hero__title {
  max-width: 18ch;
  margin: 0;
  color: var(--gc-on-dark);
  font-family: var(--gc-font-display);
  font-size: var(--gc-fs-page);
  font-weight: 600;
  line-height: var(--gc-lh-hero);
  letter-spacing: var(--gc-ls-hero);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.public-page .aligned-hero .aligned-hero__clause {
  color: var(--gc-accent);
  font-weight: 400;
  font-style: normal;
}

.public-page .aligned-hero .aligned-hero__lede {
  min-width: 0;
  max-width: 32.5rem;
  margin: var(--sp-5) 0 0;
  color: var(--gc-on-dark-soft);
  font-size: var(--gc-fs-lead);
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 767px) {
  /* Blog und Kontakt bleiben klar als Einstieg erkennbar, beginnen aber
     auf dem Telefon dichter unter dem festen Kopf. */
  .public-page .aligned-hero {
    padding-block: 56px 42px;
  }
}

/* Jedes direkte Hauptkind nach dem Hero richtet seine erste Inhaltshülle
   an Logo und Hero aus. So werden neue Abschnitte ohne Klassenliste erfasst,
   und die vorhandenen Lesespalten sowie ihre eigene Füllung bleiben erhalten. */
@media screen {
  .public-page .aligned-hero ~ * > :first-child {
    margin-inline:
      max(
        0px,
        calc(
          (100% - (var(--gc-container-wide) + 2 * var(--gc-gutter))) / 2
        )
      )
      auto;
  }

  .public-page
    .aligned-hero
    ~ *
    > :first-child
    > .content-layout {
    margin-inline: 0 auto;
  }
}

@media (min-width: 1024px) {
  .public-page .aligned-hero .aligned-hero__copy {
    grid-column: 1 / span 7;
  }

  .public-page .aligned-hero--feature .aligned-hero__grid {
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-page .aligned-hero .aligned-hero__breadcrumb a {
    transition-duration: 0.01ms;
  }
}

@media print {
  .public-page .aligned-hero {
    padding-block: 0 28px;
    background: #fff;
    color: #111;
  }

  .public-page .aligned-hero::after {
    display: none;
  }

  .public-page .aligned-hero :is(
    .aligned-hero__breadcrumb,
    .aligned-hero__breadcrumb a,
    .aligned-hero__breadcrumb li + li::before,
    .aligned-hero__eyebrow,
    .aligned-hero__title,
    .aligned-hero__clause,
    .aligned-hero__lede
  ) {
    color: #111;
  }
}

/* W25.1: Die Titelkachel war 579 px hoch, der Textblock links nur 220. Das ließ
   359 px Leere unter dem Vorspann stehen.

   Woher die 300 px Bildhöhe kamen, gemessen und nicht vermutet: NICHT aus der
   4:3-Regel in public-blog.css. Die wird auf blog.html von public-blog-index.css
   mit "aspect-ratio: auto" verdrängt, gleiche Spezifität, später geladen. Die
   Höhe kam aus dem Eigenverhältnis des Motivs (1232 mal 928) über "height: auto".

   Alles hier gilt erst ab 1024 px, und zwar aus einem gemessenen Grund: darunter
   setzt public-blog-index.css eine feste "height" neben "flex: 0 0 auto", und
   eine feste Höhe macht "aspect-ratio" wirkungslos. Ohne die Medienabfrage würde
   der engere Fuß dort trotzdem greifen und die Kachel um 4 px HÖHER machen statt
   niedriger.

   Der Bildausschnitt braucht ein eigenes object-position. Die 50% 30% aus
   public-blog-index.css sind für eine 4:3-Box gedacht; in der flachen Box
   schneiden sie dem Motiv den Kopf ab, gemessen blieben nur 14,1 bis 67,2 % der
   Bildhöhe sichtbar.

   Die Kachel misst danach 430 px bei 1440 und 1920 px, 425 bei 1280 und 450 bei
   1024, wo der Titel auf vier Zeilen bricht. Seine Schriftgröße bleibt
   unverändert, das war ausdrücklich verlangt.

   Kein "gap" hier: der Kartenfuß ist ein Blockelement, gap bliebe wirkungslos
   und läse sich später wie der eigentliche Hebel. Und "padding" statt
   "padding-block", damit die Füllung quadratisch bleibt. */
@media (min-width: 1024px) {
  .public-page .aligned-hero--feature .blog-feature__media {
    aspect-ratio: 5 / 2;
  }

  .public-page .aligned-hero--feature .blog-feature__media img {
    object-position: 50% 12%;
  }

  .public-page .aligned-hero--feature .blog-feature__content {
    padding: 20px var(--karten-pad);
  }
}