/* ======================================================================
   Arbeitsautomat.de – Designsystem
   ----------------------------------------------------------------------
   Eine CSS-Datei für alle öffentlichen Seiten. Kein Framework.
   Marke: Automat-Blau #2E5CFF · Tinte #0B1330 · Signal-Gelb #FFC531
   Cache-Buster: Bei Änderungen das ?v=… in ALLEN HTML-Dateien mitziehen.
   ====================================================================== */

:root {
  --blau: #2E5CFF;
  --blau-dunkel: #1E42C8;
  --blau-hell: #EAF0FF;
  --tinte: #0B1330;
  --tinte-60: #4A5370;
  --tinte-40: #8A91A8;
  --gelb: #FFC531;
  --gelb-dunkel: #E8A500;
  --gruen: #17A05E;
  --gruen-hell: #E3F6ED;
  --rot: #E0433C;
  --rot-hell: #FDEBEA;
  --bg: #F6F8FE;
  --weiss: #FFFFFF;
  --linie: #E3E8F4;
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 8px 30px rgba(11, 19, 48, .08);
  --schatten-gross: 0 20px 60px rgba(11, 19, 48, .14);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --max: 1180px;
  /* Bewegung: drei Dauern und zwei Kurven für die ganze Plattform. Wer
     eine neue Animation baut, nimmt diese Werte – sonst bewegt sich jede
     Seite ein bisschen anders, und das wirkt unruhig statt lebendig.
     --kurve-raus nur für Dinge, die verschwinden (beschleunigt hinaus). */
  --dauer-kurz: 140ms;
  --dauer: 260ms;
  --dauer-lang: 520ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kurve-raus: cubic-bezier(.4, 0, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }
.lead { font-size: 1.18rem; color: var(--tinte-60); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* Grid- und Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen.
   Ohne min-width:0 gilt „min-width:auto": Ein langes Wort oder ein breites
   Kind zwingt die Spalte auf ihre Mindestbreite, die Seite wird breiter als
   das Display und lässt sich auf dem Handy seitlich schieben. Genau das ist
   hier passiert (375 px Fenster, 466 px Inhalt). */
.karten-2 > *, .karten-3 > *, .karten-4 > *, .schritte > *,
.hero-grid > *, .footer-grid > *, .stats > *, .felder-2 > * { min-width: 0; }
/* Lange Wörter (E-Mail-Adressen, Berufsbezeichnungen) umbrechen lassen */
.karte, .job-karte, .begruendung, .rechtstext { overflow-wrap: break-word; }
section { padding: 76px 0; }
section.eng { padding: 48px 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blau); background: var(--blau-hell);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.zentriert { text-align: center; }
.zentriert .kicker { margin-left: auto; margin-right: auto; }
.untertitel { max-width: 680px; margin: 0 auto 2.2em; color: var(--tinte-60); font-size: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 1.02rem; font-weight: 700; line-height: 1;
  padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none !important;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve),
              background-color var(--dauer-kurz) var(--kurve), border-color var(--dauer-kurz) var(--kurve),
              color var(--dauer-kurz) var(--kurve);
  white-space: nowrap;
}
.btn-blau { background: var(--blau); color: #fff; box-shadow: 0 8px 22px rgba(46, 92, 255, .35); }
.btn-blau:hover { background: var(--blau-dunkel); transform: translateY(-2px); }
.btn-gelb { background: var(--gelb); color: var(--tinte); box-shadow: 0 8px 22px rgba(255, 197, 49, .4); }
.btn-gelb:hover { background: #FFD35E; transform: translateY(-2px); }
.btn-hell { background: #fff; color: var(--tinte); border-color: var(--linie); }
.btn-hell:hover { border-color: var(--blau); color: var(--blau); }
.btn-ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.btn-ghost:hover { background: var(--blau-hell); }
.btn-gross { padding: 19px 36px; font-size: 1.1rem; }
.btn-klein { padding: 10px 18px; font-size: .92rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }
/* Knopf-Rückmeldung. Steht NACH den Varianten: :not([disabled]) hebt die
   Spezifität über „.btn-blau:hover", damit alle Knöpfe gleich weit (1 px)
   steigen statt je nach Farbe unterschiedlich. Beim Drücken sinkt der Knopf
   zurück und wird minimal kleiner – schneller als das Anheben, weil ein
   Klick sich sofort anfühlen muss. */
.btn:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 19, 48, .10); }
.btn-blau:not([disabled]):hover { box-shadow: 0 12px 28px rgba(46, 92, 255, .42); }
.btn-gelb:not([disabled]):hover { box-shadow: 0 12px 28px rgba(255, 197, 49, .5); }
.btn:not([disabled]):active { transform: translateY(0) scale(.98); transition-duration: var(--dauer-kurz); }
.btn:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

/* ---------- Header / Navigation ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
/* Gescrollte Kopfzeile (main.js setzt .gescrollt ab 8 px). Der Schatten
   liegt auf einem Pseudo-Element und wird nur über opacity eingeblendet –
   ein box-shadow-Übergang müsste bei jedem Bild neu gezeichnet werden.
   Höhe und Innenabstand bleiben unangetastet: Die Leiste darf beim
   Scrollen nicht springen. */
.header::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 6px 24px rgba(11, 19, 48, .09);
  opacity: 0; transition: opacity var(--dauer) var(--kurve);
}
.header.gescrollt { background: rgba(255, 255, 255, .97); }
.header.gescrollt::after { opacity: 1; }
.nav { display: flex; align-items: center; gap: 26px; height: 74px; }
/* Kein flex-gap: „Arbeitsautomat" und „.de" sind zwei Flex-Items, ein gap
   würde den Markennamen auseinanderreißen. Abstand kommt vom Bild-Margin. */
.logo { display: flex; align-items: center; font-weight: 800; font-size: 1.22rem; color: var(--tinte); text-decoration: none !important; letter-spacing: -.02em; white-space: nowrap; }
.logo img, .logo svg { width: 40px; height: 40px; margin-right: 11px; flex: none; }
.logo .tld { color: var(--blau); }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* Navigation.
   :not(.btn) ist hier nicht Zierde, sondern notwendig: „.nav-links a" hat
   eine Klasse UND ein Element (Spezifität 0-1-1) und schlägt damit „.btn-blau"
   (0-1-0). Ohne den Ausschluss bekam der Knopf „Kostenlos registrieren"
   dunkelgraue Schrift auf blauem Grund – Kontrast 2,2:1, praktisch
   unlesbar – und obendrein das Innenmaß der Navigation statt seines eigenen.
   Wer hier eine Eigenschaft ergänzt, muss den Ausschluss mitziehen. */
.nav-links a:not(.btn) { color: var(--tinte-60); font-weight: 600; font-size: .98rem; padding: 9px 13px; border-radius: 10px; white-space: nowrap; }
.nav-links a:not(.btn):hover { color: var(--blau); background: var(--blau-hell); text-decoration: none; }
.nav-links a.aktiv:not(.btn) { color: var(--blau); }
/* Unterstrich gleitet beim Überfahren von links herein – zeigt, wohin der
   Klick führt, ohne dass die Zeile springt (transform statt width). */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--blau); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dauer) var(--kurve);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: 10px; align-items: center; margin-left: 8px; }
.burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 26px; height: 3px; background: var(--tinte); border-radius: 3px; margin: 5px 0; transition: .25s; }

/* Fortschrittsbalken oben */
#scrollbalken { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blau), var(--gelb)); z-index: 100; }

/* ---------- Hero ---------- */
.hero { padding: 84px 0 70px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 420px at 12% -8%, rgba(46, 92, 255, .12), transparent 65%),
    radial-gradient(600px 380px at 95% 12%, rgba(255, 197, 49, .16), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
/* Gelbe Unterlegung – gilt überall, nicht nur im Hero (Stellenbörse und
   Bewerberbörse nutzen sie in ihren Überschriften ebenfalls). */
.marker { position: relative; white-space: nowrap; }
.marker::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: 6%; height: 34%;
  background: var(--gelb); z-index: -1; border-radius: 6px; opacity: .85;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 22px 0 30px; padding: 0; list-style: none; }
.hero-badges li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .96rem; color: var(--tinte-60); }
.hero-badges .ok { color: var(--gruen); font-weight: 800; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Tipp-Zeile über der Überschrift (main.js, AA.tipper). Feste Mindesthöhe:
   Zwischen zwei Begriffen ist das Wort kurz leer, und auf schmalen
   Displays bricht „Setter im Homeoffice" um – beides darf die Überschrift
   darunter nicht zucken lassen. */
.hero-tipper { color: var(--blau); font-weight: 800; font-size: .92rem; letter-spacing: .02em; line-height: 1.5; min-height: 1.5em; margin: 0 0 12px; }
.hero-tipper [data-tipper].tippt::after {
  content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -.15em; background: currentColor; animation: tipper-cursor 1s steps(1) infinite;
}
@keyframes tipper-cursor { 50% { opacity: 0; } }
@media (max-width: 360px) { .hero-tipper { min-height: 3em; } }

/* ---------- Karten ---------- */
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--schatten);
}
.karten-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.karten-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.karten-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.karte .icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--blau-hell); font-size: 1.5rem; margin-bottom: 16px;
}
.karte.gelb .icon { background: #FFF3D6; }
.karte.gruen .icon { background: var(--gruen-hell); }
.hover-lift { transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--schatten-gross); }

/* Häkchen-Listen */
.haken { list-style: none; padding: 0; margin: 0 0 1.2em; }
.haken li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.haken li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen);
  font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ---------- Zwei-Seiten-Wahl (Bewerber / Arbeitgeber) ---------- */
