/* ============================================================
   Startseite — Erweiterung
   ------------------------------------------------------------
   Eigene Datei statt Eingriff in style.css: Dort liegen Ihre
   Designanpassungen, die ein Update nicht ueberschreiben soll.
   Geladen nur auf der Startseite, Versionsnummer aus dem
   Aenderungsdatum der Datei — kein ASSET_VER noetig.

   Alle Farben laufen ueber die vorhandenen Variablen, mit
   Rueckfallwerten. Damit passt es zum hellen wie zum dunklen
   Modus, falls der aktiv ist, und bricht nicht, falls nicht.
   ============================================================ */

/* Grauton fuer Nebentexte: FEST statt var(--muted). In der aktuell
   eingesetzten style.css ist --muted heller; damit kamen die Neben-
   beschriftungen der Vorschau nur auf 3,1:1. #526a6f erreicht 5,8:1 auf
   Weiss und 5,5:1 auf der getoenten Flaeche. */

/* ---------- Stellenkarten: kein seitliches Scrollen auf kleinen Handys ----------
   Das Raster der Stellenkarten verlangt mindestens 340 px je Karte. Auf
   einem 320-px-Handy ragt jede Karte damit ueber den Rand hinaus, und die
   ganze Seite laesst sich seitlich verschieben. min() begrenzt die
   Mindestbreite auf die verfuegbare Breite. Steht diese Korrektur schon in
   Ihrer style.css (Design-Update), ist diese Zeile wirkungsgleich. */
/* Mit ".section" davor: Diese Datei wird VOR style.css geladen. Bei gleicher
   Spezifitaet gewaenne die spaetere Regel dort, und die Korrektur waere
   wirkungslos — genau so ist es beim ersten Versuch passiert. */
.section .jobs{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}

/* ---------- Hero: Kennzahlen und Wechsel zur Zielgruppe Hostels ---------- */
.hp-switch{
  display:inline-block;margin-top:18px;font-weight:600;font-size:.95rem;
  color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
}
.hp-switch:hover{text-decoration-thickness:2.5px}
.hp-switch:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* ---------- Abschnitt "Fuer Hostels" ---------- */
/* Abschnittsmarke im selben Stil wie ".section-head .left .kicker" der
   style.css. Die Regel dort gilt nur innerhalb von .section-head — hier
   stand "Fuer Hostels" deshalb als einfacher grauer Text. */
