/* Stellenheimat — gemeinsames Stylesheet für Startseite, Stellenübersicht, Stellenseiten
   und Rechtstexte. Farben und Regeln nach ../brand-guide.md.

   Schrift: Source Sans 3 vom EIGENEN Server (assets/fonts/, SIL Open Font License). Kein
   Google-CDN — Google Fonts per CDN übertragen die IP der Besucher in die USA und sind in
   Deutschland ein reales Abmahnrisiko. Der System-Stack dahinter bleibt als Rückfall.

   Die Startseite entsteht aus ../startseite.vorlage.html (generate-stellen.mjs setzt die
   Stellenkarten ein). Übersicht und Stellenseiten erzeugt derselbe Generator. */

@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-latin-wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --petrol: #1b3a4b;
  --terrakotta: #c86b3c;
  --terrakotta-dunkel: #a8552c;
  --creme: #f5efe6;
  --creme-hell: #fdfaf6;
  --text: #1b3a4b;
  --text-leise: #4a6270;
  --linie: #e0d6c8;
  --breite: 1100px;
  --rand: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Sicherheitsnetz: Ein einziges nicht umbrechendes Wort (eine lange URL in den Hinweisen
   des Arbeitgebers, 2026-09-27 Landeskirche Hannovers) machte die Seite auf dem Handy
   breiter als den Bildschirm — und die feste Bewerben-Leiste wuchs mit, weil sie an der
   Seitenbreite haengt. `clip` statt `hidden`, damit kein Scroll-Container entsteht. */
html,
body {
  overflow-x: clip;
}

/* Sonst schlägt display:flex/grid einer Klasse das hidden-Attribut. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--creme-hell);
  color: var(--text);
  font-family: "Source Sans 3", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.18;
  margin: 0 0 0.55em;
  font-weight: 650;
  letter-spacing: -0.012em;
}
h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
}
h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}
h3 {
  font-size: 1.12rem;
}
p {
  margin: 0 0 1em;
}
a {
  color: var(--terrakotta-dunkel);
}

.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}

section {
  padding-block: 80px;
}

.etikett {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terrakotta-dunkel);
  margin-bottom: 12px;
}

.zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Einleitungstext unter einer Überschrift (Stellenübersicht) */
.einleitung {
  max-width: 660px;
  color: var(--text-leise);
  margin-bottom: 40px;
}

.knopf {
  display: inline-block;
  background: var(--terrakotta);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  padding: 14px 30px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.knopf:hover {
  background: var(--terrakotta-dunkel);
}
.knopf.hell {
  background: var(--creme);
  color: var(--petrol);
}
.knopf.hell:hover {
  background: #fff;
}

/* ================================================================== Kopf und Fuß */

.kopf {
  background: var(--creme-hell);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}
.markenlink {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--petrol);
}
.kopf img {
  width: 40px;
  height: 40px;
  display: block;
}
.marke {
  font-size: 1.3rem;
  font-weight: 650;
  color: var(--petrol);
}
/* Bewerberweg kräftig, Arbeitgeber leise daneben. */
.kopf-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.kopf-link {
  font-size: 0.95rem;
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
}
.kopf-link:hover {
  color: var(--petrol);
  text-decoration: underline;
}
.kopf-link.stellen-link {
  color: var(--petrol);
  font-weight: 650;
}

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 28px;
  font-size: 0.92rem;
  color: var(--text-leise);
}
.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.fuss a {
  color: var(--text-leise);
}
.fuss .rechts {
  margin-left: auto;
}

/* Ortsmarke als SVG statt 📍 — gleiche Form wie im Logo, auf jedem Gerät gleich.
   Größe, Farbe, Ausrichtung und Abstand stehen DIREKT im SVG (generate-stellen.mjs),
   damit die Marke auch mit einer veralteten style.css im Browser-Cache richtig sitzt.
   Deshalb kein Flex: vertical-align im SVG wirkt nur im normalen Textfluss. */
.ort {
  white-space: nowrap;
}
.ortsmarke {
  width: 1em;
  height: 1em;
  flex: none;
}
.ortsmarke path {
  fill: var(--terrakotta);
}
.ortsmarke circle {
  fill: var(--creme-hell);
}

