/* ============================================================
   r12-popup.css, Gestaltungsrunde 12.10.2026, Paket „Karriere-Popup“
   Aufgaben aus der Anpassungsliste des Teams: P01 Startseite: Seitenleiste von rechts, P02 Unterseiten: Karte unten links hochwertiger, P03 Handy: Seitenleiste.

   Eingebunden von quelle/bauen.py (R12_PAKETE) auf allen Seiten von physiopark.berlin und physiopark-zeitlos.de, nach allen
   bestehenden Dateien, mit ?v=-Stempel (STEMPEL_DATEIEN).
   Nur dieses Paket schreibt in diese Datei. Gemeinsame Bauteile
   (bauteile.css/js, bewegung.css/js, seiten.css) zuerst wiederverwenden;
   Mockup Brandkit 15.png ist verbindlich. Skripte nie inline (CSP),
   prefers-reduced-motion respektieren.
   Leer ausgeliefert vom Strukturpaket A, 12.10.2026.
   ============================================================ */

/* ------------------------------------------------------------
   Aufbau (bauen.py karriere_hinweis_bauen):
     .kp            Hülle, data-kp-start="ja" auf der Startseite
     .kp-schleier   abgedunkelter Grund hinter der Seitenleiste
     .kp-leiste     Seitenleiste von rechts (role=dialog, modal)
     .kp-karte      Karte unten links, nur Unterseiten ab 761 px
     .kp-reiter     Reiter am rechten Rand, öffnet die Seitenleiste
   Zustände setzt r12-popup.js: .kp-offen an .kp, .kp-da an Karte
   und Reiter, html.kp-sperre (Seite steht still), dazu die alte
   Klasse html.karriere-hinweis-offen, auf die bewegung.js (Handyleiste)
   und bauteile.css (Knopf „nach oben“) hören.
   Bauteile aus dem Mockup Brandkit 15.png: Pille mit orangem Punkt,
   Vorteilskasten „Das erwartet Dich bei uns“ (grüner Rand, Pille im
   Rand, erste Zeile grün hinterlegt, Zeilentitel in Lora), orange
   Knöpfe, Pfeilkreise.
   ------------------------------------------------------------ */

.kp { --kp-breite: clamp(380px, 31vw, 520px); --kp-kurve: cubic-bezier(.22, 1, .36, 1); }
.kp [hidden] { display: none !important; }

/* Puls: der orange Punkt der Pille, lebendig, aber klein */
.kp-puls {
  position: relative;
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
}
.kp-puls::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0;
  animation: kp-puls 2.4s var(--kurve-aus) infinite;
}
@keyframes kp-puls {
  0% { transform: scale(.5); opacity: .9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* ============ Schleier und Seitenleiste ============ */
html.kp-sperre { overflow: hidden; scrollbar-gutter: stable; }

.kp-schleier {
  position: fixed; inset: 0;
  z-index: 1090;
  background: rgba(36, 57, 10, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 420ms ease;
}
.kp-offen .kp-schleier { opacity: 1; }

.kp-leiste {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1100;
  width: var(--kp-breite);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0, var(--papier-warm) 55%, #EEF6DF 100%);
  border-radius: var(--bogen-gross) 0 0 var(--bogen-gross);
  box-shadow: -28px 0 70px rgba(36, 57, 10, .30);
  /* Die ganze Leiste scrollt (Kopfbild geht mit), Fuß und Kreuz stehen */
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(104%);
  transition: transform 560ms var(--kp-kurve);
  outline: none;
  overscroll-behavior: contain;
}
.kp-offen .kp-leiste { transform: none; }
.kp-leiste.kp-zieht { transition: none; }

/* Kopfbild mit Zahl der Stellen und Schließen */
.kp-kopfbild {
  position: relative;
  flex: none;
  aspect-ratio: 1040 / 572;
  max-height: 34vh;
  width: 100%;
  overflow: hidden;
  background: var(--karte-hell);
}
.kp-kopfbild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.08);
  transition: transform 1400ms var(--kp-kurve);
}
.kp-offen .kp-kopfbild img { transform: none; }
.kp-kopfbild::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.kp-live {
  position: absolute;
  left: var(--m5); top: var(--m5);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--bogen-pille);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(36, 57, 10, .18);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--gruen-dunkel);
}
.kp-zu {
  position: fixed;
  top: var(--m4); right: var(--m4);
  z-index: 5;   /* über dem scrollenden Rumpf (z-index 1) */
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--tinte);
  box-shadow: 0 6px 18px rgba(36, 57, 10, .2);
  cursor: pointer;
  transition: transform var(--zeit-tipp) var(--kurve-aus), background var(--zeit-tipp) linear;
}
.kp-zu:hover { transform: rotate(90deg); background: var(--karte-hell); }
.kp-zu svg { width: 20px; height: 20px; }
.kp-zu:focus-visible, .kp-karte-zu:focus-visible, .kp-reiter:focus-visible,
.kp-karte-auf:focus-visible, .kp-stelle:focus-visible {
  outline: 3px solid var(--orange-aktion);
  outline-offset: 3px;
}