.seiten-karte { position: relative; overflow: hidden; padding: 38px 34px; }
.seiten-karte::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.seiten-karte.bewerber::before { background: var(--blau); }
.seiten-karte.arbeitgeber::before { background: var(--gelb); }
.seiten-karte .rolle { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.seiten-karte.bewerber .rolle { color: var(--blau); }
.seiten-karte.arbeitgeber .rolle { color: var(--gelb-dunkel); }

/* ---------- Schritte (So funktioniert's) ---------- */
.schritte { counter-reset: schritt; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.schritt { counter-increment: schritt; position: relative; }
.schritt .nr {
  width: 46px; height: 46px; border-radius: 50%; background: var(--tinte); color: var(--gelb);
  font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.schritt .nr::before { content: counter(schritt); }

/* Tabs */
.tabs { display: inline-flex; background: var(--blau-hell); border-radius: 999px; padding: 5px; gap: 4px; margin-bottom: 34px; }
.tabs button {
  font-family: var(--font); font-size: .98rem; font-weight: 700; color: var(--tinte-60);
  background: transparent; border: 0; padding: 11px 24px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.tabs button.aktiv { background: var(--weiss); color: var(--blau); box-shadow: 0 3px 12px rgba(11, 19, 48, .1); }
/* Neu sichtbares Reiter-Panel (main.js setzt .tab-ein und nimmt sie nach
   dem Ende wieder weg). Bewusst eine Animation ohne fill-mode: Danach
   bleibt kein transform am Panel hängen, das sonst einen neuen
   Stapelkontext für alles darin erzeugen würde. Das alte Panel wird sofort
   versteckt – beide gleichzeitig sichtbar hieße doppelte Höhe für einen
   Moment und damit ein Springen der Seite. */
.tab-ein { animation: tab-ein var(--dauer) var(--kurve); }
@keyframes tab-ein { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Chips und Fortschrittsbalken (Profil) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; list-style: none; }
.chip {
  font-size: .86rem; font-weight: 600; color: var(--tinte); background: var(--bg);
  border: 1px solid var(--linie); padding: 6px 13px; border-radius: 999px;
}
.chip.blau { background: var(--blau-hell); color: var(--blau); border-color: transparent; }
.chip.gruen { background: var(--gruen-hell); color: var(--gruen); border-color: transparent; }
.chip.gelb { background: #FFF3D6; color: #9A6E00; border-color: transparent; }
.balken { height: 9px; border-radius: 999px; background: var(--linie); overflow: hidden; margin: 6px 0 14px; }
.balken i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blau), var(--gelb)); }

/* ---------- Job-Karten (Stellenbörse) ---------- */
.job-karte { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.job-karte .kopf { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.job-karte h3 { margin: 0; font-size: 1.15rem; }
.job-karte .firma { color: var(--tinte-60); font-weight: 600; font-size: .95rem; }
.job-karte .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--tinte-60); font-size: .92rem; }
.job-karte .meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-karte .fuss { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); }
.job-karte .lohn { font-weight: 800; color: var(--gruen); }
.badge-neu { background: var(--gruen-hell); color: var(--gruen); font-size: .78rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.badge-48 { background: var(--tinte); color: var(--gelb); font-size: .78rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
/* Kartenkopf darf auf jeder Breite umbrechen: Breite Firmenlogos plus lange
   Wörter („Maschinenbediener") plus Abzeichen passten zwischen 400 und
   1300 px nicht in eine Zeile – das Abzeichen ragte aus der Karte und die
   ganze Seite lief quer. Jetzt schrumpft der Textblock, und was dann noch
   fehlt, rutscht als Abzeichen in die nächste Zeile. Gilt auch für die
   Bewerberkarten (gleiche Klasse). */
.job-karte .kopf { flex-wrap: wrap; row-gap: 8px; }
.job-karte .kopf > div:not(.logo-kachel) { flex: 1 1 180px; min-width: 0; }
.job-karte .kopf h3 { overflow-wrap: anywhere; hyphens: auto; }
.job-karte .chip { white-space: normal; max-width: 100%; }
.job-karte .meta span { min-width: 0; max-width: 100%; }

/* Filterleiste */
.filter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--schatten); margin-bottom: 30px;
}
.filter input, .filter select { flex: 1; min-width: 160px; }
/* Der Umkreis gehört sichtbar zum Ortsfeld: nicht mitwachsen, sonst rückt
   er auf breiten Bildschirmen weit davon ab. width:auto, weil die
   allgemeine Feldregel (width:100%) ihn sonst in eine eigene Zeile
   schiebt. Schmal (Spalte, align-items: stretch) wird er trotzdem voll breit. */
.filter select.umkreis-wahl { flex: 0 0 auto; width: auto; min-width: 150px; }
/* Rückt an die Filterleiste heran, damit der Hinweis als Antwort auf die
   Ortseingabe gelesen wird und nicht als eigener Abschnitt. */
.umkreis-hinweis { margin: -18px 0 18px; font-size: .92rem; color: var(--tinte-60); }
/* Die Suchagent-Leiste zieht sich per negativem Rand an die Filterleiste
   (bewerber.css); unter dem Hinweis klebte sie sonst mit 4 px daran. */
.umkreis-hinweis:not([hidden]) + .suchagent-leiste { margin-top: 0; }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 700; font-size: .95rem; margin: 0 0 6px; }
/* Eingabefelder.
   Die Typen stehen einzeln da, damit Kästchen, Schalter und Dateifelder
   unberührt bleiben – eine pauschale Regel auf `input` würde die mitnehmen.
   Beim Ergänzen neuer Felder muss der Typ hier mit hinein, sonst zeichnet
   der Browser sein eigenes, deutlich flacheres Feld (so geschehen bei
   datetime-local in der Terminvereinbarung: 22 px statt 48 px hoch – auf
   dem Handy kaum zu treffen). */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=datetime-local], input[type=time],
input[type=url], input[type=search], input[type=password],
select, textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--tinte);
  background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--radius-klein);
  padding: 13px 16px; outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blau); }
input.fehler, select.fehler, textarea.fehler { border-color: var(--rot); }
.feld { margin-bottom: 18px; }
.feld .hinweis { font-size: .86rem; color: var(--tinte-40); margin-top: 5px; }
.feld .fehltext { display: none; font-size: .87rem; color: var(--rot); font-weight: 600; margin-top: 5px; }
.feld.zeigt-fehler .fehltext { display: block; }
.felder-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
/* Kippschalter – ein Kästchen, das wie ein Schiebeschalter aussieht.
   Lag bis eben nur im <style> von profil.html, wurde aber auch im
   Firmenbereich verwendet: Dort blieb die Klasse wirkungslos, und die
   Benachrichtigungsliste zeigte statt Schaltern nackte 13-px-Kästchen.
   Gemeinsam genutztes gehört ins gemeinsame Stylesheet. */
