/* ============================================================
   jobs.css — Der Bauplatz

   Die Referenzseite zeigt ein Verzeichnis und daneben eine Sicht.
   Hier wäre dasselbe eine Wiederholung. Stellen sind keine Werke,
   die man ansieht — es sind Orte, an denen man steht. Also ein
   Lageplan: die Zeichnung mit nummerierten Standorten, darunter
   die Legende, darunter das Blatt zur gewählten Stelle.

   Genau so ist ein Bauplan aufgebaut, und genau so liest ihn
   jeder, der auf dem Bau arbeitet.

   Hero, Krume und Fuss kommen aus leistung.css — sie werden hier
   NICHT nachgebaut, sonst laufen sie irgendwann auseinander.
   ============================================================ */

/* ============================================================
   DER HERO

   leistung.css bringt den Schleier für Fotomotive mit: ein weicher
   Radialverlauf, halbe Stärke, weil auf Papier schon ohne ihn
   9,4:1 gemessen wurden. Der Bauplatz ist kein Foto — er setzt
   Graben, Container und Fahrmischer als dunkle Körper genau
   dorthin, wo der Text steht. Gemessen: Überschrift 2,58:1,
   Claim 1,59:1. Beides unter dem Mindestmass.

   Deshalb hier ein zusätzlicher Verlauf von links. Er ersetzt den
   Radialverlauf nicht, er legt sich davor. Die Zeichnung rückt
   ausserdem im Hero um 11 % nach rechts (js/fx/bauplatz.js) —
   je weniger unter der Schrift liegt, desto weniger muss der
   Schleier ausbleichen.
   ============================================================ */
.lhero .hero-fx[data-fx="bauplatz"] ~ .lhero-scrim {
  background:
    /* Zurückgenommen: mit 0,97/0,93 lag die Überschrift bei 18:1 —
       das Dreifache des Nötigen, und die linke Hälfte der
       Zeichnung war weg. Diese Werte lassen den Container wieder
       durchscheinen und halten trotzdem allen Abstand. */
    linear-gradient(96deg,
      rgba(250, 248, 244, 0.88) 0%,
      rgba(250, 248, 244, 0.76) 30%,
      rgba(250, 248, 244, 0.44) 48%,
      rgba(250, 248, 244, 0.12) 62%,
      transparent 74%),
    radial-gradient(58% 62% at 26% 74%,
      rgba(250, 248, 244, 0.48) 0%, rgba(250, 248, 244, 0.28) 46%, transparent 78%);
}

/* ============================================================
   DER PLAN
   ============================================================ */
/* ============================================================
   DER ABSCHNITTSKOPF — zweispaltig

   Auf allen anderen Seiten steht der einleitende Satz unter der
   Überschrift. Hier nicht: gestapelt beanspruchte dieser Kopf
   185 px plus 54 px Abstand — 239 px für ein Label, drei Wörter
   und einen Satz. Gleichzeitig war die Spur rechts unten zu 96 %
   gefüllt (447 von 463 px). Fett oben, Mangel unten.

   Nebeneinander gesetzt gibt der Kopf rund 90 px ab, die als Luft
   nach unten gehen. Wortlaut und Schriftgrössen sind unverändert
   — es steht nur anders da.
   ============================================================ */
/* WICHTIG: dieselbe Spaltenteilung und derselbe Spalt wie
   .bp-reihe darunter. Vorher stand der Kopf auf 52/48 und der
   Inhalt auf 56/44 — die linke Kante des Satzes traf damit auf
   nichts, er begann und endete im Nirgendwo. Jetzt steht er
   millimetergenau über der Stellenliste. */
.bp-zone .sec-head.bp-kopf {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  column-gap: clamp(24px, 3vw, 52px);
  align-items: start;
  margin-bottom: clamp(30px, 4.2vh, 44px);
}
.bp-kopf .mono { grid-column: 1; grid-row: 1; }
.bp-kopf h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
/* Oberkante an Oberkante mit „OFFENE STELLEN", nicht Grundlinie an
   Grundlinie: die Versalien der Auszeichnungsschrift haben eine
   ganz andere Höhe als der Fliesstext, unten ausgerichtet schwebte
   der Satz neben dem Block. Das Polster hebt den Unterschied der
   beiden Oberlängen auf. */
.bp-kopf .lead {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding-top: 0.42em;
  max-width: 46ch;
}