.kp-rumpf {
  flex: none;
  padding: 0 var(--m8) var(--m6);
  margin-top: calc(-1 * var(--m6));
  position: relative;
  z-index: 1;
}
.kp-pille { margin: 0 0 var(--m4); }
.kp-titel {
  margin: 0 0 var(--m3);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.55rem, 1.2vw + 1rem, 2rem);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--tinte);
}
.kp-titel .zeile-gruen { color: var(--gruen-mittel); font-weight: 400; }
.kp-titel .punkt { color: var(--orange); }
.kp-text {
  margin: 0 0 var(--m6);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinte-weich);
}
.kp-zwischen {
  margin: 0 0 var(--m3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}

/* Stellen als Zeilen mit Bild und Pfeilkreis */
.kp-stellen { list-style: none; margin: 0 0 var(--m8); padding: 0; display: grid; gap: 10px; }
.kp-stelle {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--m4);
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: #fff;
  color: var(--tinte);
  text-decoration: none;
  box-shadow: var(--schatten-1);
  transition: transform 240ms var(--kurve-aus), box-shadow 240ms var(--kurve-aus), border-color 240ms linear;
}
.kp-stelle img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.kp-stelle-text { display: grid; gap: 3px; min-width: 0; }
.kp-stelle-text strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.25;
  color: var(--tinte);
}
.kp-stelle-text span { font-size: .8rem; line-height: 1.35; color: var(--tinte-weich); }
.kp-stelle-pfeil {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gruen);
  border-radius: 50%;
  color: var(--gruen-dunkel);
  transition: background 240ms linear, color 240ms linear, transform 240ms var(--kurve-aus);
}
.kp-stelle-pfeil svg { width: 16px; height: 16px; }
.kp-stelle:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.kp-stelle:hover .kp-stelle-pfeil { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; transform: translateX(3px); }