/* ======================================================================= Startseite */

/* --- 1 Hero ---
   Bild vollflächig, Text links darüber. Die Überlagerung ist leicht (rechts 0,12),
   damit die Figuren sichtbar bleiben; links dicht genug für weißen Text. */
.hero {
  position: relative;
  padding: 0;
  background: var(--petrol);
  color: var(--creme);
  overflow: hidden;
}
.hero img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 58, 75, 0.9) 0%,
    rgba(27, 58, 75, 0.72) 38%,
    rgba(27, 58, 75, 0.3) 62%,
    rgba(27, 58, 75, 0.12) 100%
  );
}
.hero .inhalt {
  position: relative;
  z-index: 2;
  padding-block: 96px 104px;
  max-width: 600px;
}
.hero h1 {
  color: #fff;
  max-width: 13em;
}
.hero .lead {
  font-size: 1.2rem;
  color: #efe6da;
  max-width: 30em;
  margin-bottom: 1.7em;
}

/* --- 2 Absender --- */
.absender .zweispalt {
  grid-template-columns: 0.8fr 1.2fr;
}
.absender p {
  color: var(--text-leise);
  max-width: 34em;
}
.feedkarte {
  margin: 0;
  justify-self: center;
  width: min(100%, 340px);
}
.feedkarte > div {
  background: #fff;
}
.feedkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  line-height: 1.25;
}
.feedkopf img {
  border-radius: 50%;
  border: 1px solid var(--linie);
  display: block;
}
.feedkopf strong {
  display: block;
  font-size: 0.95rem;
}
.feedkopf span {
  font-size: 0.8rem;
  color: #7a8a93;
}
/* Das Markenbild als Anzeigenmotiv mit Platzhalterbalken — bewusst ohne echte Stelle,
   damit niemand eine fremde Anzeige für seine hält. Das Bild ist am unteren Rand
   verankert und nur auf 125 % gezogen: So nimmt der dunkle Boden das untere Drittel ein,
   und die Balken liegen darauf statt über den Beinen der Figuren. */
.feedbild {
  aspect-ratio: 5 / 4;
  background: var(--petrol) url("assets/hero.jpg") 50% 100% / auto 125% no-repeat !important;
  border-inline: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px 14px;
}
.balken {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: var(--petrol);
  opacity: 0.14;
}
.feedbild .balken {
  background: var(--creme);
  opacity: 0.9;
}
.b1 {
  width: 74%;
  height: 16px;
}
.feedbild .b2 {
  width: 52%;
  opacity: 0.6;
}
.feedbild .b3 {
  width: 30%;
  background: var(--terrakotta);
  opacity: 1;
}
.feedfuss {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-top: none;
  border-radius: 0 0 12px 12px;
}
.b4 {
  flex: 1;
}
.feedknopf {
  font-size: 0.8rem;
  font-weight: 650;
  background: #e9ecee;
  color: var(--petrol);
  padding: 6px 12px;
  border-radius: 6px;
}
.feedkarte figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-leise);
  text-align: center;
}

/* --- 3 Stellen (Karten schreibt generate-stellen.mjs) --- */
.stellen {
  background: var(--creme);
}
.abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 28px;
}
.abschnittskopf h2 {
  margin: 0;
}
.textlink {
  font-weight: 650;
  text-decoration: none;
}
.textlink:hover {
  text-decoration: underline;
}
.karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.karte-stelle {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 24px 24px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.karte-stelle:hover {
  border-color: var(--terrakotta);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 58, 75, 0.08);
}
.karte-stelle .bereich {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terrakotta-dunkel);
  margin-bottom: 10px;
}
.karte-stelle h3 {
  font-size: 1.22rem;
  margin-bottom: 0.3em;
}
.karte-stelle .firma {
  font-weight: 600;
  margin: 0 0 2px;
}
.karte-stelle .ort {
  color: var(--text-leise);
  margin: 0 0 16px;
  white-space: normal;
}
.karte-stelle .fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 18px;
  font-size: 0.88rem;
}
.karte-stelle .fakten span {
  background: var(--creme);
  border-radius: 4px;
  padding: 3px 9px;
}
.karte-stelle .mehr {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-weight: 650;
  color: var(--terrakotta-dunkel);
}
.karte-stelle .mehr::after {
  content: " →";
}

