@import url("tokens.css");

/* Layout aus dem Design System: mobile first, Inhaltsspalte --uv-content-width.
 * border-box global: Buttons und Karten haben Innenabstand und zugleich
 * width/max-width. Ohne den Reset addiert sich das Padding auf die Breite und
 * die Elemente ragen aus ihrem Container heraus. */
*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--uv-white);
  font-family: var(--uv-font);
  color: var(--uv-text-body);
}
a { color: var(--uv-text-primary-01); text-decoration: none; }
a:hover { text-decoration: underline; }
*:focus-visible { outline: 3px solid var(--uv-focus-ring); outline-offset: 2px; }
/* Auf der gruenen Hero-Flaeche waere ein gruener Fokusring unsichtbar - dort weiss. */
.hero *:focus-visible { outline-color: var(--uv-white); }

.wrap {
  max-width: calc(var(--uv-content-width) + 2 * var(--uv-content-gutter));
  margin: 0 auto;
  padding: var(--uv-space-06-24) var(--uv-content-gutter) var(--uv-space-16-64);
}
/* Formular und Textseiten bleiben auch am Desktop eine Lesespalte. */
.wrap--narrow { max-width: calc(var(--uv-content-width-reading) + 2 * var(--uv-content-gutter)); }
.bar { position: sticky; top: 0; z-index: 20; background: var(--uv-white); }
.bar__inner {
  max-width: calc(var(--uv-content-width) + 2 * var(--uv-content-gutter));
  margin: 0 auto; padding: 12px var(--uv-content-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bar__nav { display: flex; align-items: center; gap: 20px; }
.bar__link { font-size: var(--uv-nav-main-size); line-height: var(--uv-nav-main-lh); color: var(--uv-text-body); }
.bar__link--active { font-weight: var(--uv-fw-bold); color: var(--uv-text-primary-01); }
.logo { height: var(--uv-size-sm); width: auto; display: block; }

/* Footer-Logo: .foot__inner ist ein Spalten-Flex und streckt seine Kinder
 * standardmaessig auf volle Breite (align-items: stretch). Ohne align-self und
 * flex-basis auto zieht das die Grafik in die Breite, waehrend die Hoehe steht.
 * Hoehe 28px wie im Prototyp. */
.foot__logo {
  height: 28px;
  width: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  display: block;
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--uv-background-primary);
  border-radius: var(--uv-radius-xs);
  padding: var(--uv-space-06-24);
  margin-bottom: var(--uv-space-06-24);
  text-align: right;
}

/* Pfeil als Wasserzeichen. Eigene Ebene statt background-image auf
 * .hero, damit die Deckkraft nur das Bild trifft und nicht den Text darauf.
 * Die Deckkraft ist bewusst niedrig: weisser Text auf gruenem Grund muss
 * 4,5:1 halten (CLAUDE.md Abschnitt 6). */
.hero::after {
  content: "";
  position: absolute;
  /* Pfeil nach links gerueckt und dort um ~10% seiner sichtbaren Breite ueber
   * den linken Rand geschnitten (der Hero hat overflow:hidden). Die Ebene hat
   * das Pfeilformat (4:3) bei voller Herohoehe. Die PNG hat rund 15% leeren
   * Rand links; translateX muss diesen Rand (15%) plus ~7% der Bildbreite
   * ueberspringen, damit ~10% der sichtbaren Schlaufe abgeschnitten werden. */
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
  background: url("../logos/pfeil-negativ.png") no-repeat left center;
  /* Box ist 4:3 wie der Pfeil, daher fuellt 100% 100% ihn verzerrungsfrei. */
  background-size: 100% 100%;
  transform: translateX(-22%);
  /* Der Pfeil ist blassgruen; als weisse Silhouette (wie das fruehere
   * Negativ-Logo) hebt er sich vom gruenen Grund ab. Deckkraft niedrig, damit
   * der weisse Text darueber lesbar bleibt (CLAUDE.md Abschnitt 6). */
  filter: brightness(0) invert(1);
  opacity: 0.42;
  /* Ueber den Inhalten, damit Button und andere Elemente den Pfeil nicht
   * verdecken. pointer-events:none laesst Klicks zum Button durch. */
  z-index: 2;
  pointer-events: none;
}

/* Inhalt liegt ueber dem Wasserzeichen. */
.hero > * { position: relative; z-index: 1; }
.hero__kicker {
  display: block; font-size: var(--uv-overline-size); line-height: var(--uv-overline-lh);
  text-transform: uppercase; letter-spacing: var(--uv-ls-overline);
  color: var(--uv-white); margin-bottom: 8px;
}
.hero__title {
  font-weight: var(--uv-fw-bold); font-size: var(--uv-h3-size); line-height: 1.15;
  color: var(--uv-text-ultra-light); margin: 0 0 12px; text-wrap: pretty;
}
.hero__text { margin: 0 0 20px; font-size: var(--uv-p-size); line-height: var(--uv-p-lh); color: var(--uv-text-ultra-light); }
/* Button auf der gruenen Hero-Flaeche: der Standardbutton hat dieselbe Farbe wie
 * der Hintergrund und ist nicht zu erkennen. Deshalb im Ruhezustand die
 * Hover-Farbe (hellgruen) mit dunkler Schrift - weisse Schrift erreicht auf dem
 * Hellgruen keine 4,5:1 (CLAUDE.md Abschnitt 6). Beim Hover wird er weiss. */
.hero .btn { background: var(--uv-button-primary-hover); color: var(--uv-text-default); }
.hero .btn:hover { background: var(--uv-button-white); color: var(--uv-text-primary-01); }

h1, h2, h3 { font-family: var(--uv-font); font-weight: var(--uv-fw-bold); }
.h-page { font-size: var(--uv-h3-size); line-height: 1.15; color: var(--uv-text-default); margin: 0 0 8px; text-wrap: pretty; }
.h-section { font-size: var(--uv-h4-size); line-height: var(--uv-h4-lh); color: var(--uv-text-default); margin: 0 0 16px; }
.h-card { font-size: var(--uv-h5-size); line-height: var(--uv-h5-lh); color: var(--uv-text-default); margin: 0 0 8px; }
.h-over {
  font-size: var(--uv-h6-size); line-height: var(--uv-h6-lh); text-transform: uppercase;
  letter-spacing: var(--uv-ls-lg); color: var(--uv-text-primary-01); margin: 0 0 20px;
}
.p { margin: 0 0 20px; font-size: var(--uv-p-size); line-height: var(--uv-p-lh); color: var(--uv-text-body); }
.p-small { margin: 0; font-size: var(--uv-psmall-size); line-height: var(--uv-psmall-lh); color: var(--uv-text-body); }
.muted { color: var(--uv-text-medium); }
.caption { font-size: var(--uv-caption-size); line-height: var(--uv-caption-lh); color: var(--uv-text-medium); }

.card { border: var(--uv-border-width) solid var(--uv-input-medium); border-radius: var(--uv-radius-xs); padding: 20px 16px; }
.card--tint { background: var(--uv-primary-04); border: 0; }
/* Textzeilen in Karten (Ansprechperson, Adresse) stehen untereinander, auch
 * wenn die Spalte breit genug fuer eine Zeile waere. */
.card > span.p, .card > span.p-small { display: block; }
.card > span.p { margin-bottom: 4px; }
.stack { display: flex; flex-direction: column; gap: var(--uv-space-04-16); }
.stack--lg { gap: var(--uv-space-06-24); }
.mb-24 { margin-bottom: var(--uv-space-06-24); }
.mb-32 { margin-bottom: var(--uv-space-08-32); }
.mt-32 { margin-top: var(--uv-space-08-32); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--uv-input-medium); border: 1px solid var(--uv-input-medium);
  border-radius: var(--uv-radius-xs); margin-bottom: 32px; }