/* Vorteilskasten wie im Mockup („Das erwartet Dich bei uns“) */
.kp-vorteile {
  position: relative;
  padding: var(--m6) var(--m4) var(--m4);
  border: 2px solid rgba(145, 199, 61, .55);
  border-radius: var(--bogen-karte);
  background: #fff;
}
.kp-vorteile-pille {
  position: absolute;
  top: 0; left: var(--m5);
  transform: translateY(-50%);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-pille);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  color: var(--gruen-dunkel);
}
.kp-vorteile-pille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.kp-vorteile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kp-vorteile li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.kp-vorteile li + li { border-top: 1px solid var(--linie); border-radius: 0; }
.kp-vorteile strong { font-family: var(--font-sub); font-weight: 700; font-size: 1rem; color: var(--tinte); }
.kp-vorteile span { font-size: .8rem; line-height: 1.4; color: var(--tinte-weich); }
.kp-vorteile .kp-vorteil-stark { background: var(--gruen-dunkel); }
.kp-vorteile .kp-vorteil-stark strong, .kp-vorteile .kp-vorteil-stark span { color: #fff; }
.kp-vorteile .kp-vorteil-stark + li { border-top: 0; }

.kp-fuss {
  flex: none;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding: var(--m4) var(--m8) calc(var(--m4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kp-cta { width: 100%; justify-content: center; min-height: 50px; font-size: .86rem; }
.kp-cta svg { transition: transform 240ms var(--kurve-aus); }
.kp-cta:hover svg { transform: translateX(4px); }
.kp-hotline { margin: var(--m2) 0 0; text-align: center; font-size: .8rem; color: var(--tinte-weich); }
.kp-hotline a { color: var(--gruen-link); font-weight: 600; white-space: nowrap; }

/* Inhalt läuft nach dem Hereingleiten gestaffelt ein */
.kp-offen .kp-rumpf > *,
.kp-offen .kp-stellen > li { animation: kp-auf 620ms var(--kp-kurve) both; }
.kp-offen .kp-rumpf > :nth-child(1) { animation-delay: 140ms; }
.kp-offen .kp-rumpf > :nth-child(2) { animation-delay: 190ms; }
.kp-offen .kp-rumpf > :nth-child(3) { animation-delay: 240ms; }
.kp-offen .kp-rumpf > :nth-child(4) { animation-delay: 280ms; }
.kp-offen .kp-stellen > li:nth-child(1) { animation-delay: 320ms; }
.kp-offen .kp-stellen > li:nth-child(2) { animation-delay: 370ms; }
.kp-offen .kp-stellen > li:nth-child(3) { animation-delay: 420ms; }
.kp-offen .kp-stellen > li:nth-child(4) { animation-delay: 470ms; }
.kp-offen .kp-stellen > li:nth-child(n+5) { animation-delay: 520ms; }
.kp-offen .kp-rumpf > .kp-stellen { animation: none; }
.kp-offen .kp-rumpf > .kp-vorteile { animation-delay: 540ms; }
@keyframes kp-auf {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ============ Karte unten links (Unterseiten ab 761 px) ============ */
.kp-karte {
  position: fixed;
  left: var(--m6);
  bottom: var(--m6);
  z-index: 95;
  width: min(370px, calc(100vw - 2 * var(--m6)));
  padding: var(--m5) var(--m5) var(--m4);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--m3);
  align-items: center;
  border: 1px solid rgba(145, 199, 61, .45);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 235, 130, .38), rgba(200, 235, 130, 0) 60%),
    #fff;
  box-shadow: 0 22px 50px rgba(36, 57, 10, .22), 0 2px 6px rgba(36, 57, 10, .06);
  opacity: 0;
  transform: translateY(22px) scale(.98);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms var(--kurve-aus), transform 620ms var(--kp-kurve),
              box-shadow 240ms var(--kurve-aus), visibility 0s linear 320ms;
}
.kp-karte.kp-da {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.kp-karte.kp-da:hover { transform: translateY(-3px); box-shadow: 0 28px 60px rgba(36, 57, 10, .26), 0 2px 6px rgba(36, 57, 10, .06); }
.kp-gesichter { display: flex; padding-left: 10px; }
.kp-gesichter img {
  width: 46px; height: 46px;
  margin-left: -12px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(36, 57, 10, .16);
}
.kp-karte-pille {
  margin: 0;
  padding-right: 30px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}
.kp-karte-pille .kp-puls { width: 8px; height: 8px; }
.kp-karte-titel {
  grid-column: 1 / -1;
  margin: var(--m4) 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinte);
}
.kp-karte-titel span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: .84rem;
  text-transform: none;
  color: var(--tinte-weich);
}
.kp-karte-auf {
  grid-column: 1 / -1;
  margin-top: var(--m4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m3);
  padding: 10px 10px 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--orange-aktion);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--zeit-tipp) linear;
}
/* Die ganze Karte ist Fläche des Knopfs */
.kp-karte-auf::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.kp-karte-auf:hover { background: var(--orange-tief); }
.kp-karte-pfeil {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  transition: transform 240ms var(--kurve-aus);
}
.kp-karte-pfeil svg { width: 16px; height: 16px; }
.kp-karte:hover .kp-karte-pfeil { transform: translateX(3px); }
.kp-karte-zu {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 1;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinte-weich);
  cursor: pointer;
}
.kp-karte-zu:hover { background: var(--karte-hell); color: var(--tinte); }
.kp-karte-zu svg { width: 18px; height: 18px; }

