/* Startseite — bewerberzentriert.
 *
 * Die vorherige Fassung setzte den Auftakt als dunklen Raum mit
 * vollflaechigem Bild dahinter. Auf dem Geraet blieb davon eine fast
 * schwarze Flaeche: das Motiv war unter Verlaufsmasken und Vignette
 * nicht mehr zu erkennen, und die Headline stand ueber Nichts.
 *
 * Jetzt steht das Bild neben dem Text statt dahinter. Es ist damit
 * sichtbar, und der Text braucht keine Abdunklung, um lesbar zu sein.
 */

/* ---------- 1 · Auftakt ----------------------------------------- */

/* Der Auftakt war ein Banner ueber Text: das Bild ein Kasten, die
   Zeile kleiner als auf den meisten Blogs, alles auf halber Hoehe. Auf
   1440px stand die Hauptaussage in 36px. Jetzt traegt er den Bildschirm
   — grosse Zeile, grosses Motiv, die Suche als heller Block darin. */
.hs-auftakt {
  padding-block: clamp(1.75rem, 4vw, 4rem) clamp(2.5rem, 6vw, 5rem);
  background: var(--paper);
}
.hs-auftakt-raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  /* Text traegt, Bild begleitet — deshalb keine haelftige Teilung. */
  .hs-auftakt-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  /* Das Motiv reicht ueber die Hoehe der Textspalte und wird damit zur
     Buehne statt zur Beigabe. */
  .hs-auftakt-bild img { aspect-ratio: 4 / 5; height: 100%; min-height: clamp(24rem, 46vh, 34rem); }
}

.hs-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-block-end: 0.75rem;
}
.hs-h1 {
  font-family: var(--font-display);
  /* Zwei bis drei Zeilen auf dem Telefon, gemessen ab 320px. Der obere
     Deckel lag bei 3.6rem und liess den Auftakt auf grossen Schirmen
     kleiner wirken als die Ueberschriften der Kapitel darunter. */
  font-size: clamp(2.15rem, 6.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--petrol);
  max-width: 14ch;
  margin-block-end: 0.85rem;
}
.hs-h1 em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--green-dark);
}
.hs-lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--gray);
  max-width: 44ch;
  margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ---------- Die Suche -------------------------------------------- */

/* Sie ist die Hauptaktion der Seite, nicht ein Feld unter anderen:
   heller Block auf dem Papierton, klare Kante, Knopf in voller Breite
   auf dem Telefon. */
.hs-suche {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1rem, 2vw, 1.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(22, 56, 60, 0.06);
}
@media (min-width: 560px) {
  .hs-suche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hs-suche-knopf { grid-column: 1 / -1; }
}
/* `minmax(0, 1fr)` statt der impliziten Spalte: ein Grid-Item hat
   `min-width: auto` und schrumpft nie unter seinen Inhalt.

   Das allein reichte nicht. Die Box des <select> hielt sich danach an
   ihre 213px, aber WebKit rechnet die intrinsische Breite der <option>-
   Elemente ("Kinderkrankenpflege", bei 200 % Textzoom rund 313px) in die
   scrollWidth des Elternteils. Das lief die Kette hoch — Feld 313,
   Formular 345, Textspalte 346, .wrap 386, Abschnitt 402 — und machte
   die Seite bei clientWidth 390 um 12px horizontal scrollbar, ohne dass
   irgendein Element sichtbar hinausragte. Nachgewiesen durch Wegnehmen:
   Optionen auf ein Zeichen gekuerzt -> 0px.

   `clip` statt `hidden`, weil das Feld dadurch kein Scroll-Container
   wird. Das native Optionsmenue rendert ausserhalb des Dokumentflusses
   und bleibt unberuehrt (geprueft: 7 Optionen, Auswahl funktioniert). */
.hs-suche-feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  overflow: clip;
  /* Der Fokusring des Selects liegt 2px ausserhalb seiner Kante und ist
     3px stark. Ohne diesen Rand wuerde `clip` genau ihn abschneiden —
     die Korrektur gegen die Ueberbreite haette die Fokussichtbarkeit
     gekostet. 6px lassen ihn stehen und halten die 313px der Optionen
     weiterhin drinnen. */
  overflow-clip-margin: 6px;
}
.hs-suche-feld label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray);
}
.hs-suche-feld select,
.hs-suche-feld input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.hs-suche-feld select:focus-visible,
.hs-suche-feld input:focus-visible { border-color: var(--green-dark); }
.hs-suche-knopf { min-height: 48px; }

