/* HeinsApp-Jobbörse · Startseite mit allen Stellen.
   Nach Lipos Premium-Vorbild (18.10.2026): warmes Creme, große schlanke Schrift, viel Luft, Fotos als Star.
   1. Start: Vollbild mit runden Ecken, Video leicht grau dahinter, weiße Headline, in der Mitte ein großer Knopf.
   2. Job-Finder: eine große Frage nach der anderen, Antworten als große Wörter, danach die passenden Stellen.
   3. Alle Jobs als Bildkarten mit schlichten Filtern.
   4. Menü als dunkler Vollbild-Layer mit großen Wörtern und Bildern an den Seiten. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --schrift: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --creme: #efe9e2;
  --creme-hell: #f6f2ed;
  --creme-tief: #e3dcd3;
  --tinte: #151515;
  --grau: #857f78;
  --linie: rgba(21, 21, 21, 0.12);
  --nacht: #0f1216;
  --rand: 28px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--creme); color: var(--tinte);
  font-family: var(--schrift); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menue-offen { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 12px; z-index: 200; padding: 10px 14px; border-radius: 8px; background: var(--tinte); color: #fff; text-decoration: none; }
.sprung:focus { left: 12px; }

/* ---------- 1. Start ---------- */
/* Vollbild, im ganzen Hintergrund läuft das Video (Lipo, 18.10.2026: „mach das full screen und im kompletten hintergrund sollte ein demo video laufen“) */
.start {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  height: calc(100vh - 16px); height: calc(100svh - 16px); min-height: 520px; margin: 8px;
  border-radius: 22px; overflow: hidden; background: #2a2a2a; color: #fff;
}
.start-hintergrund { position: absolute; inset: 0; z-index: -1; }
.start-video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) brightness(0.84) contrast(0.95); }
.start-hintergrund::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(38, 38, 38, 0.28), rgba(38, 38, 38, 0.28)),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 75%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35));
}
.kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.logo img { width: auto; height: 30px; }
.menue-knopf {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none;
  color: var(--tinte); cursor: pointer;
}
.seitennav { display: none; }
.seitennav a { text-decoration: none; opacity: 0.75; transition: opacity 150ms ease; }
.seitennav a:hover, .seitennav a[aria-current="page"] { opacity: 1; }
.kopf-hell .menue-knopf { color: #fff; }
.knopf-hell {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--creme-hell); color: var(--tinte); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.knopf-hell:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .knopf-hell:hover { background: #fff; } }
/* Der Knopf ist das Wichtigste auf dem Start */
.start-knopf {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 36px; padding: 0 30px 0 34px;
  border-radius: 999px; background: #fff; color: var(--tinte); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.start-knopf .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .start-knopf:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.6); }
  .start-knopf:hover .icon { transform: translateX(3px); }
}
.start-knopf:active { transform: scale(0.97); }
.start-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.start-nav { display: none; }

/* Job-Finder als eigene Seite im selben Rahmen wie der Start */
.rahmen { position: relative; min-height: calc(100svh - 16px); margin: 8px; border-radius: 20px; background: var(--creme-hell); }
.reihe-links { display: inline-flex; align-items: baseline; gap: 18px; font-size: 14px; }
.reihe-links a { text-underline-offset: 3px; }
.start-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 80px 22px 70px; text-align: center; }
.start-titel { margin: 0; font-size: clamp(2.8rem, 12.5vw, 7.2rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 400; color: #fff; text-wrap: balance; }
.start-unter { margin: 20px auto 0; max-width: 40ch; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }
.ohne-bild { display: grid; place-items: center; width: 100%; height: 100%; background: var(--firma, var(--tinte)); color: var(--auf-firma, #fff); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- 2. Job-Finder ---------- */
.rahmen-finder { display: flex; flex-direction: column; justify-content: center; padding: 96px 0 100px; }
.finder { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); }
.frage-block { max-width: 1100px; margin: 0 auto; text-align: center; }
.frage-zahl { display: flex; justify-content: center; align-items: baseline; gap: 16px; margin: 0 0 18px; font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; }
.frage-gross {
  margin: 0 0 30px; outline: none; font-size: clamp(2.3rem, 9vw, 5.6rem); line-height: 1.03; letter-spacing: -0.045em; font-weight: 400; text-wrap: balance;
  animation: frage-rein 420ms var(--ease-out) both;
}
@keyframes frage-rein { from { opacity: 0; transform: translateY(10px); } }
.finder-frei { display: flex; justify-content: center; align-items: center; gap: 10px; max-width: 420px; margin: 30px auto 0; }
.finder-frei input {
  flex: 1; min-width: 0; padding: 8px 2px; border: 0; border-bottom: 1px solid rgba(21, 21, 21, 0.3); background: none; outline: none;
  font: inherit; font-size: 16px; text-align: center; color: var(--tinte); transition: border-color 150ms ease;
}
.finder-frei input:focus { border-bottom-color: var(--tinte); }
.finder-frei input::placeholder { color: var(--grau); }
.finder-weiter {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--tinte); color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.fragen-zurueck { padding: 0; border: 0; background: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.wahl-wort {
  padding: 2px 14px 6px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 600 clamp(1.55rem, 5.6vw, 2.7rem) / 1.15 var(--schrift); letter-spacing: -0.03em; color: rgba(21, 21, 21, 0.3);
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
  animation: wort-rein 360ms var(--ease-out) both;
}
.wahl-wort:nth-child(2) { animation-delay: 30ms; } .wahl-wort:nth-child(3) { animation-delay: 60ms; }
.wahl-wort:nth-child(4) { animation-delay: 90ms; } .wahl-wort:nth-child(5) { animation-delay: 120ms; }
.wahl-wort:nth-child(6) { animation-delay: 150ms; } .wahl-wort:nth-child(7) { animation-delay: 180ms; } .wahl-wort:nth-child(8) { animation-delay: 210ms; }
@keyframes wort-rein { from { opacity: 0; transform: translateY(8px); } }
@media (hover: hover) and (pointer: fine) { .wahl-wort:hover { color: var(--tinte); } }
.wahl-wort:active { transform: scale(0.97); }
.wahl-wort[aria-pressed="true"] { background: var(--tinte); color: var(--creme); }
.wahl.locker { gap: 10px; max-width: 900px; margin: 0 auto; }
.wahl.locker .wahl-wort {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 13px 18px; border: 1.5px solid rgba(21, 21, 21, 0.16); border-radius: 999px;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; color: var(--tinte); background: rgba(255, 255, 255, 0.45);
}
.wahl.locker .wahl-wort .icon { width: 1.05em; height: 1.05em; flex: none; color: var(--marke); }
@media (hover: hover) and (pointer: fine) { .wahl.locker .wahl-wort:hover { border-color: var(--tinte); } }
.wahl.locker .wahl-wort[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
.wahl.locker .wahl-wort[aria-pressed="true"] .icon { color: var(--creme); }
.finder-status { margin: 0; text-align: center; font-size: 17px; }
.finder-status { color: var(--grau); }
.finder-status.laeuft { color: var(--tinte); }
.finder-status.laeuft::after { content: ""; display: block; width: 120px; height: 2px; margin: 14px auto 0; background: linear-gradient(to right, transparent, var(--tinte), transparent); background-size: 200% 100%; animation: sucht 1.2s linear infinite; }
@keyframes sucht { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.ergebnis { margin-top: 34px; }
.reihe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; scroll-margin-top: 24px; }
.reihe-kopf h2 { margin: 0; outline: none; font-size: clamp(1.7rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 400; }
.reihe-neu { padding: 0; border: 0; background: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reihe {
  display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand) 8px; scroll-padding-left: var(--rand);
}
.reihe::-webkit-scrollbar { display: none; }
.reihe .bildkarte { flex: none; width: 230px; scroll-snap-align: start; }
.reihe .bildkarte:nth-child(4n+1) { width: 200px; } .reihe .bildkarte:nth-child(4n+1) .bildkarte-bild { aspect-ratio: 5 / 6; }
.reihe .bildkarte:nth-child(4n+2) { width: 290px; } .reihe .bildkarte:nth-child(4n+2) .bildkarte-bild { aspect-ratio: 9 / 8; }
.reihe .bildkarte:nth-child(4n+3) { width: 250px; } .reihe .bildkarte:nth-child(4n+3) .bildkarte-bild { aspect-ratio: 4 / 5; }
.reihe .bildkarte:nth-child(4n+4) { width: 270px; } .reihe .bildkarte:nth-child(4n+4) .bildkarte-bild { aspect-ratio: 5 / 4; }

/* Bildkarte (Reihe und alle Jobs) */
.bildkarte { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.bildkarte-bild { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--creme-tief); }
.bildkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bildkarte:hover .bildkarte-bild img { transform: scale(1.035); } }
.bildkarte-video {
  position: absolute; z-index: 1; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 7px;
  border-radius: 999px; background: rgba(246, 242, 237, 0.9); color: var(--tinte); font-size: 11px; font-weight: 600;
}
.bildkarte-beispiel { left: auto; right: 10px; padding-left: 8px; background: rgba(15, 18, 22, 0.55); color: #fff; }
.bildkarte-titel { margin-top: 10px; font-size: 13.5px; line-height: 1.3; font-weight: 500; }
.bildkarte-info { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--grau); }
.bildkarte-grund { margin-top: 8px; padding-left: 9px; border-left: 2px solid var(--marke); font-size: 13px; line-height: 1.4; }

/* ---------- 3. Alle Jobs: links große Bildkarten, rechts ruhiges Such-Feld (Vorbild Surflehrer-Seite) ---------- */
.alle { display: flex; flex-direction: column; gap: 8px; margin: 8px; padding: 8px; border-radius: 20px; background: var(--creme-tief); }
.panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 18px 26px; border-radius: 16px; background: var(--creme-hell); }
.panel-oben { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 30px; }
.panel-logo img { width: auto; height: 28px; }
.panel-nav { display: flex; flex-direction: row; gap: 22px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.panel-zahl a { color: var(--tinte); }
.panel-mitte { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Eine Schrift für alles (Lipo, 18.10.2026), „Hallo“ darum in Instrument Sans fett statt Serifenschrift */
.panel-gruss { margin: 0; font-size: clamp(4.4rem, 22vw, 9.5rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.055em; }
.panel-titel { margin: 26px 0 18px; font-size: 20px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.panel-orte { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: 13px; }
.panel-orte button { padding: 4px 0; border: 0; background: none; color: var(--grau); cursor: pointer; transition: color 150ms ease; }
.panel-orte button:hover, .panel-orte button[aria-pressed="true"] { color: var(--tinte); }
.panel-orte .strich { width: 34px; height: 1px; background: var(--linie); }
.panel-pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.pille {
  min-height: 30px; padding: 0 12px; border: 1.5px solid var(--tinte); border-radius: 999px; background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.pille:active { transform: scale(0.96); }
.pille[aria-pressed="true"] { background: var(--tinte); color: var(--creme-hell); }
.panel-suche { display: flex; align-items: center; gap: 10px; width: min(100%, 300px); margin-top: 30px; padding: 0 2px 9px; border-bottom: 1px solid rgba(21, 21, 21, 0.45); color: var(--tinte); }
.panel-suche input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; outline: none; font: inherit; font-size: 14px; color: var(--tinte); }
.panel-suche input::placeholder { color: var(--grau); }
.panel-suche:focus-within { border-bottom-color: var(--tinte); }
.panel-zahl { margin: 16px 0 0; font-size: 12.5px; color: var(--grau); }
.panel-fuss { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; font-size: 12px; line-height: 1.45; }
.panel-fuss p { margin: 0; }
.stern { stroke: var(--tinte); stroke-width: 0.9; }

.karten { display: flex; flex-direction: column; gap: 8px; }
.jobkarte { position: relative; isolation: isolate; min-height: 360px; border-radius: 16px; overflow: hidden; background: var(--tinte); color: #fff; }
.jobkarte-bild { position: absolute; inset: 0; z-index: -1; }
.jobkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
/* Ohne Foto: Firmenfarbe, Initialen groß und leise unten rechts */
.jobkarte-bild .ohne-bild {
  align-items: end; justify-items: end; padding: 0 26px 6px 0;
  font-size: clamp(7rem, 22vw, 12rem); line-height: 1; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.16);
}
.jobkarte-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05) 52%, rgba(0, 0, 0, 0.25)); }
@media (hover: hover) and (pointer: fine) { .jobkarte:hover .jobkarte-bild img { transform: scale(1.03); } }
.jobkarte-oben { max-width: 78%; padding: 22px 20px 0; } /* nicht positioniert, damit der Link die ganze Karte abdeckt */
.jobkarte h3 { margin: 0; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.04; font-weight: 400; letter-spacing: -0.035em; text-wrap: balance; }
.jobkarte h3 .mwd { font-size: 0.42em; letter-spacing: 0; opacity: 0.8; white-space: nowrap; }
.jobkarte-link { color: inherit; text-decoration: none; }
.jobkarte-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.jobkarte-link:focus-visible { outline: none; }
.jobkarte:has(.jobkarte-link:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 3px; }
.jobkarte-oben p { margin: 12px 0 0; font-size: 10.5px; line-height: 1.4; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.jobkarte-tag {
  position: absolute; z-index: 2; top: 22px; right: 18px; padding: 5px 11px; border-radius: 999px;
  background: rgba(30, 30, 30, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.jobkarte-person {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; width: 84px; height: 104px; overflow: hidden;
  border-radius: 42px / 52px; border: 3px solid rgba(255, 255, 255, 0.92); background: var(--creme-tief);
}
.jobkarte-person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.jobkarte-person { transition: opacity 200ms ease; }
.jobkarte:has([data-details-knopf][aria-expanded="true"]) .jobkarte-person { opacity: 0; }
.jobkarte-knoepfe { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 6px; }
.pille-dunkel {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.88); color: #fff; font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.rund-dunkel {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20, 20, 20, 0.88); color: #fff; cursor: pointer; transition: transform 160ms var(--ease-out);
}
.rund-dunkel svg { transition: transform 260ms var(--ease-out); }
.rund-dunkel[aria-expanded="true"] svg { transform: rotate(45deg); }
.pille-dunkel:active, .rund-dunkel:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .pille-dunkel:hover, .rund-dunkel:hover { background: #000; } }
.jobkarte-details {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 70px; padding: 14px 16px; border-radius: 16px;
  background: rgba(246, 242, 237, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--tinte);
  font-size: 13.5px; line-height: 1.4; animation: details-rein 260ms var(--ease-out) both;
}
@keyframes details-rein { from { opacity: 0; transform: translateY(8px); } }
.jobkarte-details dl { margin: 0; display: grid; gap: 6px; }
.jobkarte-details dl div { display: flex; justify-content: space-between; gap: 14px; }
.jobkarte-details dt { color: var(--grau); }
.jobkarte-details dd { margin: 0; text-align: right; font-weight: 500; }
.jobkarte-details ul { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 6px; }
.jobkarte-details li { display: flex; align-items: center; gap: 8px; }
.jobkarte-details li .icon { flex: none; color: var(--grau); }
.jobkarte-beispiel { margin: 10px 0 0; font-size: 12px; color: var(--grau); }
.leer { margin: 0; padding: 40px 20px; border-radius: 16px; background: var(--creme-hell); text-align: center; color: var(--grau); }
.leer button { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--tinte); text-decoration: underline; cursor: pointer; }

/* ---------- Fuß ---------- */
.fuss {
  max-width: 1440px; margin: 0 auto; padding: 22px var(--rand) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie); font-size: 12.5px; color: var(--grau);
  display: flex; flex-direction: column; gap: 6px;
}
.fuss nav { display: flex; gap: 18px; }
.fuss nav a { color: var(--tinte); text-decoration: none; }
.fuss p { margin: 0; }

/* ---------- 4. Menü ---------- */
.menue {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: var(--nacht); color: #fff; opacity: 0; transition: opacity 280ms ease;
}
.menue.offen { opacity: 1; }
.menue-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.menue-kopf img { width: auto; height: 28px; }
.menue-zu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: #fff; cursor: pointer; }
.menue-mitte { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.menue-liste { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.menue-liste a {
  padding: 0 14px 4px; border-radius: 12px; color: #fff; text-decoration: none;
  font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.14; font-weight: 600; letter-spacing: -0.03em;
  transform: translateY(10px); opacity: 0; transition: background-color 160ms ease, color 160ms ease, transform 420ms var(--ease-out), opacity 420ms var(--ease-out);
}
.menue.offen .menue-liste a { transform: none; opacity: 1; }
.menue.offen .menue-liste a:nth-child(2) { transition-delay: 0s, 0s, 40ms, 40ms; }
.menue.offen .menue-liste a:nth-child(3) { transition-delay: 0s, 0s, 80ms, 80ms; }
.menue.offen .menue-liste a:nth-child(4) { transition-delay: 0s, 0s, 120ms, 120ms; }
.menue.offen .menue-liste a:nth-child(5) { transition-delay: 0s, 0s, 160ms, 160ms; }
.menue.offen .menue-liste a:nth-child(n+6) { transition-delay: 0s, 0s, 200ms, 200ms; }
.menue-liste a:hover, .menue-liste a:focus-visible, .menue-liste a[aria-current="true"] { background: var(--creme); color: var(--tinte); outline: none; }
.menue-bilder { display: none; }

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 700px) {
}
@media (min-width: 960px) {
  :root { --rand: 44px; }
  .kopf { padding: 26px 30px; }
  .logo img { height: 34px; }
  .start-nav, .seitennav-unten { position: absolute; z-index: 4; left: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
  .rahmen { min-height: calc(100svh - 24px); margin: 12px; border-radius: 24px; padding-bottom: 120px; }
  .start-text { padding: 110px 40px 90px; }
  .start-titel { font-size: clamp(4.4rem, 7.4vw, 7.6rem); }
  .start-unter { font-size: 14.5px; max-width: 46ch; }
  .menue-kopf { padding: 26px 30px; }
  .menue-mitte { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; }
  .menue-bilder { display: flex; gap: 16px; align-items: center; }
  .menue-bilder:first-child { justify-content: flex-end; margin-left: -70px; }
  .menue-bilder:last-child { justify-content: flex-start; margin-right: -70px; }
  .menue-bild { flex: none; width: 180px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #1b2026; }
  .menue-bild img { width: 100%; height: 100%; object-fit: cover; }
  .menue-bild .ohne-bild { font-size: 22px; }
  .start { height: calc(100vh - 24px); height: calc(100svh - 24px); margin: 12px; border-radius: 28px; }
  .start-text { padding: 90px 40px 80px; }
  .fuss { flex-direction: row; justify-content: space-between; align-items: center; }
  /* Alle Jobs: Karten links, Such-Feld rechts bleibt stehen */
  .alle { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 0; margin: 12px; padding: 12px; border-radius: 24px; }
  .karten { grid-column: 1; grid-row: 1; gap: 12px; padding-right: 12px; }
  .jobkarte { min-height: 420px; border-radius: 26px; }
  .jobkarte-oben { padding: 28px 28px 0; }
  .jobkarte h3 { font-size: clamp(2.2rem, 3.2vw, 3rem); }
  .jobkarte-tag { top: 28px; right: 24px; }
  .jobkarte-person { left: 20px; bottom: 20px; width: 104px; height: 128px; border-radius: 52px / 64px; }
  .jobkarte-knoepfe { right: 20px; bottom: 20px; }
  .jobkarte-details { left: 20px; right: 20px; bottom: 78px; }
  .panel {
    grid-column: 2; grid-row: 1; position: sticky; top: 12px; align-self: start; height: min(calc(100svh - 48px), 880px); min-height: 560px;
    justify-content: space-between; padding: 26px 40px 34px; border-radius: 0; background: none; border-left: 1px solid var(--linie);
  }
  .panel-oben { margin-bottom: 0; }
  .panel-nav { gap: 46px; }
  .panel-gruss { font-size: clamp(6rem, 10vw, 10rem); }
  .panel-titel { margin-top: 40px; font-size: 22px; }
  .panel-fuss { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}