.leer {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 28px;
  color: var(--petrol);
}
.leer svg {
  flex: none;
}
.leer p {
  margin: 0;
  color: var(--text-leise);
}
.leer .leer-titel {
  color: var(--text);
  font-weight: 650;
  margin-bottom: 4px;
}

/* --- 4 Ablauf ---
   Die Linie verbindet die Kreise; Station 3 ist Terrakotta, weil dort das Wichtigste
   passiert: die Bewerbung, und zwar ohne uns. */
.stationen {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.stationen::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 32px;
  right: calc((100% - 80px) / 3 - 32px);
  height: 2px;
  background: repeating-linear-gradient(to right, var(--linie) 0 8px, transparent 8px 14px);
}
.stationen li {
  position: relative;
}
.station-kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--creme-hell);
  border: 2px solid var(--petrol);
  color: var(--petrol);
  margin-bottom: 18px;
  position: relative;
}
.station-kreis svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ziel .station-kreis {
  background: var(--terrakotta);
  border-color: var(--terrakotta);
  color: #fff;
}
.station-wer {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 6px;
}
.ziel .station-wer {
  color: var(--terrakotta-dunkel);
}
.stationen p {
  color: var(--text-leise);
  margin: 0;
}

/* --- 5 Zusagen --- */
.zusagen {
  background: var(--creme);
}
.zusagen-liste {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.zusagen-liste svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--petrol);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}
.zusagen-liste h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35em;
}
.zusagen-liste p {
  color: var(--text-leise);
  margin: 0;
  font-size: 0.97rem;
}

/* --- 6 Berufe ---
   Petrol-Fläche mit cremefarbenen Ringen trägt Farbe in einen sonst hellen Abschnitt.
   Terrakotta nur für Ortsmarke und eine Stelle (Brand Guide §3). Keine Gebäude. */
.berufe p {
  color: var(--text-leise);
  max-width: 32em;
}
.chips {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.92rem;
}
.umkreis {
  width: min(100%, 380px);
  justify-self: center;
}
.umkreis .flaeche {
  fill: var(--petrol);
}
.umkreis .ring {
  fill: none;
  stroke: var(--creme);
}
.umkreis .r1 {
  stroke-opacity: 0.55;
  stroke-width: 1.5;
}
.umkreis .r2 {
  stroke-opacity: 0.32;
  stroke-width: 1.5;
}
.umkreis .r3 {
  stroke-opacity: 0.22;
  stroke-dasharray: 4 7;
}
.umkreis .punkt {
  fill: var(--creme);
  fill-opacity: 0.9;
}
.umkreis .punkt.leise {
  fill-opacity: 0.4;
}
.umkreis .punkt.akzent {
  fill: var(--terrakotta);
  fill-opacity: 1;
}
.umkreis .pin {
  fill: var(--terrakotta);
}

/* --- 7 Arbeitgeber: am Ende, aber auf Petrol abgesetzt --- */
.arbeitgeber {
  background: var(--petrol);
  color: var(--creme);
  padding-block: 56px;
}
.arbeitgeber .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: center;
}
.arbeitgeber .etikett {
  color: #e59a6f;
}
.arbeitgeber h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}
.arbeitgeber p {
  color: #d9cfc2;
  max-width: 36em;
}
.arbeitgeber p:last-child {
  margin-bottom: 0;
}
.arbeitgeber-kontakt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.arbeitgeber .mail {
  color: #fff;
  font-weight: 600;
}

/* ======================================================== Stellenübersicht und -seiten
   (generiert von ../generate-stellen.mjs) — dieselben Variablen, derselbe Knopf. */