.hs-zweitweg {
  margin-block-start: 1rem;
  font-size: var(--fs-sm);
  color: var(--gray);
}
.hs-zweitweg a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* ---------- Auftakt-Kaskade (Signature-Moment) --------------------
   Beim Ankommen baut sich der Einstieg ruhig auf: Eyebrow → Titel →
   Lede → Suche → Zweitweg, 90 ms versetzt. Nutzt das vorhandene
   .rv-System — hier nur die lokale Staffelung, damit fünf Elemente
   nicht am 140-ms-Deckel kleben. Ohne JS/bei reduced-motion: alles
   sofort sichtbar (Systemverhalten von .rv). */
.hs-auftakt-text { --rv-stufe: 90ms; --rv-max: 380ms; }

/* ---------- Das Bild --------------------------------------------- */

.hs-auftakt-bild { margin: 0; }
.hs-auftakt-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
}
/* Bildbewegung-Familie: das Auftaktbild gleitet beim Scrollen minimal
   gegenläufig (±9 px) — Tiefe ohne Parallax-Showeffekt. --p liefert
   js/motion.js; ohne JS oder bei reduced-motion steht das Bild still
   (Fallback 0.5 → 0-Versatz). Nur Desktop. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hs-auftakt[data-progress] .hs-auftakt-bild img {
    transform: translateY(calc((var(--p, 0.5) - 0.5) * -18px));
  }
}
.hs-auftakt-bild figcaption,
.hs-vertrauen-bild figcaption {
  margin-block-start: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--gray);
  max-width: 42ch;
  opacity: 0.85;
}
@media (max-width: 899px) {
  /* Auf dem Telefon steht das Bild ueber dem Text — der erste
     Eindruck ist ein Mensch, nicht eine Ueberschrift. */
  .hs-auftakt-raster { grid-template-areas: 'bild' 'text'; }
  .hs-auftakt-bild { grid-area: bild; }
  .hs-auftakt-text { grid-area: text; }
  /* Flacher als auf dem Desktop, damit die Suche im ersten Bildschirm
     bleibt. 16/10 liess den Suchknopf bei 390x844 auf y=859 enden, also
     15px unter der Kante. 16/9 nimmt 24px und holt ihn zurueck.
     Position: Das Hochformat (540x721) traegt das Gesicht zwischen 18%
     und 54% der Hoehe; das 16/9-Fenster zeigt 42% davon. 14% schnitt
     das Kinn ab (Fenster 8-50%), 30% zeigt Kopf bis Kinn mit Luft. */
  .hs-auftakt-bild img { aspect-ratio: 16 / 9; object-position: 50% 30%; }
}

/* ---------- 2 · Vorteile ----------------------------------------- */

/* Die Farbzone kommt aus seiten.css (.section-gruen) — sie gilt fuer
   alle Bewerberseiten, nicht nur fuer die Startseite. */

.hs-vorteile,
.hs-stellen,
.hs-ablauf,
.hs-vertrauen,
.hs-einrichtungen { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.hs-vorteile-liste {
  list-style: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .hs-vorteile-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hs-vorteile-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hs-vorteile-liste li { max-width: 42ch; }
/* Das Zeichen benennt den Vorteil, es dekoriert ihn nicht — deshalb je
   ein eigenes statt vier gleicher Punkte. */
.hs-icon {
  width: 30px; height: 30px;
  color: var(--green-dark);
  margin-block-end: 0.65rem;
}
.hs-vorteile-liste h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--petrol);
  margin-block-end: 0.35rem;
}
.hs-vorteile-liste p { font-size: 0.95rem; line-height: 1.55; color: var(--gray); }

/* ---------- 3 · Stellen ------------------------------------------ */

.hs-stellen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
}
.hs-stellen-kopf .st-h2 { margin-block-end: 0; }
.hs-demo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--gray);
  max-width: 40ch;
}

/* Die Stellenkarte selbst steht in seiten.css — sie gehoert allen vier
   Orten, an denen Stellen auftauchen, nicht der Startseite. */