/* Plan links, Spur rechts. Das spart gegenüber der ersten Fassung
   eine ganze Bildschirmreihe: dort stand die Legende als 3x2-Raster
   UNTER dem Plan, mit drei Zeilen je Eintrag.

   Die Aufteilung ging über zwei Anläufe. 62/38 (Plan breiter, damit
   er die Luft der Spur trägt) war falsch gedacht: die Spur wuchs
   mit der Luft genauso mit und blieb bei 100 Prozent Füllung — nur
   war jetzt SIE es, die die Reihenhöhe bestimmte, und der Abschnitt
   wurde 22 px länger statt kürzer.

   Richtig herum ist es, der Spur Breite zu geben: der Satz zur
   Stelle bricht dann in zwei statt drei Zeilen um und die langen
   Bezeichnungen in eine statt zwei. Die Spur wird von selbst
   kürzer — und mit ihr die Reihe.

   Jetzt 44/56. Die Stellen sind der Grund, warum jemand hier ist,
   und Karten brauchen mehr Platz als Textzeilen — Rahmen,
   Innenabstand, Abstand zur nächsten. Bei 38/62 wurde der Plan
   aber auf 421 px gedrückt; die Nummern kollidierten zwar nicht
   (18 px Luft blieben), die Zeichnung verlor aber ihr Detail.
   44/56 gibt ihm 480 px zurück und kostet die Karten nur 16. */
.bp-reihe {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-bottom: clamp(30px, 4.2vh, 46px);
}

.bp {
  position: relative;
  /* Das Verhältnis stammt aus der Projektion selbst: der Platz
     misst (26+18)·cos30 = 38,1 Einheiten in der Breite und
     (26+18)·sin30 + 5,4 = 27,4 in der Höhe. 38,1/27,4 = 1,39.

     Begrenzt wird die BREITE, nicht die Höhe. Mit `max-height`
     schrumpfte nur der Kasten, die Zeichnung darin passte sich
     der kleineren Höhe an — und links und rechts blieb Luft, weil
     das Canvas seine Breite behielt. */
  aspect-ratio: 1.39;
  width: 100%;
  /* Die Spur daneben ist höher als der Plan. Oben ausgerichtet
     bliebe unter der Zeichnung ein Loch — mittig steht sie ruhig
     in ihrer Spalte. */
  align-self: center;
  /* In der zweispaltigen Reihe gibt die Spalte die Breite vor. Die
     Deckelung greift nur, wenn der Plan allein steht (schmale
     Fenster) — sonst würde er dort die halbe Seite füllen. */
  max-width: 100%;
  margin-inline: auto;
  isolation: isolate;
}
/* fx-core hängt sein Canvas direkt in den Wirt — hier also in .bp.
   Es MUSS herausgelöst werden: als Element im Fluss zählt es zur
   Inhaltshöhe, und weil fx-core ihm seine Grösse als feste
   Bildpunkte einträgt, hielt es den Kasten bei jeder Verkleinerung
   auf der alten Höhe offen. Gemessen bei 1100 px Fenster: 536×447
   statt 536×386 — das Seitenverhältnis war ausgehebelt und die
   Zeichnung darin verzerrt.
   (Die Regeln standen vorher auf einer Klasse .bp-riss, die es im
   Markup gar nicht gibt — sie liefen ins Leere.) */
.bp > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* fx-core hängt das Canvas ans ENDE des Wirts, also hinter
     .bp-marken. Solange es im Fluss lag, gewannen die positionierten
     Nummern von allein. Positioniert und ohne Stapelwert entscheidet
     die DOM-Reihenfolge — und das Canvas übermalte sie. */
  z-index: 1;
}

/* --- Die Marken auf dem Plan -------------------------------
   Der Canvas zeichnet Ring und Faden, hier steht die Nummer.
   Ein Canvas kennt keine Tastatur und keinen Screenreader; ein
   Bewerber muss beides benutzen können. Deshalb sind die Marken
   echte Knöpfe, die js/stellen.js über den Faden setzt. */