/* Übersicht */
.stellenindex,
.stelle {
  padding: 56px 0 88px;
  display: block;
}
.stellenzahl {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terrakotta-dunkel);
  margin-bottom: 20px;
}
.stellenliste-karten {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.stellenkarte a {
  display: block;
  height: 100%;
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--terrakotta);
  border-radius: 6px;
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stellenkarte a:hover {
  background: var(--creme);
  border-color: var(--terrakotta);
}
.stellenkarte h2 {
  font-size: 1.2rem;
  margin: 0 0 0.35em;
  color: var(--petrol);
}
.stellenkarte .firma {
  margin: 0 0 0.6em;
  font-weight: 600;
  color: var(--text);
}
.stellenkarte .orte {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-leise);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
/* Leerzustand der Übersicht */
.leerhinweis {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--terrakotta);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 0;
  color: var(--text-leise);
}
.leerhinweis strong {
  color: var(--text);
}
.nachsatz {
  margin-top: 40px;
  margin-bottom: 0;
}
/* Arbeitgeber-Hinweis der Übersicht: leise, abgesetzt, eigener Satz. */
.arbeitgeberzeile {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-size: 0.95rem;
  color: var(--text-leise);
}
.arbeitgeberzeile strong {
  color: var(--text);
}

/* Einzelne Stelle */
.stelle .wrap {
  max-width: 760px;
}
.zurueck {
  font-size: 0.95rem;
  margin-bottom: 28px;
}
.zurueck a {
  text-decoration: none;
}
.stellenkopf {
  border-bottom: 1px solid var(--linie);
  padding-bottom: 28px;
  margin-bottom: 8px;
}
.stellenkopf h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: 0.4em;
}
/* Feste Höhe statt max-height: Arbeitgeberlogos kommen als Upload in jedem Format —
   quadratisch, breit, hoch, mit und ohne Rand. Mit `max-` blieb ein kleines Logo klein
   und ein großes schöpfte den Rahmen aus, jede Stellenseite sah anders aus.

   64 px seit 2026-09-16 (vorher 44). Anlass war das Logo der Stadt Tamm: Arbeitgeberlogos
   kommen fast immer quadratisch bis leicht querformatig, und bei 44 px Höhe blieb davon
   ein 72 px breiter Fleck übrig, den niemand als Absender erkennt. Die Grenze nach oben
   zieht der Jobtitel — ab etwa 80 px konkurriert das Logo mit ihm, und es bleibt dabei:
   das Logo belegt hier, wer sucht, es ist nicht der Held der Seite.

   `object-fit: contain` skaliert das Motiv in die Box, ohne es zu verzerren; die
   max-width deckelt extrem breite Wortmarken, die sonst halbe Zeilen füllen. Sie wächst
   mit der Höhe mit (180 → 260), sonst würde eine 8:1-Wortmarke bei 32 px kleben,
   während quadratische Logos auf 64 px springen. */
.firmenlogo {
  height: 64px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 20px;
}
/* Helle Logos (weiss auf transparent) verschwinden auf Creme. Sie bekommen eine Fläche in
   Petrol, dem Dunkelton der Marke — nicht in der Firmenfarbe: Die Fläche gehört zur Seite,
   nicht zum Arbeitgeber, und sieht so auf jeder Stellenseite gleich aus.

   `content-box`, damit das Logo selbst bei 64 px bleibt und die Fläche nach außen wächst;
   mit dem globalen `border-box` schrumpfte das Motiv um den Innenabstand auf 44 px.
   Das Flag setzt der Generator aus `logo_is_light` (vom Wizard beim Hochladen gemessen). */
.firmenlogo.auf-flaeche {
  box-sizing: content-box;
  background: var(--petrol);
  padding: 12px 16px;
  border-radius: 10px;
}
.stellenmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  color: var(--text-leise);
  font-size: 1rem;
  margin-bottom: 1.6em;
}
.stellenmeta .firma {
  font-weight: 600;
  color: var(--text);
}
.bewerbenzeile {
  margin: 0;
}
.bewerbenzeile.unten {
  margin-top: 40px;
}
/* Leiser Verweis unter dem oberen Knopf: auf die Hinweise zur Bewerbung und die
   Originalausschreibung. Klein und in Textfarbe — der Knopf bleibt das einzige Ziel,
   das nach Handlung aussieht. */