.hp-text .kicker{
  color:var(--petrol,#0f7d8c);font-weight:700;font-size:.84rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.hp-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px;align-items:start;
}
.hp-text h2{
  font-family:var(--font-display,inherit);color:var(--ink,#11272b);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);line-height:1.15;letter-spacing:-.02em;
  margin:6px 0 14px;max-width:18ch;
  /* Deutsche Komposita: "Vorstellungsgespraech" ist auf einem 320-px-Handy
     breiter als die Spalte und schob die ganze Seite 7 px seitlich.
     Geloest mit einem weichen Trennzeichen direkt im Wort (home_employer.php):
     Das funktioniert in jedem Browser. hyphens:auto braucht ein Trenn-
     woerterbuch, das nicht jeder Browser hat, und overflow-wrap brach das
     Wort im Test mitten drin ("Vorstellungsgespraec-h"). */
  hyphens:manual;-webkit-hyphens:manual;
}
.hp-steps h3,.hp-intro,.hp-steps p,.hp-pool{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.hp-intro{color:var(--body,#41575b);font-size:1.05rem;line-height:1.65;max-width:52ch;margin:0}

/* Schritte: eine echte Abfolge, deshalb nummeriert */
.hp-steps{list-style:none;counter-reset:hp;margin:28px 0 0;padding:0;display:grid;gap:18px}
.hp-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.hp-steps li::before{
  counter-increment:hp;content:counter(hp);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--petrol,#0f7d8c);color:#fff;font-weight:700;font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.hp-steps h3{margin:5px 0 4px;font-size:1.02rem;color:var(--ink,#11272b);font-family:var(--font-display,inherit)}
.hp-steps p{margin:0;color:var(--body,#41575b);line-height:1.6;font-size:.95rem;max-width:54ch}

.hp-pool{
  margin:24px 0 0;padding:14px 16px;border-left:3px solid var(--petrol,#0f7d8c);
  background:var(--paper,#fff);border-radius:0 10px 10px 0;
  color:var(--body,#41575b);font-size:.93rem;line-height:1.6;max-width:56ch;
}

.hp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hp-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 22px;border-radius:12px;font-weight:700;font-size:.98rem;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
/* Dunkle Schrift auf Orange: 6,0:1. Weiss auf diesem Orange erreicht
   nur 2,6:1 und faellt durch. */
.hp-btn-main{background:var(--accent,#ff7a4d);color:#11272b}
.hp-btn-main:hover{box-shadow:0 8px 20px -8px rgba(255,122,77,.7);transform:translateY(-1px)}
.hp-btn-alt{background:var(--paper,#fff);color:var(--petrol-dark,#0a5d69);border:1.5px solid var(--petrol,#0f7d8c)}
.hp-btn-alt:hover{background:var(--petrol-tint,#f4fafb)}
.hp-btn:focus-visible{outline:2px solid var(--petrol,#0f7d8c);outline-offset:3px}

/* ---------- Beispielansicht des Posteingangs ---------- */
.hp-demo{
  /* Laeuft beim Lesen der Schritte mit. Vorher endete die Vorschau nach
     einem Drittel der Hoehe, darunter klaffte eine Luecke. Der Abstand
     oben haelt sie unter der klebenden Kopfleiste. */
  position:sticky;top:108px;
  margin:0;background:var(--paper,#fff);border:1px solid var(--line,#e2eaeb);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(6,63,71,.06),0 28px 56px -28px rgba(6,63,71,.38);
}
.hp-demo-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;background:var(--petrol,#0f7d8c);color:#fff;font-size:.95rem;
}
.hp-demo-tag{
  font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;
  /* Abgedunkelt statt aufgehellt: Weiss auf aufgehelltem Petrol kam nur
     auf 3,6:1, auf abgedunkeltem sind es 7,0:1. */
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.3);white-space:nowrap;
}
.hp-demo-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 18px;
  border-bottom:1px solid var(--line,#e2eaeb);background:var(--petrol-tint,#f4fafb);
}
.hp-chip{
  font-size:.82rem;font-weight:600;padding:4px 12px;border-radius:999px;
  background:var(--petrol-dark,#0a5d69);color:#fff;
}
.hp-demo-count{margin-left:auto;font-size:.82rem;color:#526a6f;font-variant-numeric:tabular-nums}

.hp-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start;
  padding:15px 18px;border-bottom:1px solid var(--line,#e2eaeb);
}
.hp-row:last-child{border-bottom:0}
.hp-name{font-weight:700;color:var(--ink,#11272b)}
.hp-meta{font-size:.84rem;color:#526a6f}
.hp-snip{grid-column:1/-1;margin:0;font-size:.87rem;line-height:1.55;color:var(--body,#41575b)}
/* Dasselbe Markierungsgelb wie in der echten Lebenslaufsuche */
.hp-snip mark{background:#fff0b3;color:#11272b;padding:0 3px;border-radius:3px}

/* Statuspillen: Farbe nie allein — der Text sagt, was los ist */
.hp-pill{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.hp-neu{background:#fdf0d6;color:#7a5300}   /* 7,1:1 */
.hp-ein{background:#dcf3ee;color:#0a5d4a}   /* 6,4:1 */
.hp-abs{background:#eef2f3;color:#41575b}   /* 6,9:1 */

.hp-cal{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:4px;font-size:.85rem;color:var(--petrol-dark,#0a5d69);font-weight:600;
}
.hp-cal svg{flex:none}
.hp-fakebtn{
  padding:5px 11px;border-radius:8px;border:1px solid var(--line,#e2eaeb);
  background:var(--paper,#fff);color:var(--petrol-dark,#0a5d69);font-weight:700;font-size:.82rem;
}
.hp-muted{color:#526a6f}
.hp-undo{color:#c14a17;text-decoration:underline;text-underline-offset:3px}   /* 4,9:1 */

/* ---------- Umbrueche ---------- */
@media (max-width:980px){
  .hp-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hp-text h2{max-width:none}
  /* Einspaltig kaeme die Vorschau sonst erst nach vier Schritten und zwei
     Knoepfen. display:contents loest die Textspalte auf, damit sich die
     Vorschau direkt hinter die Einleitung einreihen kann. Sie enthaelt
     nichts Fokussierbares — die Tab-Reihenfolge bleibt also stimmig. */
  .hp-text{display:contents}
  .hp-text > .kicker{order:1}
  .hp-text > h2{order:2}
  .hp-intro{order:3}
  .hp-demo{order:4;position:static;margin-top:26px}
  .hp-steps{order:5}
  .hp-pool{order:6}
  .hp-actions{order:7}
}
@media (max-width:420px){
  .hp-demo-count{margin-left:0;width:100%}
  .hp-actions .hp-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .hp-btn{transition:none}
  .hp-btn-main:hover{transform:none}
}

/* Verweis auf die eigene Seite "Fuer Hostels" (Ablauf, Preis, Datenschutz) */
.hp-more{margin:14px 0 0;font-size:.98rem}
.hp-more a{color:var(--petrol-dark,#0a5d69);font-weight:600;text-decoration:none}
.hp-more a:hover{text-decoration:underline}