.bp-marken { position: absolute; inset: 0; z-index: 2; }
.bp-marke {
  position: absolute;
  /* Wird von js/stellen.js über --mx/--my gesetzt */
  left: var(--mx, 50%);
  top: var(--my, 50%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: var(--grund);
  color: var(--blue-text);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  cursor: pointer;
  /* Bis der Bauplatz vermessen ist, kennt niemand die Standorte.
     Sichtbar hiesse: sechs Nummern übereinander in der Mitte. */
  visibility: hidden;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
/* Die Nummer ist 30 px gross, auf dem Handy 26 — beides zu klein
   für einen Finger. Die Trefferfläche wird deshalb unsichtbar auf
   44 px aufgezogen, ohne die Zeichnung zu belasten. */
.bp-marke::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.bp-marke:hover,
.bp-marke:focus-visible {
  background: var(--blue);
  color: var(--auf-farbe);
  transform: translate(-50%, -50%) scale(1.12);
}
.bp-marke:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 3px; }
.bp-marke.is-an {
  background: var(--red);
  border-color: var(--red);
  color: var(--auf-farbe);
  transform: translate(-50%, -50%) scale(1.12);
}

/* Ohne Bewegung zeichnet fx-core nichts — dann steht die Karte
   als reine Liste da und die Marken hätten keinen Bezugspunkt. */
@media (prefers-reduced-motion: reduce) {
  .bp { display: none; }
}

/* ============================================================
   DIE STELLEN — Karten

   Dritter Anlauf. Erst ein Raster unter dem Plan (zu lang), dann
   eine schmale Liste daneben: sechs Textzeilen, getrennt nur durch
   Haarlinien, in einer Spalte übereinander. So etwas kann nicht
   herausstechen — es hat keinen Körper, und Haarlinien schieben
   Zeilen aneinander, statt sie zu trennen.

   Jetzt bekommt jede Stelle einen eigenen Körper: Rahmen,
   Innenabstand, echter Abstand zur nächsten. Zwei Spalten mal drei
   Reihen, damit die Bezeichnungen Platz haben.

   Das Spielerische steckt in der Bewegung, nicht in der Form: die
   Karte hebt sich beim Anfahren, die Nummer rückt mit, und an der
   Unterkante fährt das blau-rote Lichtband der Seite von links
   aus — dasselbe, das an jeder Abschnittskante quer läuft, nur auf
   Kartenbreite. Ruhig im Ruhezustand, lebendig unter dem Zeiger.
   ============================================================ */
.bp-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(11px, 1.2vw, 16px);
  align-content: start;
}
.bp-eintrag {
  position: relative;
  display: grid;
  /* Nummer, Bezeichnung, Ort — die Bezeichnung nimmt den Rest, so
     stehen die Orte aller Karten einer Reihe auf einer Linie. */
  grid-template-rows: auto 1fr auto;
  gap: 9px;
  padding: clamp(15px, 1.5vw, 21px);
  background: var(--grund);
  border: 1px solid var(--grey-line-2);
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              border-color .3s, box-shadow .3s;
}
/* Das Lichtband an der Unterkante */
.bp-eintrag::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-lift) 0%, var(--red) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.bp-eintrag:hover {
  transform: translateY(-3px);
  border-color: var(--grey-line);
  box-shadow: 0 12px 28px rgba(10, 14, 24, 0.08);
}
.bp-eintrag:hover::after,
.bp-eintrag.is-an::after { transform: scaleX(1); }
.bp-eintrag:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 2px; }
.bp-eintrag.is-an { border-color: var(--blue); }

.bp-eintrag .nr {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-text);
  transition: color .25s, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.bp-eintrag:hover .nr { transform: translateX(3px); }
.bp-eintrag.is-an .nr { color: var(--red); }
.bp-eintrag .was {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color .25s;
  /* NICHT `hyphens: auto`. Der Trennalgorithmus zerlegte
     „STRASSENBAUER" zu „STRASSENBAU-ER" — richtig wäre
     „Stra-ßen-bau-er". Diese Zeilen brechen an Leerzeichen und
     Schrägstrichen, das genügt; break-word bleibt als Notnagel
     für den Fall, dass eine Bezeichnung wirklich breiter ist als
     ihre Spalte. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.bp-eintrag:hover .was,
.bp-eintrag.is-an .was { color: var(--tinte); }
/* Der Ort sitzt am Fuss der Karte, abgesetzt durch einen kurzen
   Strich — er beantwortet „wo auf dem Plan", nicht „was". */
.bp-eintrag .wo {
  position: relative;
  padding-top: 11px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .25s;
}
.bp-eintrag .wo::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 18px; height: 1px;
  background: var(--grey-line-2);
  transition: width .3s cubic-bezier(.22, .61, .36, 1), background-color .25s;
}
.bp-eintrag:hover .wo::before { width: 30px; }
.bp-eintrag.is-an .wo::before { width: 30px; background: var(--red); }

/* ============================================================
   DAS BLATT ZUR GEWÄHLTEN STELLE — volle Breite
   ============================================================ */
.bp-blatt {
  border-top: 1px solid var(--grey-line-2);
  padding-top: clamp(26px, 3.6vh, 40px);
}
/* Die Merkmale folgen der Bezeichnung, sie werden nicht an den
   rechten Rand geschoben: über die volle Breite standen sie sonst
   einen halben Meter neben dem Titel, zu dem sie gehören. */
.bp-blatt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(16px, 2vw, 26px);
  margin-bottom: 12px;
}
.bp-blatt-kopf h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.9vw, 40px);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.bp-merkmale { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-merkmal {
  padding: 5px 11px;
  border: 1px solid var(--grey-line-2);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.bp-merkmal:first-child { border-color: var(--blue); color: var(--blue-text); }
.bp-lead {
  max-width: 62ch;
  margin: 0 0 clamp(22px, 3vh, 32px);
  font-size: 0.98rem;
  color: var(--text-mute);
}

/* Aufgaben / Profil / Wir bieten nebeneinander — drei kurze
   Spalten statt drei langer Kolonnen: dieselben Punkte, ein
   Drittel der Höhe. */
.bp-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin-bottom: clamp(24px, 3.2vh, 36px);
}
.bp-spalte h4 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--grey-line-2);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.bp-spalte ul { list-style: none; margin: 0; padding: 0; }
.bp-spalte li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 12px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-mute);
}
.bp-spalte li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--red);
}
/* In der Spalte „Wir bieten" der Stellen ohne eigene steht je ein
   Schlagwort vor der Erläuterung. Ausgezeichnet ist es in einem
   Blick erfassbar, ohne die Zeile zu lesen. */