.schalter { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.schalter input { width: 46px; height: 26px; appearance: none; -webkit-appearance: none;
  background: var(--linie); border-radius: 999px; position: relative; cursor: pointer;
  transition: background .2s; flex: none; margin: 0; border: 0; padding: 0; }
.schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(11, 19, 48, .25); }
.schalter input:checked { background: var(--gruen); }
.schalter input:checked::after { left: 23px; }
.schalter input:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.checkzeile { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; font-size: .93rem; color: var(--tinte-60); cursor: pointer; }
.checkzeile input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blau); }
.form-meldung { display: none; border-radius: var(--radius-klein); padding: 15px 18px; font-weight: 600; margin-bottom: 18px; }
.form-meldung.ok { display: block; background: var(--gruen-hell); color: var(--gruen); }
.form-meldung.fehler { display: block; background: var(--rot-hell); color: var(--rot); }
/* Honeypot: für Menschen unsichtbar */
.hp-feld { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Rollen-Umschalter im Registrierungsformular */
.rollen-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.rollen-wahl label {
  border: 2px solid var(--linie); border-radius: var(--radius-klein); padding: 16px;
  cursor: pointer; text-align: center; font-weight: 700; transition: .15s; margin: 0;
}
.rollen-wahl input { position: absolute; opacity: 0; }
.rollen-wahl label:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.rollen-wahl .klein { display: block; font-size: .84rem; font-weight: 500; color: var(--tinte-40); margin-top: 3px; }

/* ---------- Zahlen / Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stats .wert { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; color: var(--blau); letter-spacing: -.02em; }
.stats .label { color: var(--tinte-60); font-weight: 600; }

/* ---------- Timeline (Jobwechsel-Automatik) ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--linie); }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -32px; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--weiss); border: 4px solid var(--blau);
}
.timeline li.gelb::before { border-color: var(--gelb); }
.timeline li.gruen::before { border-color: var(--gruen); }
.timeline b { display: block; }
.timeline .wann { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-40); }

/* ---------- FAQ / Accordion ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); margin-bottom: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; font-weight: 700; padding: 19px 52px 19px 22px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blau); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .antwort { padding: 0 22px 20px; color: var(--tinte-60); }
/* Aufklappen gleitet statt zu springen – ohne JavaScript und ohne
   zusätzlichen Wrapper im HTML: ::details-content IST der Wrapper um alles
   außer <summary>. Höhe über grid-template-rows 0fr → 1fr, weil „height:
   auto" sich nicht animieren lässt. content-visibility muss mit
   (allow-discrete), sonst ist der Inhalt beim Zuklappen sofort weg.
   Browser ohne ::details-content verwerfen die Regeln und klappen wie
   bisher ohne Animation. */
.faq details::details-content {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows var(--dauer) var(--kurve), content-visibility var(--dauer) allow-discrete;
}
.faq details[open]::details-content { grid-template-rows: 1fr; }
/* Der untere Abstand steckt als ::after IM Inhalt statt als padding: Ein
   Innenabstand ließe sich nicht auf 0 zusammendrücken, die Zeile bliebe
   20 px hoch und spränge erst am Ende des Zuklappens weg. */
.faq details .antwort { min-height: 0; overflow: hidden; padding-bottom: 0; }
.faq details .antwort::after { content: ''; display: block; height: 20px; }

/* ---------- Abschluss-CTA ---------- */
.cta-band { background: var(--tinte); border-radius: 24px; padding: 60px 40px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 85% 20%, rgba(46, 92, 255, .5), transparent 60%),
              radial-gradient(400px 260px at 10% 90%, rgba(255, 197, 49, .25), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .75); max-width: 560px; margin: 0 auto 1.8em; }