.facts__cell { background: var(--uv-white); padding: 16px; }
.facts__value { display: block; font-size: var(--uv-h4-size); line-height: var(--uv-h4-lh);
  font-weight: var(--uv-fw-bold); color: var(--uv-text-primary-01); }

.dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px;
  font-size: var(--uv-psmall-size); line-height: var(--uv-psmall-lh); }
.dl dt { color: var(--uv-text-medium); }
.dl dd { margin: 0; color: var(--uv-text-default); }

.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tag { font-size: var(--uv-caption-size); line-height: var(--uv-caption-lh);
  background: var(--uv-tertiary-02); color: var(--uv-text-body);
  border-radius: var(--uv-radius-xs); padding: 4px 8px; }
.tag--muted { background: transparent; color: var(--uv-text-medium);
  border: var(--uv-border-width) solid var(--uv-input-medium); }
.asz-group + .asz-group { margin-top: 8px; }
.altcha-hidden { display: none; }

.job { display: flex; flex-direction: column; align-items: flex-start;
  background: var(--uv-white); border: var(--uv-border-width) solid var(--uv-input-medium);
  border-radius: var(--uv-radius-xs); padding: 20px 16px; }
.job .tags, .job .h-card, .job .p-small { align-self: stretch; }
.job .meta { margin-bottom: 4px; }
.job:hover { border-color: var(--uv-primary-03); text-decoration: none; }
.job:hover .h-card { color: var(--uv-text-primary-01); }
.job__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px;
  font-size: var(--uv-button-small-size); line-height: var(--uv-button-small-lh);
  font-weight: var(--uv-fw-bold); text-transform: uppercase; letter-spacing: var(--uv-ls-lg);
  color: var(--uv-text-primary-01); }

.btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--uv-size-lg); padding: 12px var(--uv-space-05-20);
  border: 0; border-radius: var(--uv-radius-xs);
  background: var(--uv-button-primary); color: var(--uv-white);
  font-family: var(--uv-font); font-weight: var(--uv-fw-bold);
  font-size: var(--uv-button-size); line-height: var(--uv-button-lh);
  text-transform: uppercase; letter-spacing: var(--uv-ls-lg);
  cursor: pointer; text-decoration: none;
  transition: background var(--uv-duration-fast) var(--uv-ease); }
.btn:hover { background: var(--uv-button-primary-hover); }
.btn:hover { text-decoration: none; }
.btn--block { width: 100%; }
/* Lange Beschriftungen duerfen umbrechen statt den Rahmen zu sprengen. */
.btn { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.btn--outline { background: transparent; color: var(--uv-text-primary-01);
  border: var(--uv-border-width) solid var(--uv-text-primary-01); }
.btn--outline:hover { background: var(--uv-primary-04); }
.btn--small { min-height: var(--uv-size-md); font-size: var(--uv-button-small-size);
  line-height: var(--uv-button-small-lh); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--uv-lbl-frm-size); line-height: var(--uv-lbl-frm-lh); color: var(--uv-text-body); }
.field input, .field select, .field textarea {
  min-height: var(--uv-size-md); padding: 10px 12px; font-family: var(--uv-font);
  font-size: var(--uv-inp-frm-size); line-height: var(--uv-inp-frm-lh);
  color: var(--uv-text-default); background: var(--uv-input-light);
  border: var(--uv-border-width) solid var(--uv-input-medium);
  border-radius: var(--uv-radius-xs); width: 100%;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--uv-alert-error); }
.field__error { font-size: var(--uv-inf-frm-size); line-height: var(--uv-inf-frm-lh); color: var(--uv-alert-error); }
.field__hint { font-size: var(--uv-inf-frm-size); line-height: var(--uv-inf-frm-lh); color: var(--uv-text-medium); }
.grid-plz { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }

/* Filterleiste der Stellenliste (Bezirk + Stundenausmaß): mobil gestapelt,
 * ab Tablet nebeneinander - siehe Media Query unten. */
.filter { display: flex; flex-direction: column; gap: var(--uv-space-04-16); }