.bp-spalte li b { font-weight: 600; color: var(--tinte); }

/* Der Knopf gehört zu allen drei Spalten, nicht zur ersten.
   Linksbündig sah er aus, als hinge er an „Ihre Aufgaben". */
.bp-tat { margin: 0; text-align: center; }

/* Beim Wechsel treten beide Teile neu ein — sonst merkt man auf
   dem Plan, dass man etwas gewählt hat, im Text aber nicht. */
.bp-blatt-leib { animation: bpEin .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes bpEin {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-blatt-leib { animation: none; }
}

/* Der Vorteils-Streifen am Fuss des Abschnitts (.bp-bieten,
   .bp-vorteile, .bp-vorteil) ist entfallen. Er wiederholte fast
   wortgleich, was jetzt als dritte Spalte „Wir bieten" im Band
   steht — und stand dort nur einmal am Seitenende, während die
   Spalte bei jeder einzelnen Stelle mitläuft. */

/* ============================================================
   BEWERBUNG
   Feldnamen, Feldkästen, ein Absender. Der Weg bleibt derselbe
   wie bisher: die Unterlagen gehen per E-Mail.
   ============================================================ */
.bp-form-raster {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}
.bp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.bp-feld { display: flex; flex-direction: column; gap: 6px; }
.bp-feld--voll { grid-column: 1 / -1; }
/* Der Absender ist ein Knopf, kein Balken. Ohne das zieht ihn die
   Spalte auf volle Breite. */
.bp-feld--voll > .btn { align-self: start; }
.bp-feld label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.bp-feld input,
.bp-feld select,
.bp-feld textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.94rem;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--grey-line-2);
  border-radius: 2px;
  transition: border-color .18s, box-shadow .18s;
}
.bp-feld textarea { min-height: 118px; resize: vertical; }
.bp-feld input:focus,
.bp-feld select:focus,
.bp-feld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 70, 168, 0.13);
}
.bp-hinweis {
  grid-column: 1 / -1;
  padding: 13px 15px;
  border: 1px dashed var(--grey-line-2);
  border-radius: 2px;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.bp-hinweis strong { color: var(--text-mute); font-weight: 600; }

/* Unter 1020 px bleibt für Plan UND zwei Kartenspalten nebeneinander
   kein Platz — die Karten wären dann schmaler als 210 px und die
   Bezeichnungen zerfielen in vier Zeilen. Dann untereinander: der
   Plan über die Breite (mit Höhendeckelung, sonst würde er zum
   Turm), die Karten darunter weiterhin zu zweit. */
@media (max-width: 1020px) {
  /* Nebeneinander bliebe für den Satz eine Spalte von unter 300 px
     — dann steht er als schmaler Turm neben der Überschrift. */
  .bp-zone .sec-head.bp-kopf { grid-template-columns: minmax(0, 1fr); }
  .bp-kopf h2 { margin-bottom: 18px; }
  .bp-kopf .lead { grid-column: 1; grid-row: 3; padding-top: 0; max-width: 62ch; }
  .bp-reihe { grid-template-columns: minmax(0, 1fr); }
  .bp { max-width: min(100%, calc(52vh * 1.39)); }
  .bp-form-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .bp-form { grid-template-columns: 1fr; }
  /* Eine Karte je Reihe — zu zweit blieben 150 px je Karte. */
  .bp-karten { grid-template-columns: minmax(0, 1fr); }
  .bp-marke { width: 26px; height: 26px; font-size: 10px; }
  .bp-marke::after { inset: -9px; }
}

/* ---------- Dateiauswahl für den Lebenslauf ------------------
   Der Standardknopf der Browser sieht überall anders aus und
   passt zu nichts. Der Rahmen hier nimmt ihn auf, ohne ihn zu
   ersetzen — ein nachgebauter Knopf waere ohne Not fehleranfaellig. */
.bp-form input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--grey-line-2);
  background: var(--glass);
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--text-mute);
  cursor: pointer;
}
.bp-form input[type="file"]:hover { border-color: var(--blue); }
.bp-form input[type="file"]:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
}
.bp-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 0;
  background: var(--tinte);
  color: var(--auf-farbe);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.bp-form input[type="file"]:hover::file-selector-button { background: var(--blue); }

.bp-dateihinweis {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
}