/* --------------------------------------------------------------------------
   Sektion 6: Karriere
   DYNAMISCH - Query auf CPT 'stelle', posts_per_page 4.
   FALLBACK: wenn keine Stelle offen ist, zeigt das Template statt der
   Liste den Initiativbewerbungs-Block. Siehe .karr__empty.
   Mapping: template-parts/karriere.php
   Laut Projektwissen "Teaser mit Haltung" - deshalb links die Aussage
   mit Zahlen, rechts erst die Stellen.
   -------------------------------------------------------------------------- */
/* Die Panels spannen ueber beide Spalten von .karr__grid. Das ist
   LAYOUTKONTEXT der Startseite und gehoert deshalb nicht in das geteilte
   Bauteil - beim Herausloesen am 28.08.2026 zuerst mit entfernt, gemessen
   schrumpften die Panels dadurch von 592 auf 279 px. */
.karr__panels { grid-column: 1 / -1; }

/* ==========================================================================
   DAS STELLENPANEL STEHT IN components/stellenliste.css.

   .karr__panels, .karr__jobs, .karr__list, .karr__job und deren Kinder teilen
   sich die Regeln dort mit .stpanel auf den Listingseiten. Herausgeloest am
   28.08.2026 - EINE Definition, damit die Startseite und die Listingseiten
   nicht auseinanderlaufen koennen. Die Auszeichnung der Startseite ist
   unveraendert.
   ========================================================================== */
.karr {
  background: var(--bg-page);
  padding-block: var(--sp-sektion);
}

.karr__grid {
  display: grid;
  /* Oben Text und Bild nebeneinander, darunter die Stellen ueber die
     volle Breite. Drei Spalten waren zu gequetscht - die Stellenkarte
     braucht Raum, weil dort mehrere Zeilen stehen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  align-items: start;
}
/* Zwei getrennte Panels: Stellen und Ausbildung sind unterschiedliche
   Zielgruppen - Berufserfahrene und Schulabgaenger lesen verschieden. */


/* Bildplatz. Im Theme ACF-Bildfeld, Format 4:3.
   Motiv: Mitarbeitende bei der Arbeit - keine leere Halle, keine
   Stockfotos. Bewerber erkennen Stockfotos. */
.karr__media {
  position: relative;
  /* 4:3 waere hier 437px hoch gegen 279px Text - zu dominant.
     Bandformat haelt die Reihe ausgeglichen. */
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-platzhalter);
}
.karr__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-media);
}
.karr__media:hover img { transform: scale(var(--zoom-media)); }

@media (max-width: 60rem) {
  .karr__grid { grid-template-columns: 1fr; }
  /* Gestapelt braucht das Bild ein Bandformat, sonst wird es zu hoch. */
  .karr__media { aspect-ratio: auto; height: clamp(13rem, 42vw, 18rem); }
}

/* --- linke Spalte: Haltung ------------------------------------------- */
.karr__label {
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin: 0 0 var(--sp-4);
}

/* --- rechte Spalte: Stellen ------------------------------------------ */
/* Kante zurueck, aus demselben Grund wie bei den Produktkarten: auf weissem
   Grund traegt der Schatten allein die Abgrenzung nicht. */


/* Flex-Kinder schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite.
   Ohne das laufen lange Stellentitel bei 320px aus dem Viewport. */


/* Weiterweg unter dem Lead. Gleiche Sprache wie .prod__all und .rez__all:
   Pfeil als Markierung, Farbwechsel beim Hover, Pfeil wandert.
   ANMERKUNG: das ist inzwischen die siebte fast gleiche Textlink-Regel im
   Dokument (.prod__all, .rez__all, .herst__all, .hero__more, .karr__more,
   .b2b__cta und diese). Beim Ueberfuehren ins Theme gehoert das in EINE
   Klasse; hier bleibt es bewusst getrennt, damit die Sektionen einzeln
   anpassbar bleiben. */
.karr__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  margin-top: var(--sp-5);
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.karr__link:hover,
.karr__link:focus-visible { color: var(--toem-gold); }
.karr__link svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  flex: 0 0 auto;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.karr__link:hover svg,
.karr__link:focus-visible svg { transform: translateX(3px); }

.karr__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  /* KEINE TRENNLINIE MEHR. Sie gehoerte in das Panel, das die Stellen frueher
     umschloss - seit dem 28.08.2026 stehen sie als Karten, und zwischen Karten
     trennt der Abstand. */
  margin-top: var(--sp-2);
  width: 100%;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.karr__more:hover,
.karr__more:focus-visible { color: var(--toem-gold); }
/* PFEIL BEWEGT SICH BEIM HOVER, nachgezogen am 10.09.2026. Kundenhinweis zur
   Aktionskarte: "Bei dieser Card sollte sich der Pfeil beim Hover auch bewegen
   wie bei den anderen Cards!" Nachgemessen ueber alle Pfeile des Projekts
   waren es zwei, die stillstanden: .prod__action und .karr__more. Alle
   uebrigen zehn (.hero__more, .prod__all, .rez__all, .herst__all,
   .karr__link, .stkarte, .blkarte, .usp__item, .prod__card, .rez__card)
   ruecken schon 3 px nach rechts. Dieselbe Strecke, dieselbe Kurve. */
.karr__more svg { transition: transform var(--dur-hover) var(--ease-hover); }
.karr__more:hover svg,
.karr__more:focus-visible svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .karr__more svg { transition: none; }
  .karr__more:hover svg,
  .karr__more:focus-visible svg { transform: none; }
}
.karr__more svg { width: var(--zeichen-inline); height: var(--zeichen-inline); }

/* Fallback, wenn keine Stelle offen ist. Im Template per
   if (!$stellen->have_posts()) statt der Liste ausgeben. */
.karr__empty p {
  font-size: var(--fs-300);
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}