.check { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check input { width: var(--uv-size-xs); height: var(--uv-size-xs); margin: 0; flex: 0 0 auto;
  accent-color: var(--uv-primary-01); }
/* Mehrzeilige Labels (Datenschutz): Kaestchen an der ersten Zeile ausrichten. */
.check--top { align-items: flex-start; }
.check--top input { margin-top: 1px; }
.check label { font-size: var(--uv-psmall-size); line-height: var(--uv-psmall-lh); color: var(--uv-text-body); }
.scrollbox { max-height: 200px; overflow-y: auto; border: 1px solid var(--uv-input-medium);
  border-radius: var(--uv-radius-xs); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.group-label { display: block; font-size: var(--uv-lbl-frm-size); line-height: var(--uv-lbl-frm-lh);
  color: var(--uv-text-body); margin-bottom: 12px; }
.group-head { font-size: var(--uv-caption-size); line-height: var(--uv-caption-lh);
  text-transform: uppercase; letter-spacing: var(--uv-ls-overline); color: var(--uv-tertiary-01); }

.note { border-radius: var(--uv-radius-xs); padding: 16px; margin-bottom: 24px;
  background: var(--uv-primary-04); color: var(--uv-text-body);
  font-size: var(--uv-psmall-size); line-height: var(--uv-psmall-lh); }
.note--error { background: var(--uv-white); border: 2px solid var(--uv-alert-error); }
.note__title { display: block; font-weight: var(--uv-fw-bold); margin-bottom: 8px; }
.note ul { margin: 8px 0 0; padding-left: 20px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.foot { background: var(--uv-background-primary); }
.foot__inner { max-width: calc(var(--uv-content-width) + 2 * var(--uv-content-gutter));
  margin: 0 auto;
  padding: var(--uv-space-08-32) var(--uv-content-gutter);
  display: flex; flex-direction: column; gap: 16px; }
.foot a, .foot span { color: var(--uv-text-ultra-light); }
.foot__links { display: flex; gap: 24px; flex-wrap: wrap;
  font-size: var(--uv-psmall-size); line-height: var(--uv-psmall-lh); }

/* Ausschreibungstexte aus Odoo. Nur bereinigtes Markup landet hier. */
.rte { font-size: var(--uv-p-size); line-height: var(--uv-p-lh); color: var(--uv-text-body); }
.rte p { margin: 0 0 var(--uv-space-04-16); }
.rte ul, .rte ol { margin: 0 0 var(--uv-space-04-16); padding-left: var(--uv-space-05-20); }
.rte li { margin-bottom: var(--uv-spacing-xxxs); }
.rte table { border-collapse: collapse; width: 100%; }
.rte td, .rte th { border: var(--uv-border-width) solid var(--uv-input-medium);
  padding: var(--uv-spacing-xxs); text-align: left; }


/* ---- Gemeinsame Bausteine: Meta-Zeilen, Tags mit Icon, Eckdaten, CTA ---- */
.meta { display: flex; align-items: flex-start; gap: 8px; }
.meta .icon { width: var(--uv-size-xxs); height: var(--uv-size-xxs); margin-top: -1px; color: var(--uv-text-primary-01); }
.tag--icon { display: inline-flex; align-items: center; gap: 6px; }
.tag--icon .icon { width: var(--uv-size-xxxs); height: var(--uv-size-xxxs); }
.job__more .icon { width: var(--uv-size-xxxs); height: var(--uv-size-xxxs); }
label.meta { align-items: center; }

.facts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uv-space-04-16); }
.facts-list li { display: flex; gap: 12px; align-items: flex-start; }
.facts-list .caption, .facts-list .p-small { display: block; }
.facts-list .p-small { color: var(--uv-text-default); }
.feature__icon--white { background: var(--uv-white); width: var(--uv-size-md); height: var(--uv-size-md); }
.feature__icon--white .icon { width: var(--uv-size-xxs); height: var(--uv-size-xxs); }

.cta { display: flex; flex-direction: column; gap: var(--uv-space-04-16); }
.cta .feature__icon { background: var(--uv-white); }
.cta .h-card { margin-bottom: 4px; }
.cta .p { margin-bottom: 16px; }
.empty { display: flex; gap: var(--uv-space-04-16); align-items: center; }
.empty .p { margin: 0; }

/* ---- Unternehmensseite ------------------------------------------------ */
.section { margin-bottom: var(--uv-space-12-48); }
.section__lead { max-width: 60ch; }

/* Icons (Atomicons, inline SVG): Groesse ueber CSS, Farbe ueber currentColor. */
.icon { width: var(--uv-size-xs); height: var(--uv-size-xs); flex: 0 0 auto; }
.feature__icon { display: inline-flex; align-items: center; justify-content: center;
  width: var(--uv-size-lg); height: var(--uv-size-lg); border-radius: var(--uv-radius-xs);
  background: var(--uv-primary-04); color: var(--uv-text-primary-01); flex: 0 0 auto; }
.tile .feature__icon { background: var(--uv-white); margin-bottom: 12px; }

/* Fotoreihe: Querformat-Aufnahmen (etwa 21:9). Mobil ein horizontaler Slider mit
 * Scroll-Snap - ohne JavaScript wischbar, mit static/js/slider.js zusaetzlich
 * automatisch. Ab Tablet ein dreispaltiges Raster (siehe Media Query unten). */
.photos { display: flex; gap: var(--uv-space-02-8); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photos__img { flex: 0 0 100%; scroll-snap-align: center;
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--uv-radius-xs); }

/* Slider-Punkte, von slider.js erzeugt. Balken statt Kreise wegen des einzigen
 * Radius (4px); Trefferflaeche 44px ueber ein transparentes Pseudoelement. */
.slider-dots { display: flex; justify-content: center; gap: var(--uv-space-02-8); margin-top: 12px; }
.slider-dots__dot { position: relative; width: 24px; height: 4px; padding: 0; border: 0;
  border-radius: var(--uv-radius-xs); background: var(--uv-input-dark); cursor: pointer;
  transition: background var(--uv-duration-fast) var(--uv-ease); }
.slider-dots__dot::before { content: ""; position: absolute; inset: -20px 0; }
.slider-dots__dot[aria-current="true"] { background: var(--uv-primary-01); }
.banner { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--uv-radius-xs) var(--uv-radius-xs) 0 0; }