/* ============ Reiter am rechten Rand ============ */
.kp-reiter {
  position: fixed;
  right: 0;
  top: 52%;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 9px 16px 10px;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: var(--gruen-tief);
  color: #fff;
  box-shadow: -8px 10px 30px rgba(36, 57, 10, .28);
  font-family: var(--font-head);
  cursor: pointer;
  opacity: 0;
  transform: translate(100%, -50%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 520ms var(--kp-kurve), opacity 260ms linear, background var(--zeit-tipp) linear,
              visibility 0s linear 520ms;
}
.kp-reiter.kp-da {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.kp-reiter.kp-da:hover { background: var(--gruen-dunkel); transform: translate(-4px, -50%); }
.kp-reiter-zahl {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-aktion);
  font-weight: 800;
  font-size: .82rem;
  box-shadow: 0 0 0 3px rgba(248, 130, 70, .35);
}
.kp-reiter-wort {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Offenes Menü: Karte und Reiter treten zurück (bauteile.js T1b
   sperrt die alte .karriere-hinweis, nicht diese) */
html.menue-offen .kp-karte,
html.menue-offen .kp-reiter { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============ Handy und Tablet ============ */
@media (max-width: 760px) {
  .kp { --kp-breite: min(90vw, 440px); }
  .kp-leiste { border-radius: 20px 0 0 20px; }
  .kp-kopfbild { max-height: 23vh; }
  .kp-rumpf { padding: 0 var(--m5) var(--m5); }
  .kp-fuss { padding-left: var(--m5); padding-right: var(--m5); }
  .kp-titel { font-size: 1.5rem; }
  .kp-text { font-size: .9rem; margin-bottom: var(--m5); }
  .kp-stelle { grid-template-columns: 48px 1fr auto; gap: var(--m3); padding: 8px 10px 8px 8px; }
  .kp-stelle img { width: 48px; height: 48px; }
  .kp-stelle-pfeil { width: 30px; height: 30px; }
  /* Am Handy keine Karte: sie deckte 2026-10-06 gut 40 Prozent ab (P03) */
  .kp-karte { display: none !important; }
  .kp-reiter { padding: 10px 7px 13px 8px; gap: 8px; top: 56%; }
  .kp-reiter-zahl { width: 24px; height: 24px; font-size: .78rem; }
  .kp-reiter-wort { font-size: .7rem; }
}
@media (max-width: 359px) {
  .kp { --kp-breite: calc(100vw - 20px); }
  .kp-rumpf { padding: 0 var(--m4) var(--m4); }
  .kp-stelle { grid-template-columns: 40px 1fr auto; gap: 10px; }
  .kp-stelle img { width: 40px; height: 40px; border-radius: 8px; }
  .kp-stelle-pfeil { width: 28px; height: 28px; }
  .kp-fuss { padding-left: var(--m4); padding-right: var(--m4); }
  .kp-stelle-text strong { font-size: .86rem; }
}
/* Niedrige Fenster: Kopfbild flacher, damit die Stellen im Bild bleiben */
@media (max-height: 700px) {
  .kp-kopfbild { max-height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-leiste, .kp-schleier, .kp-karte, .kp-reiter, .kp-kopfbild img { transition: none !important; }
  .kp-kopfbild img { transform: none; }
  .kp-offen .kp-rumpf > *, .kp-offen .kp-stellen > li { animation: none; }
  .kp-puls::after { animation: none; opacity: 0; }
  .kp-karte, .kp-karte.kp-da:hover { transform: none; }
}

/* ============ Nachbesserung Handyprüfung 12.10.2026 ============
   Kopfbild: Die Pille „4 offene Stellen“ lag über dem Gesicht der linken
   Person, das Schließen über dem Kopf der rechten. Der Ausschnitt zeigt
   jetzt das Laub über den Köpfen, die Pille steht unten rechts auf dem
   hellen Verlauf, neben „Wir stellen ein“. Ein heller Schleier oben gibt
   dem Schließen-Knopf Grund. */
.kp-kopfbild img { object-position: 50% 0; }
.kp-kopfbild::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 34%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(36, 57, 10, .28), rgba(36, 57, 10, 0));
  pointer-events: none;
}
.kp-live { top: auto; left: auto; right: var(--m5); bottom: 12px; z-index: 2; }

/* Chip in der Handyleiste (r12-popup.js): Teamgesicht, Zahl der Stellen.
   Ersetzt am Handy den senkrechten Reiter, der über dem Fließtext lag. */
.kp-chip { display: none; }
@media (max-width: 760px) {
  .handy-leiste.mit-kp-chip { gap: 10px; align-items: center; }
  .kp-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 4px 12px 4px 4px;
    border: 1.5px solid var(--gruen);
    border-radius: var(--bogen-pille);
    background: #fff;
    color: var(--gruen-dunkel);
    font-family: var(--font-head);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36, 57, 10, .12);
  }
  .kp-chip img {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--orange-aktion);
  }
  .kp-chip-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
  .kp-chip-text strong { font-weight: 800; font-size: .8rem; }
  .kp-chip-text span { font-weight: 600; font-size: .64rem; letter-spacing: .04em; color: var(--tinte-weich); }
  .kp-chip:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 2px; }
  .handy-leiste.mit-kp-chip .handy-leiste-cta { min-width: 0; padding-inline: 12px; font-size: .74rem; line-height: 1.25; }
  /* Reiter ohne Handyleiste (Startseite): 24 px breit, so breit wie der
     Seitenrand. Er liegt damit neben dem Text, nicht darüber. */
  .kp-reiter { width: 24px; padding: 7px 0 9px; gap: 6px; border-radius: 10px 0 0 10px; }
  .kp-reiter-zahl { width: 18px; height: 18px; font-size: .66rem; box-shadow: 0 0 0 2px rgba(248, 130, 70, .35); }
  .kp-reiter-wort { font-size: .56rem; letter-spacing: .12em; }
}
@media (max-width: 359px) {
  .kp-chip-text span { display: none; }
  .kp-chip { padding-right: 10px; }
}

@media print {
  .kp { display: none !important; }
}