.bewerbenverweis {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--text-leise);
}
.bewerbenverweis a,
.bewerbung a {
  color: var(--petrol);
}

/* Bewerbungsweg per E-Mail, unter dem oberen Knopf. Dieselbe leise Stufe wie der Verweis —
   Handlungsaufforderung bleibt allein der Knopf. Drei Teile mit Luft dazwischen: ein kurzer
   Satz, die Adresse als eigene Zeile im Rahmen (Kopieren rechts daneben, nie umgebrochen),
   der Hinweis fuer In-App-Browser. Die erste Fassung stand als Fliesstext in einem Absatz;
   auf dem S24 (412 px) brach der Satz nach einem Wort um und der Kopieren-Knopf rutschte
   mit schiefem Einzug in eine eigene Zeile. */
.mailinfo,
.mailhaenger {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-leise);
}
.mailadresszeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 6px 6px 6px 14px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.35;
}
.mailadresse {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kopieren {
  flex: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--petrol);
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0 14px;
  cursor: pointer;
  /* Fingergerecht auf dem Handy. */
  min-height: 40px;
}
.kopieren:hover {
  border-color: var(--petrol);
}

/* Am Desktop steht der Knopf nicht in voller Breite — die Adresszeile soll ihm nicht ueber
   die ganze Spalte davonlaufen. */
@media (min-width: 821px) {
  .mailadresszeile {
    max-width: 440px;
  }
}

/* Feste Bewerben-Leiste: nur auf schmalen Bildschirmen, siehe Responsive-Block. Ohne
   JavaScript traegt sie `hidden` und bleibt weg. */
.bewerbenleiste {
  display: none;
}

/* Hinweise des Arbeitgebers zur Bewerbung. Bewusst ohne Terrakotta-Kante: die gehoert dem
   Stellenheimat-Hinweis darunter, und die beiden Kaesten sollen nicht verwechselt werden. */
.bewerbung {
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 40px 0 0;
  scroll-margin-top: 90px;
}
.bewerbung h2 {
  font-size: 1.05rem;
  margin: 0 0 0.6em;
}
.bewerbung p {
  margin: 0 0 0.8em;
  font-size: 0.97rem;
  overflow-wrap: anywhere;
}
/* Telefonnummern bleiben zusammen — "0511/1241-797" brach sonst am Bindestrich. */
.bewerbung .tel {
  white-space: nowrap;
}
.bewerbung p:last-child {
  margin-bottom: 0;
}

/* Der Fließtext ist zeichengleich mit dem JSON-LD — Google verlangt sichtbare
   Entsprechung. Deshalb steht das ✅ im Listeneintrag und nicht im CSS. */
.stellentext h2 {
  font-size: 1.15rem;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
/* Aufgaben und Anforderungen: normale Aufzählung. Ohne Marker lasen sich die
   Punkte wie Fließtext und die Gliederung ging verloren. Das Zeichen ist ein
   typografischer Punkt, kein Emoji — die Zwei-Symbol-Regel bleibt unberührt. */
.stellentext ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0 0 1.2em;
}
/* Die Benefit-Liste trägt ihr Symbol im Text und braucht keinen zweiten Marker. */
.stellentext ul.vorteile {
  list-style: none;
  padding-left: 0;
}
.stellentext li {
  margin-bottom: 0.45em;
}

.hinweis {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--terrakotta);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 40px 0 0;
}
.hinweis h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5em;
}
.hinweis p {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.97rem;
}

.eckdaten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--linie);
  font-size: 0.97rem;
}
.eckdaten dt {
  padding: 10px 24px 10px 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text-leise);
}
.eckdaten dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  overflow-wrap: anywhere;
}
.eckdaten .ort {
  white-space: normal;
}

/* ===================================================================== Rechtstexte */