.features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uv-space-04-16); }
.feature { display: flex; gap: var(--uv-space-04-16); align-items: flex-start; }
.feature .h-card { margin-bottom: 4px; }

.checklist { margin: 0; padding-left: var(--uv-space-05-20); font-size: var(--uv-p-size); line-height: var(--uv-li-lh); color: var(--uv-text-body); }

/* Foto neben "Passt der Job zu dir": fuellt mobil das 3:2-Format, ab Tablet
   die volle Kartenhoehe (grid-2--equal streckt die Zelle). */
.passt__img { display: block; width: 100%; height: 100%; min-height: 200px;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--uv-radius-xs); }

.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--uv-space-04-16); }
.tile .h-card { margin-bottom: 4px; }

/* Mobil ein horizontaler Slider (Scroll-Snap, wischbar wie die Fotoreihe oben,
 * eine Stimme je Ansicht). Ab Tablet ein Raster - siehe Media Query unten. */
.quotes { display: flex; gap: var(--uv-space-04-16); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 12px;
  flex: 0 0 100%; scroll-snap-align: start; }
.quote__img { width: var(--uv-size-xl); height: var(--uv-size-xl); border-radius: 50%; object-fit: cover; }
.quote__text { margin: 0; font-size: var(--uv-p-size); line-height: var(--uv-p-lh); color: var(--uv-text-body); }

/* Prozess: nummerierte Schritte mit Verbindungslinie, mobil vertikal. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uv-space-06-24); }
.step { position: relative; display: flex; gap: var(--uv-space-04-16); align-items: flex-start; }
.step__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--uv-size-md); height: var(--uv-size-md); border-radius: 50%;
  background: var(--uv-primary-01); color: var(--uv-white);
  font-weight: var(--uv-fw-bold); font-size: var(--uv-h5-size); line-height: var(--uv-h5-lh); }
.step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--uv-size-md) / 2 - 1px);
  top: var(--uv-size-md); bottom: calc(-1 * var(--uv-space-06-24)); width: 2px; background: var(--uv-primary-03); }
.step .h-card { margin-bottom: 4px; }

/* FAQ: details/summary, Plus dreht sich beim Aufklappen zum Kreuz. */
.faq-groups { display: flex; flex-direction: column; gap: var(--uv-space-08-32); }
.faq { border: var(--uv-border-width) solid var(--uv-input-medium); border-radius: var(--uv-radius-xs); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--uv-space-04-16);
  list-style: none; cursor: pointer; padding: 14px 16px; min-height: 44px;
  font-size: var(--uv-p-size); line-height: var(--uv-p-lh); font-weight: var(--uv-fw-bold); color: var(--uv-text-default); }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { display: inline-flex; color: var(--uv-text-primary-01);
  transition: transform var(--uv-duration-normal) var(--uv-ease); }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq__a { margin: 0; padding: 0 16px 16px; }

.closing { border-radius: 0 0 var(--uv-radius-xs) var(--uv-radius-xs); padding: var(--uv-space-06-24) var(--uv-space-04-16); }
.closing .h-section { margin-bottom: 8px; }

.contact { display: flex; flex-direction: column; gap: var(--uv-space-04-16); }
.contact__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
/* Runder Foto-Platzhalter fuer die Ansprechperson, bis das Portrait vorliegt. */
.avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: 2px dashed var(--uv-input-medium); background: var(--uv-primary-04);
  font-size: var(--uv-psmall-size); color: var(--uv-text-body); }
.contact .h-over { display: block; margin-bottom: 8px; }
.contact__intro { margin: 0 0 12px; color: var(--uv-text-body); }
.contact span.p, .contact span.p-small { display: block; }
.contact span.p { margin-bottom: 4px; }
.contact__links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--uv-spacing-xxxs); }
.contact__links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }

/* ============================================================
   Tablet und Desktop. Mobile first: alles oben gilt bis 767px, hier kommen
   nur Erweiterungen dazu. Die Inhaltsspalte selbst waechst ueber die
   Layout-Tokens in tokens.css (720px ab 768px, 960px ab 1024px).
   Breakpoints als Zahl, weil Media Queries keine Custom Properties lesen.
   ============================================================ */