.hs-stellen-aktion { margin-block-start: clamp(1.5rem, 3vw, 2rem); }
.hs-nojs, .hs-fehler { padding-block: 1.25rem; color: var(--gray); }

/* ---------- 4 · Ablauf ------------------------------------------- */

.hs-ablauf-liste {
  list-style: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: schritt;
}
@media (min-width: 800px) { .hs-ablauf-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-ablauf-liste li {
  position: relative;
  padding-block-start: 3rem;
  max-width: 40ch;
}
@media (min-width: 800px) {
  /* In der Dreierspalte begrenzt schon das Raster. Die zusaetzlichen
     40ch liessen jede Spalte bei 320px enden — auf 1440px stand rechts
     ein Drittel der Flaeche leer. */
  .hs-ablauf-liste li { max-width: none; }
}
/* Die Ziffer traegt die Reihenfolge und ist gross genug, um die
   Sequenz auf einen Blick zu zeigen. */
.hs-nr {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--green-dark);
  border-radius: 50%;
}
.hs-ablauf-liste h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--petrol);
  margin-block-end: 0.35rem;
}
.hs-ablauf-liste p { font-size: 0.95rem; line-height: 1.55; color: var(--gray); }

/* ---------- 5 · Vertrauen ---------------------------------------- */

.hs-vertrauen-raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .hs-vertrauen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.hs-vertrauen-bild { margin: 0; }
.hs-vertrauen-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 42% 45%;
  border-radius: var(--radius);
}
.hs-vertrauen-text > p { max-width: 46ch; line-height: 1.6; }
/* Bis 860px liefert <source> die Hochformat-Variante (540x720): dort
   beginnen beide Koepfe bei ~14% der Hoehe — 45% schnitt sie oben ab
   (4/3-Fenster ab 20%). 22% laesst Luft ueber beiden Koepfen. */
@media (max-width: 860px) {
  .hs-vertrauen-bild img { object-position: 42% 22%; }
}

/* Platz fuer spaetere echte Angaben: die Zeilen stehen als Liste,
   ein zusaetzlicher Eintrag braucht keine neue Geometrie. */
.hs-kontaktdaten {
  display: grid;
  gap: 0.7rem;
  margin-block: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 46ch;
}
.hs-kontaktdaten > div {
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--line);
}
.hs-kontaktdaten dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.hs-kontaktdaten dd {
  margin-block-start: 0.15rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--petrol);
}
.hs-kontaktdaten a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* ---------- 6 · Einrichtungen ------------------------------------ */

.hs-eink-raster {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 860px) {
  .hs-eink-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.hs-einrichtungen .st-h2 { color: var(--white); }
.hs-einrichtungen .st-h2 em { color: var(--green); }
.hs-einrichtungen p { color: rgba(255, 255, 255, 0.82); max-width: 46ch; line-height: 1.6; }
.hs-einrichtungen .st-actions { margin-block-start: 0; }
/* Zweiter Knopf auf dunklem Grund — `.btn-ghost` rechnet mit hellem. */
.btn-ghost-hell {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}
.btn-ghost-hell:hover {
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--green);
}

@media (max-width: 600px) {
  .hs-einrichtungen .st-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- Zugehoerigkeit --------------------------------------- */

/* Ein Streifen, kein Kapitel: er traegt eine Tatsache, keine Aussage.
   Cremeton als ruhige Zaesur zwischen dem Bewerberteil und dem Wechsel
   zur zweiten Zielgruppe. */
.hs-quip {
  background: var(--cream);
  border-block: 1px solid var(--line);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
}
.hs-quip-raster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.hs-quip-satz {
  font-size: var(--fs-sm);
  color: var(--gray);
  max-width: none;
}
.hs-quip-satz strong { color: var(--petrol); font-weight: 600; }
.hs-quip-marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.75;
  transition: opacity var(--speed) var(--ease);
}
.hs-quip-marke:hover,
.hs-quip-marke:focus-visible { opacity: 1; }
/* 38px hoch waren bei einer 413x264-Wortmarke 59px breit — als
   Zugehoerigkeitszeichen nicht lesbar. */
.hs-quip-marke img { width: auto; height: clamp(40px, 7vw, 58px); }