.rechtstext {
  max-width: 720px;
  padding: 64px 24px 88px;
  margin: 0 auto;
}
.rechtstext h2 {
  font-size: 1.15rem;
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type {
  border-top: none;
  padding-top: 0;
}
.rechtstext address {
  font-style: normal;
  line-height: 1.9;
  color: var(--text-leise);
}

/* ====================================================================== Responsive */

/* Schmale Handys: Logo, Wortmarke und zwei Links passen unter 480 px nicht in eine
   Zeile (bei 390 px lief die Seite 16 px quer). Der Bewerberweg bleibt, der
   Arbeitgeber-Link fällt weg — der Arbeitgeberblock am Seitenende bleibt erreichbar. */
@media (max-width: 480px) {
  .kopf-link:not(.stellen-link) {
    display: none;
  }
}

@media (max-width: 980px) {
  .zusagen-liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  body {
    font-size: 18px;
  }
  section {
    padding-block: 56px;
  }
  .zweispalt,
  .absender .zweispalt {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .kopf-link {
    font-size: 0.9rem;
  }
  .kopf-nav {
    gap: 16px;
  }
  .fuss .rechts {
    margin-left: 0;
  }

  /* Hero: Das Bild ist 2,36:1 — als Vollfläche skaliert es nach der Höhe, und die
     Figuren landen hinter dem Text. Deshalb auf dem Handy: Bild in eigener Breite unten
     verankert (170 % der Breite, damit die Gruppe groß genug bleibt), der obere Rand
     läuft weich in die Petrolfläche aus. */
  .hero .inhalt {
    padding-block: 48px 236px;
  }
  .hero img.bg {
    inset: auto auto 0 50%;
    width: 170%;
    height: auto;
    transform: translateX(-50%);
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
  }
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(27, 58, 75, 0.35) 0%,
      rgba(27, 58, 75, 0.2) 60%,
      rgba(27, 58, 75, 0.05) 100%
    );
  }
  .hero .knopf {
    display: block;
    text-align: center;
  }

  /* Die Beispielanzeige steht auf dem Handy unter dem Text, nicht davor. */
  .absender .feedkarte {
    order: 2;
    width: min(100%, 300px);
  }

  .leer {
    flex-direction: column;
    align-items: flex-start;
  }

  .stationen {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .stationen::before {
    top: 32px;
    bottom: 32px;
    left: 31px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(to bottom, var(--linie) 0 8px, transparent 8px 14px);
  }
  .stationen li {
    padding-left: 88px;
    min-height: 64px;
  }
  .station-kreis {
    position: absolute;
    left: 0;
    top: 0;
  }

  .zusagen-liste {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .zusagen-liste li {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 16px;
  }
  .zusagen-liste svg {
    grid-row: span 2;
    margin: 2px 0 0;
  }

  /* Umkreis kompakt und VOR der Überschrift, damit der Abschnitt mit Farbe einsetzt
     statt mit einer leeren Fläche zu enden. */
  .berufe .zweispalt {
    gap: 28px;
  }
  .umkreis {
    width: min(100%, 210px);
    order: -1;
  }

  .arbeitgeber .wrap {
    grid-template-columns: 1fr;
  }
  .arbeitgeber-kontakt {
    align-items: stretch;
  }
  .arbeitgeber .knopf,
  .arbeitgeber .mail {
    text-align: center;
  }

  /* Übersicht und Stellenseite */
  .stellenliste-karten {
    grid-template-columns: 1fr;
  }
  .stellenindex,
  .stelle {
    padding: 40px 0 64px;
  }
  .eckdaten {
    grid-template-columns: 1fr;
  }
  .eckdaten dt {
    padding: 12px 0 0;
    border-bottom: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .eckdaten dd {
    padding: 2px 0 12px;
  }
  .bewerbenzeile .knopf {
    display: block;
    text-align: center;
  }
  /* `:not([hidden])`, weil `display` sonst das hidden-Attribut ueberstimmt. Gleitet von
     unten herein. env(safe-area-inset-bottom) ist heute 0 (kein viewport-fit=cover),
     dann haelt iOS den Home-Balken selbst frei; es greift erst, falls das je kommt. */
  .bewerbenleiste:not([hidden]) {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--creme-hell);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -2px 10px rgba(27, 58, 75, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .bewerbenleiste.sichtbar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  .bewerbenleiste .knopf {
    display: block;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bewerbenleiste:not([hidden]),
  .bewerbenleiste.sichtbar {
    transition: none;
  }
}