/* Formularfelder nebeneinander, sobald zwei Felder je 40 Zeichen Platz haben. */
@media (min-width: 600px) {
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uv-space-04-16); align-items: start; }
  .grid-2 > .card { margin-bottom: 0; }
  /* Gleich hohe Kacheln (z. B. Kontakt + Cross-Link): Zellen strecken. */
  .grid-2--equal { align-items: stretch; }
}

@media (min-width: 768px) {
  .bar__inner { padding-top: 16px; padding-bottom: 16px; }
  .bar__nav { gap: var(--uv-space-08-32); }

  .hero { padding: var(--uv-space-08-32); margin-bottom: var(--uv-space-08-32); }
  .hero__title { font-size: var(--uv-h2-size); line-height: var(--uv-h2-lh); }
  /* Textzeilen im breiten Hero begrenzen, sonst laufen sie ueber 100 Zeichen. */
  /* Begrenzte Textbox nach rechts an den Hero-Rand schieben (Text ist
   * rechtsbuendig, der Block selbst wuerde sonst links kleben). */
  .hero__text { max-width: 60ch; margin-left: auto; }
  /* Buttons fuellen am Desktop nicht mehr die ganze Breite. */
  .hero .btn--block, .btn--fit { width: auto; min-width: 240px; }
  /* "Offene Stellen ansehen" rechtsbuendig im Hero. */
  .hero .btn { display: flex; width: fit-content; margin-left: auto; }

  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Kartenraster: Stellen, Benefits, Werte. */
  .stack--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uv-space-04-16); }
  .stack--cards > * { margin: 0; }

  /* Bezirksfilter als Zeile. */
  .filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--uv-space-04-16); }
  .filter__group { flex: 1 1 240px; }
  .filter select { max-width: 360px; }

  .scrollbox { max-height: 320px; }

  /* Ab Tablet kein Slider mehr, sondern ein dreispaltiges Raster. */
  .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--uv-space-04-16); overflow: visible; }
  /* Nebeneinander etwas hoeher beschnitten, damit die Gebaeude nicht zu flach wirken. */
  .photos__img { aspect-ratio: 3 / 2; }
  .slider-dots { display: none; }
  .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uv-space-06-24); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bis drei Stimmen ein Raster, ab vier bleibt es ein Slider (dann drei
     Stimmen gleichzeitig sichtbar, weiter wischbar). */
  .quotes:not(.quotes--slider) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible; }
  .quotes--slider > .quote { flex-basis: calc((100% - 2 * var(--uv-space-04-16)) / 3); }
  .quotes--slider + .slider-dots { display: flex; }
  .faq-groups { flex-direction: row; }
  .faq-groups > * { flex: 1 1 0; min-width: 0; }
  .closing { display: flex; align-items: center; padding: var(--uv-space-08-32); }
  .closing > * { max-width: 60ch; }
  .contact { flex-direction: row; align-items: center; gap: var(--uv-space-06-24); }
  .cta { flex-direction: row; align-items: flex-start; gap: var(--uv-space-06-24); padding: var(--uv-space-06-24); }
  .contact__links { flex-direction: row; gap: var(--uv-spacing-xxxs) var(--uv-space-08-32); flex-wrap: wrap; }

  .foot__inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--uv-space-06-24); }
  .foot__links { gap: var(--uv-space-08-32); }
}

@media (min-width: 1024px) {
  .wrap { padding-top: var(--uv-space-08-32); }
  .hero { padding: var(--uv-space-12-48); }

  /* Stellendetail: Text links, Eckdaten und Bewerben-Button rechts. Die
   * Seitenleiste bleibt unter der klebenden Kopfzeile stehen. */
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--uv-space-08-32); align-items: start; }
  .layout__side { position: sticky; top: 88px; }
  .layout__side > .card { margin-bottom: var(--uv-space-04-16); }
  /* Ohne Ausschreibungstext (in Odoo noch nicht befuellt) bleibt die linke
   * Spalte leer; die Seitenleiste rueckt dann nach links. */
  .layout__main--leer { display: none; }
  .layout:has(.layout__main--leer) { grid-template-columns: minmax(0, 480px); }

  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Prozess horizontal: fuenf Schritte nebeneinander, Linie durch die Nummern. */
  .steps { flex-direction: row; gap: var(--uv-space-04-16); }
  .step { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 12px; }
  .step:not(:last-child)::before { left: var(--uv-size-md); right: calc(-1 * var(--uv-space-04-16));
    top: calc(var(--uv-size-md) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
}