/* ---------- Footer ---------- */
.footer { background: var(--tinte); color: rgba(255, 255, 255, .75); padding: 60px 0 32px; margin-top: 90px; }
.footer a { color: rgba(255, 255, 255, .75); }
.footer a:hover { color: #fff; }
/* Fünf Spalten: Marke, Bewerber, Arbeitgeber, Rechtliches, Jobs nach Beruf.
   Mit nur vier rutschte „Jobs nach Beruf" allein in eine zweite Zeile. */
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; margin-bottom: 44px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer .logo { color: #fff; margin-bottom: 14px; }
/* ---------- Datenschutz-Hinweis ----------
   Eine schmale Leiste unten, keine Überlagerung der Seite: Wer weiterlesen
   will, kann das sofort – der Hinweis wartet, statt zu blockieren.
   Auf dem Handy liegt der Knopf unter dem Text und über die volle Breite,
   damit er mit dem Daumen erreichbar bleibt. */
.ds-hinweis {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: flex; align-items: center; gap: 18px;
  max-width: 860px; margin: 0 auto;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-gross);
  padding: 16px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.ds-hinweis.sichtbar { opacity: 1; transform: none; }
.ds-text { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--tinte-60); }
.ds-text b { color: var(--tinte); }
.ds-text a { color: var(--blau); font-weight: 600; white-space: nowrap; }
.ds-hinweis .ds-ok { flex-shrink: 0; }

@media (max-width: 620px) {
  .ds-hinweis { flex-direction: column; align-items: stretch; gap: 12px; padding: 15px 17px; }
  .ds-hinweis .ds-ok { width: 100%; }
  .ds-text { font-size: .85rem; }
}
/* Reduzierte Bewegung für den Hinweis: siehe Sammelblock am Dateiende. */

/* Entwickler-Hinweis: bewusst leiser als der Rest der Fußzeile. Er soll
   auffindbar sein, nicht auffallen – der Link hebt sich erst beim Überfahren
   ab. Auf schmalen Schirmen rutscht er unter die anderen Angaben und
   bekommt eine eigene Zeile über die volle Breite. */
.entwickelt { color: rgba(255, 255, 255, .42); font-size: .84rem; }
.entwickelt a { color: rgba(255, 255, 255, .62); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .18); transition: color .18s, border-color .18s; }
.entwickelt a:hover, .entwickelt a:focus-visible { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.entwickelt .herz { color: #FF6B6B; }

.footer-unten { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .9rem; }

/* ---------- Reveal-Animationen ----------
   WICHTIG: Der unsichtbare Startzustand gilt NUR, wenn JavaScript läuft
   (main.js setzt .js auf <html>). Ohne diese Kopplung wäre der halbe
   Seiteninhalt dauerhaft unsichtbar, sobald das Skript fehlschlägt,
   blockiert wird oder der IntersectionObserver nicht auslöst – der Besucher
   sähe eine leere Seite und wüsste nicht, warum. Inhalt muss immer da sein;
   die Animation ist nur Zugabe. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.sichtbar { opacity: 1; transform: none; }
/* Mit „.js .reveal" davor: Die Kurzschrift „transition" oben setzt die
   Verzögerung mit höherer Spezifität auf 0 zurück – ohne den Vorsatz
   blieben diese Klassen wirkungslos (so war es bis 10/2026). */
.js .reveal.reveal-verz-1, .reveal-verz-1 { transition-delay: .1s; }
.js .reveal.reveal-verz-2, .reveal-verz-2 { transition-delay: .2s; }
.js .reveal.reveal-verz-3, .reveal-verz-3 { transition-delay: .3s; }
/* Gestaffeltes Einblenden in Kartenrastern (.karten-2/3/4, .schritte) und
   bei AA.reveal(): main.js schreibt die Verzögerung (Index × 70 ms) direkt
   ans Element. Ist die Karte da, setzt main.js .reveal-fertig – ab dann
   gilt keine Verzögerung mehr, sonst reagierte eine Karte auch beim
   Überfahren noch mit Wartezeit. Für .hover-lift kommt der eigene, kurze
   Übergang zurück, und das Anheben schlägt das „transform: none" des
   Einblendens (vorher hob sich eine eingeblendete Karte gar nicht). */
.js .reveal.reveal-fertig { transition-delay: 0s; }
.js .reveal.reveal-fertig.hover-lift { transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
.js .reveal.sichtbar.hover-lift:hover { transform: translateY(-3px); }
/* Karten-Neigung (main.js, AA.neigung): main.js setzt nur die Winkel
   --neig-x/--neig-y, das Transform entsteht hier – zusammen mit der
   Anhebung von .hover-lift (--hub). Zwei getrennte transform-Angaben
   würden sich gegenseitig überschreiben. Steht hinter den Regeln oben
   und ist spezifischer als „.js .reveal.sichtbar.hover-lift:hover".
   Nur beim Überfahren: Im Ruhezustand gehört transform dem Einblenden. */
.neigung-an .karte:hover,
.js .neigung-an .reveal.sichtbar.karte:hover {
  transform: perspective(800px) translateY(var(--hub, 0px)) rotateX(var(--neig-x, 0deg)) rotateY(var(--neig-y, 0deg));
}
.neigung-an .hover-lift:hover { --hub: -3px; }

/* ---------- Preis-Karten ---------- */
.preis-karte { display: flex; flex-direction: column; position: relative; }
.preis-karte .haken { flex: 1; }
.preis-karte.pro { border: 2px solid var(--blau); box-shadow: 0 16px 46px rgba(46, 92, 255, .18); }
.preis-kopf { border-bottom: 1px solid var(--linie); padding-bottom: 20px; margin-bottom: 22px; }
.preis-kopf h3 { margin-bottom: 10px; }
.preis { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.preis .betrag { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.preis .zeit { color: var(--tinte-60); font-weight: 600; }
.pro-fahne {
  position: absolute; top: -14px; right: 24px;
  background: var(--gelb); color: var(--tinte); font-size: .8rem; font-weight: 800;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 197, 49, .5);
}

/* ---------- Avatare / Bilder ---------- */
.avatar {
  border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(135deg, var(--blau), #7A9BFF); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-gross { width: 88px; height: 88px; font-size: 2rem; }
.avatar-mittel { width: 62px; height: 62px; font-size: 1.4rem; }
.avatar-klein { width: 52px; height: 52px; font-size: 1.1rem; }
/* Firmenlogos: eckig mit Rahmen statt rund – Logos sind selten kreisförmig */
.logo-kachel {
  width: 52px; height: 52px; border-radius: 12px; flex: none; overflow: hidden;
  background: var(--bg); border: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--tinte-60);
}
/* Innenabstand, damit die runden Ecken der Kachel nichts vom Logo abschneiden */
.logo-kachel img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* Stellenkarten: Firmenlogos sind meist Querformat (3:1 bis 5:1). In einer
   quadratischen 44-px-Kachel schrumpfte ein solches Logo auf rund 8 px Höhe –
   nicht lesbar. Die Kachel wächst deshalb mit dem Logo in die Breite (bis
   104 px), die Höhe bleibt 44 px, damit alle Karten gleich hoch beginnen. */
.logo-kachel.logo-breit { width: auto; min-width: 44px; max-width: 104px; height: 44px; padding: 0 5px; }
.logo-kachel.logo-breit img { width: auto; max-width: 94px; height: 100%; }

.bild-wahl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Das rohe Datei-Feld wird überall ausgeblendet – bedient wird es über den
   gestalteten Knopf daneben. Die Regel steht bewusst NICHT nur unter
   .bild-wahl: im Bewerberprofil liegt das Feld direkt im Formular, dort war
   sonst das ungestylte „Datei auswählen – keine ausgewählt" zu sehen. */
input[type=file] { display: none; }

/* ---------- Match-Karten ---------- */
.match-karte { position: relative; display: flex; flex-direction: column; gap: 12px; }
.score {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--gruen-hell); color: var(--gruen);
  font-weight: 800; font-size: .9rem; padding: 5px 13px; border-radius: 999px;
}
.score.mittel { background: #FFF3D6; color: #9A6E00; }
.begruendung {
  background: var(--bg); border-left: 3px solid var(--blau); border-radius: 0 8px 8px 0;
  padding: 11px 14px; font-size: .93rem; color: var(--tinte-60); font-style: italic;
}
.match-aktionen { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.match-aktionen .btn { flex: 1; }
.treffer-band {
  background: linear-gradient(120deg, var(--gruen), #2BC47C); color: #fff;
  border-radius: var(--radius-klein); padding: 14px 18px; font-weight: 700; margin-bottom: 14px;
}
.treffer-band a { color: #fff; text-decoration: underline; }

/* Pro-Hinweis (Sperrfläche für Nicht-Pro) */
.pro-sperre {
  text-align: center; padding: 44px 26px;
  background: linear-gradient(160deg, var(--blau-hell), #fff);
  border: 2px dashed var(--blau); border-radius: var(--radius);
}
.pro-sperre .gross { font-size: 2.6rem; margin-bottom: 8px; }

/* ---------- Kleinkram ---------- */
.abstand-oben { margin-top: 40px; }
.hinweis-box { background: #FFF8E6; border: 1px solid #F3DFA6; border-radius: var(--radius-klein); padding: 16px 20px; font-size: .95rem; }
.leer-meldung { text-align: center; color: var(--tinte-40); padding: 50px 0; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2em; }
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.6em; }
.rechtstext { max-width: 820px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .karten-3, .schritte { grid-template-columns: 1fr 1fr; }
  .karten-4, .stats { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Leiste eng gesetzt – auf ALLEN Breiten, nicht nur im Zwischenbereich.
   Die großzügigen Grundwerte oben passen nicht in die 1136 px Inhaltsbreite
   von .wrap: arbeitgeber.html (fünf Links + zwei Knöpfe) lief damit selbst
   auf 1440 px über den Rand, und mehr Platz gibt es auch auf großen Schirmen
   nicht. Eng gesetzt bleiben dort rund 45 px Luft. Bis 1180 px übernimmt
   das Klappmenü (siehe unten). Das Logo nur in der Kopfzeile verkleinern
   (der Fußbereich bleibt wie gehabt); unter 400 px gilt die eigene
   Regel für schmale Schirme weiter unten. */
.nav { gap: 14px; }
.nav-links { gap: 2px; }
.nav-links a:not(.btn) { padding: 9px 9px; font-size: .93rem; }
.nav-cta { gap: 7px; margin-left: 4px; }
.nav-cta .btn { padding: 10px 13px; font-size: .88rem; }
@media (min-width: 401px) {
  .nav .logo { font-size: 1.1rem; }
  .nav .logo img, .nav .logo svg { width: 36px; height: 36px; margin-right: 9px; }
}
@media (max-width: 1150px) {
  .logo { font-size: 1.1rem; }
  .logo img, .logo svg { width: 36px; height: 36px; margin-right: 9px; }
}

/* ---------- Navigation: eigener Haltepunkt ----------
   Die Leiste trägt Logo + vier Links + zwei Knöpfe. Das passt erst ab rund
   940 px nebeneinander – auf einem Tablet im Hochformat (768 px) lief die
   Leiste sonst über den Bildschirmrand hinaus und schob die ganze Seite
   seitlich. Deshalb klappt das Menü hier früher zusammen als das übrige
   Layout (das erst bei 760 px einspaltig wird). Seit 10.10.2026 schon ab
   1180 px: Mit fünf Links (arbeitgeber.html) passt die Leiste auch eng
   gesetzt erst ab rund 1150 px – 30 px Reserve für abweichende
   Schriftwiedergabe. */
@media (max-width: 1180px) {
  .nav-links {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    flex-direction: column; align-items: stretch; padding: 14px 22px 22px; gap: 6px;
    box-shadow: var(--schatten);
  }
  .nav-links.offen { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 14px; }
  .nav-cta { flex-direction: column; margin: 10px 0 0; align-items: stretch; }
  .nav-cta .btn { width: 100%; }
  .burger { display: block; }
}

@media (max-width: 760px) {
  section { padding: 56px 0; }
  .karten-2, .karten-3, .schritte, .felder-2, .rollen-wahl { grid-template-columns: 1fr; }
  /* Footer einspaltig – zweispaltig sprengen die langen Linktexte das Display */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding: 56px 0 48px; }
  .hero-ctas .btn { width: 100%; }
  .cta-band { padding: 44px 24px; }
  .preis .betrag { font-size: 2.2rem; }
  .match-aktionen { flex-direction: column; }
  .tabs { display: flex; width: 100%; }
  .tabs button { flex: 1; padding: 11px 10px; font-size: .92rem; }
  .filter { flex-direction: column; align-items: stretch; }
  .filter input, .filter select { width: 100%; }
  .bild-wahl { flex-direction: column; align-items: flex-start; }
}

/* Sehr schmale Geräte (iPhone SE u. ä.) */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .karte { padding: 22px 18px; }
  /* Lohnangabe und Bewerbungs-Knopf untereinander. Nebeneinander brauchen
     sie rund 335 px – auf einem 320-px-Display schob das die ganze Seite
     seitlich weg. Der Knopf trägt „⚡ Blitzbewerbung" und darf nicht
     umbrechen (white-space: nowrap), also stapeln wir stattdessen. */
  .job-karte .fuss { flex-direction: column; align-items: stretch; gap: 10px; }
  .job-karte .fuss .btn { width: 100%; }
  .job-karte .kopf { flex-wrap: wrap; }
  .btn { padding: 15px 20px; font-size: .98rem; }
  .btn-gross { padding: 17px 24px; font-size: 1.02rem; }
  h1 { font-size: 1.95rem; }
  .logo { font-size: 1.08rem; }
  .logo img, .logo svg { width: 34px; height: 34px; margin-right: 9px; }
}

/* Hervorgehobene Anzeige (Pro-Arbeitgeber) – dezent, aber erkennbar.
   Bewusst kein grelles Banner: Die Anzeige soll auffallen, ohne dass die
   Börse nach bezahlter Werbung aussieht. */
.job-karte.hervor { border-color: var(--gelb); box-shadow: 0 10px 34px rgba(255, 197, 49, .22); }
.job-karte.hervor::before {
  content: '⭐ Empfohlen'; position: absolute; top: -11px; left: 22px;
  background: var(--gelb); color: var(--tinte); font-size: .74rem; font-weight: 800;
  padding: 4px 11px; border-radius: 999px;
}
.job-karte { position: relative; }

/* ---------- Chat ---------- */
.chat-raum { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; min-height: 420px; background: var(--weiss); }
.chat-liste { border-right: 1px solid var(--linie); overflow-y: auto; max-height: 520px; background: var(--bg); }
.chat-eintrag { padding: 13px 15px; border-bottom: 1px solid var(--linie); cursor: pointer; transition: .12s; }
.chat-eintrag:hover { background: var(--blau-hell); }
.chat-eintrag.aktiv { background: var(--weiss); border-left: 3px solid var(--blau); padding-left: 12px; }
.chat-eintrag .name { font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: 7px; }
.chat-eintrag .vorschau { color: var(--tinte-40); font-size: .82rem; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-punkt { background: var(--blau); color: #fff; border-radius: 99px; font-size: .7rem;
  font-weight: 800; padding: 1px 7px; margin-left: auto; }
.chat-verlauf { display: flex; flex-direction: column; }
.chat-nachrichten { flex: 1; overflow-y: auto; max-height: 400px; padding: 18px; display: flex;
  flex-direction: column; gap: 10px; }
.blase { max-width: 74%; padding: 10px 14px; border-radius: 14px; font-size: .93rem; line-height: 1.5; }
.blase.fremd { background: var(--bg); border-bottom-left-radius: 4px; align-self: flex-start; }
.blase.eigen { background: var(--blau); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.blase.system { background: var(--signal-weich, #FFF8E6); border: 1px solid #F3DFA6; align-self: center;
  max-width: 92%; text-align: center; font-size: .87rem; color: #6B5200; }
.blase .zeit { display: block; font-size: .72rem; opacity: .6; margin-top: 4px; }
/* Neu eingetroffene Blase: kurz einblenden und 4 px aufsteigen.
   Nur an Blasen setzen, die WÄHREND der Ansicht dazukommen (eigene
   gesendete oder per Abruf eingetroffene) – nicht beim ersten Aufbau des
   Verlaufs, sonst flackert der ganze Chat beim Öffnen.
   Beispiel: blase.className = 'blase eigen blase-neu'; */
.blase-neu { animation: blase-neu var(--dauer) var(--kurve); }
@keyframes blase-neu { from { opacity: 0; transform: translateY(4px); } }
.chat-eingabe { border-top: 1px solid var(--linie); padding: 12px; display: flex; gap: 9px; align-items: flex-end; }
.chat-eingabe textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; }
@media (max-width: 700px) {
  /* Der Entwickler-Hinweis bekommt seine eigene Zeile, statt sich neben
     Copyright und Rechtslinks zu quetschen. */
  .footer-unten { flex-direction: column; gap: 10px; }
  .entwickelt { padding-top: 4px; }

  .chat-raum { grid-template-columns: 1fr; }
  .chat-liste { max-height: 190px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .blase { max-width: 88%; }
}

/* ---------- Termine ---------- */
.termin-karte { border: 1px solid var(--linie); border-left: 4px solid var(--blau);
  border-radius: var(--radius-klein); padding: 16px; margin-bottom: 12px; background: var(--weiss); }
.termin-karte.bestaetigt { border-left-color: var(--gruen); background: var(--gruen-hell); }
.termin-wahl { display: grid; gap: 8px; margin: 12px 0; }
.termin-wahl button { text-align: left; font-weight: 600; }

/* ---------- Skelett-Lader ----------
   Platzhalter, solange eine Liste lädt (AA.skelett() in main.js baut sie
   aus den echten Kartenklassen). Grund in der Linienfarbe, darüber läuft
   ein heller Streifen. Der Streifen ist ein Pseudo-Element, das per
   transform wandert – eine Animation von background-position müsste der
   Browser bei jedem Bild neu malen. Das ist die einzige Dauerbewegung der
   Plattform; sie endet, sobald der echte Inhalt die Platzhalter ersetzt.
   .skelett-zeile/-titel/-kreis funktionieren allein oder zusammen mit
   .skelett. */
.skelett, .skelett-zeile, .skelett-titel, .skelett-kreis {
  display: block; position: relative; overflow: hidden;
  background: var(--linie); border-radius: var(--radius-klein);
}
.skelett::after, .skelett-zeile::after, .skelett-titel::after, .skelett-kreis::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%);
  animation: skelett-schimmer 1.4s linear infinite;
}
@keyframes skelett-schimmer { to { transform: translateX(100%); } }
.skelett-zeile { height: .9em; margin: .5em 0; }
.skelett-titel { height: 1.3em; width: 60%; }
.skelett-kreis { border-radius: 50%; width: 52px; height: 52px; flex: none; }

/* ---------- Toasts ----------
   Kurze Rückmeldungen („Gespeichert") über AA.toast() in main.js. Der
   Bereich liegt unten rechts und lässt Klicks durch, nur die Toasts selbst
   fangen sie. Ist der Datenschutz-Hinweis sichtbar (ebenfalls unten fest),
   schiebt main.js den Bereich per --toast-versatz darüber – über transform,
   damit das Ausweichen gleitet statt zu springen.
   Farben: heller Grund der jeweiligen Signalfarbe, Text in Tinte. Grüne
   Schrift auf Hellgrün läge bei rund 3:1 – zu wenig für Fließtext. */
.toast-bereich {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: calc(100% - 40px); max-width: 380px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--toast-versatz, 0px)));
  transition: transform var(--dauer) var(--kurve);
}
.toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--radius-klein);
  background: var(--blau-hell); color: var(--tinte);
  border: 1px solid rgba(11, 19, 48, .06); box-shadow: var(--schatten-gross);
  font-size: .93rem; font-weight: 600; line-height: 1.45; overflow-wrap: break-word;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
  will-change: transform, opacity;   /* lebt nur Sekunden – danach ist das Element weg */
}
.toast.ein { opacity: 1; transform: none; }
.toast.raus { opacity: 0; transform: translateY(8px); transition-timing-function: var(--kurve-raus); }
.toast-symbol {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: -1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blau); color: #fff; font-size: .78rem; font-weight: 800;
}
.toast-text { min-width: 0; }
.toast-ok { background: var(--gruen-hell); }
.toast-ok .toast-symbol { background: var(--gruen); }
.toast-fehler { background: var(--rot-hell); }
.toast-fehler .toast-symbol { background: var(--rot); }
@media (max-width: 620px) {
  .toast-bereich { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* ---------- Schmale Schirme: verschachtelte Karten ----------
   MUSS HINTER DEN TERMIN- UND CHATREGELN STEHEN (danach folgt nur noch
   der Sammelblock für reduzierte Bewegung). Termin- und Chatkarten werden weiter oben
   definiert; stünde diese Regel im Medienblock bei 400 px (weiter oben im
   Dokument), würde die spätere Basisregel sie bei gleicher Spezifität
   wieder überschreiben – die Seite lief dann auf 320 px trotzdem über.

   Zur Sache: Eine .termin-karte steckt in einer .karte, beide bringen
   Innenabstand mit. Auf 320 px gehen allein dafür rund 80 px weg, und ein
   Datums-/Zeitfeld zeichnet der Browser nicht beliebig schmal – zusammen
   schob das die ganze Seite seitlich weg. */
@media (max-width: 400px) {
  .termin-karte { padding: 13px 12px; }
  .karte .karte { padding: 16px 14px; }
  input[type="datetime-local"], input[type="date"], input[type="time"] { min-width: 0; }

  /* Knöpfe dürfen hier umbrechen. Sonst gilt für .btn white-space: nowrap –
     richtig für kurze Beschriftungen, aber „Stellenanzeige veröffentlichen"
     braucht am Stück 294 px und schob auf einem 320-px-Display die ganze
     Seite seitlich weg. Zweizeilig ist unschöner als einzeilig, aber
     unendlich viel besser als eine Seite, die sich quer schieben lässt. */
  .btn { white-space: normal; text-wrap: balance; }
}

/* ---------- Schaufenster: „Hier wird gerade gesucht" ----------
   Startseite (Kacheln), arbeitgeber.html (Logo-Streifen), jobs.html
   (Firmenfilter-Chip), stelle.php (Firmen-Karte). Logos kommen eingepasst
   (lib/upload.php) und werden hier nur noch begrenzt, nie beschnitten –
   ein abgeschnittener Firmenname wäre schlimmer als etwas Weißraum. */
.firmen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.firma-kachel {
  display: flex; flex-direction: column; min-width: 0; padding: 20px;
  color: var(--tinte); text-decoration: none;
}
.firma-kachel:hover { text-decoration: none; }
.firma-kachel-logo { height: 64px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; }
.firma-kachel-logo img { display: block; max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.firma-kachel-name {
  font-size: .98rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.firma-kachel-meta { margin-top: 4px; font-size: .85rem; color: var(--tinte-60); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .firmen-raster { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .firma-kachel { padding: 16px; }
}
/* Laufband ab fünf Firmen (main.js, AA.laufband): Die Spur trägt die
   Kacheln doppelt und wandert um genau die Hälfte – Abstand deshalb als
   margin-right an jeder Kachel statt gap, sonst fehlte am Nahtpunkt eine
   Lücke und das Band ruckte. overflow: hidden am Rahmen hält die Seite
   auch bei 320 px fest; die Maske lässt die Kanten auslaufen. */
.firmen-raster.laufband-rahmen {
  display: block; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.laufband { display: flex; width: max-content; padding: 6px 0 10px; animation: laufband var(--laufband-dauer, 30s) linear infinite; }
.laufband-rahmen:hover .laufband, .laufband-rahmen:focus-within .laufband { animation-play-state: paused; }
.laufband .firma-kachel { flex: none; width: 210px; margin-right: 16px; }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (max-width: 620px) {
  .laufband .firma-kachel { width: 170px; }
}

/* Logo-Streifen auf arbeitgeber.html: ruhig, ohne Kartenrahmen */
.firmen-streifen { padding: 30px 0; }
.firmen-streifen-titel {
  text-align: center; font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-40); margin-bottom: 16px;
}
.firmen-streifen-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
.firmen-streifen-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
  color: var(--tinte); font-weight: 700; font-size: .92rem; max-width: 100%;
}
.firmen-streifen-link:hover { text-decoration: none; }
.firmen-streifen-link img { display: block; max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.firmen-streifen-link .avatar { width: 40px; height: 40px; font-size: .95rem; }
.firmen-streifen-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Firmenfilter-Chip in jobs.html */
.firma-filter { margin-bottom: 14px; }
.firma-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--blau-hell); color: var(--tinte); border-radius: 999px;
  padding: 0 4px 0 16px; font-size: .92rem; font-weight: 600; min-height: 40px; white-space: nowrap;
}
.firma-filter-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firma-filter-chip button {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--blau); font: inherit; font-weight: 800;
}
.firma-filter-chip button:hover { background: rgba(46, 92, 255, .12); }

/* Firmen-Karte auf stelle.php */
.firmen-karte { padding: 20px 22px; margin-bottom: 22px; }
.firmen-karte-kopf { display: flex; gap: 14px; align-items: center; }
.firmen-karte-logo { flex: none; max-width: 150px; display: flex; align-items: center; }
.firmen-karte-logo img { display: block; max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.firmen-karte-text { display: flex; flex-direction: column; min-width: 0; }
.firmen-karte-name { font-size: 1.05rem; }
.firmen-karte-ort { color: var(--tinte-60); font-size: .94rem; }
.firmen-karte-web { font-size: .92rem; font-weight: 600; align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; }
.firmen-karte-alle { display: inline-block; margin-top: 6px; padding: 8px 0; font-weight: 700; }
@media (max-width: 400px) {
  .firmen-karte-kopf { flex-wrap: wrap; }
}

/* ---------- Seitenwechsel ----------
   Kurzes Überblenden zwischen zwei Seiten statt hartem Weiß-Blitz.
   Bewusst nur 160 ms: länger fühlt sich ein Klick träge an. Browser ohne
   View Transitions ignorieren den Block; bei reduzierter Bewegung gilt er
   gar nicht erst (no-preference). */
@keyframes seite-aus { to { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: seite-aus 160ms var(--kurve-raus) both; }
  ::view-transition-new(root) { animation: seite-ein 160ms var(--kurve) both; }
}

/* ---------- Reduzierte Bewegung: Sammelblock ----------
   MUSS DER LETZTE @media-BLOCK DER DATEI BLEIBEN (tools/selbsttest.d/
   motion.sh prüft das). Er schaltet jede Bewegung ab, die weiter oben
   definiert ist – stünde eine Regel dahinter, liefe sie bei Menschen,
   denen Bewegung buchstäblich übel wird, trotzdem. Neue Animationen hier
   nachtragen. Inhalte bleiben sichtbar, nur ohne Weg dorthin: Reveal ist
   sofort da, Zähler zeigen den Endwert (main.js), Toasts erscheinen ohne
   Gleiten, das Skelett steht still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.sichtbar { opacity: 1; transform: none; transition: none; }
  .btn, .hover-lift, .js .reveal.reveal-fertig.hover-lift { transition: none; }
  .ds-hinweis { transition: none; transform: none; }
  .header::after { transition: none; }
  .tab-ein, .blase-neu { animation: none; }
  .skelett::after, .skelett-zeile::after, .skelett-titel::after, .skelett-kreis::after { animation: none; display: none; }
  .toast-bereich { transition: none; }
  .toast, .toast.ein, .toast.raus { transition: none; transform: none; }
  .nav-links a:not(.btn)::after { transition: none; }
  .hero-tipper [data-tipper]::after { animation: none; display: none; }
  .laufband { animation: none; }
  .faq details::details-content { transition: none; }
}