/* Seite „Unser Team“ (/das-team/): Fotostapel im Seitenkopf, Personen mit Filter (js/team.js), „Wir sind ein Team, …“ als
   Karten, die sich beim Scrollen stapeln, Jobs-Band. Gestaltung wie die Startseite (Bausteine in style.css); Klassen mit Präfix
   team-, nach style.css einbinden. Bewegung nur endlich und nicht bei „Bewegung reduzieren“. */

/* ---------- Fotostapel im Seitenkopf (Andrea Tissen, 2026-10-22: „auf witzige und kreative art mehrere Teamfotos … evtl. ein
   Slider oder animiert“): Polaroids liegen schräg übereinander. Beim Laden fallen sie nacheinander auf den Stapel; Klick aufs
   oberste Foto oder „Nächstes Foto“ wirft es nach rechts hinaus und legt es nach hinten, „Mischen“ mischt neu (js/team.js).
   Lage im Stapel über data-pos (0 = oben). Ohne JavaScript liegt der Stapel still da, ohne Knöpfe. ---------- */
.team-stapel { width: min(100%, 500px); margin-inline: auto; }
.team-stapel__fotos { position: relative; aspect-ratio: 1 / .84; }
.team-stapel__karte {
  --tx: 0%; --ty: 0%; --rot: 0deg;
  position: absolute; left: 8%; top: 4%; width: 84%; margin: 0;
  padding: 3.4% 3.4% 0; border-radius: 6px; background: var(--white);
  box-shadow: 0 2px 4px rgba(0, 38, 80, .08), 0 26px 48px -22px rgba(0, 38, 80, .55);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transition: transform .6s var(--ease), opacity .45s var(--ease), box-shadow .3s var(--ease);
}
.team-stapel__karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--tile-2); }
.team-stapel__karte figcaption { padding: .65em .3em .85em; color: var(--ink); font-size: clamp(.9375rem, .85rem + .35vw, 1.0625rem); font-weight: 600; line-height: 1.3; text-align: center; }
.team-stapel__karte[data-pos="0"] { z-index: 6; --rot: -2.5deg; }
.team-stapel__karte[data-pos="1"] { z-index: 5; --rot: 4.5deg; --tx: 5%; --ty: 2.5%; }
.team-stapel__karte[data-pos="2"] { z-index: 4; --rot: -7deg; --tx: -5%; --ty: 3.5%; }
.team-stapel__karte[data-pos="3"] { z-index: 3; --rot: 2deg; opacity: 0; }
.team-stapel__karte[data-pos="4"] { z-index: 2; --rot: 2deg; opacity: 0; }
.team-stapel__karte[data-pos="5"] { z-index: 1; --rot: 2deg; opacity: 0; }
/* Das oberste Foto fliegt rechts hinaus, bevor es nach hinten wandert */
.team-stapel__karte.ist-raus { z-index: 7; --tx: 70%; --ty: -8%; --rot: 22deg; opacity: 0; }
.js .team-stapel__karte[data-pos="0"] { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .team-stapel__karte[data-pos="0"]:hover { --rot: 0deg; --ty: -2%; box-shadow: 0 2px 4px rgba(0, 38, 80, .08), 0 34px 60px -24px rgba(0, 38, 80, .6); }
}
/* „Klick mich!“-Aufkleber, nur mit JavaScript und bis zum ersten Blättern */
.team-stapel__tipp {
  position: absolute; z-index: 8; top: 0; right: 2%;
  display: none; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 99px; background: var(--gradient); color: var(--white);
  box-shadow: 0 10px 22px -10px rgba(0, 38, 80, .7);
  font-size: .875rem; font-weight: 600; line-height: 1.3; rotate: 8deg; pointer-events: none;
}
.team-stapel__tipp .icon { width: 1em; height: 1em; }
.js .team-stapel__tipp { display: inline-flex; }
.team-stapel.ist-benutzt .team-stapel__tipp { display: none; }
.team-stapel__steuer { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1rem; }
.js .team-stapel__steuer { display: flex; }
.team-stapel__knopf, .team-stapel__mischen {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--white); color: var(--primary);
  box-shadow: var(--shadow-s); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease);
}
.team-stapel__knopf { width: 44px; padding: 0; }
.team-stapel__mischen { padding: 0 1.1rem; }
.team-stapel__knopf .icon, .team-stapel__mischen .icon { width: 15px; height: 15px; }
.team-stapel__knopf:hover, .team-stapel__mischen:hover { border-color: var(--primary); transform: translateY(-1px); }
.team-stapel__zahl { min-width: 4.5em; color: var(--muted); font-size: .9375rem; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  /* Beim Laden fallen die drei sichtbaren Fotos nacheinander auf den Stapel, danach wackelt der Aufkleber kurz */
  .js .team-stapel__karte:is([data-pos="0"], [data-pos="1"], [data-pos="2"]) { animation: team-stapel-fallen .7s var(--ease) both; }
  .js .team-stapel__karte[data-pos="2"] { animation-delay: .1s; }
  .js .team-stapel__karte[data-pos="1"] { animation-delay: .3s; }
  .js .team-stapel__karte[data-pos="0"] { animation-delay: .5s; }
  .js .team-stapel.ist-bereit .team-stapel__karte { animation: none; }
  .js .team-stapel__tipp { animation: team-stapel-tipp .5s var(--ease) 1.3s both, team-stapel-wackeln .6s ease-in-out 2s 2; }
}
@media (prefers-reduced-motion: reduce) {
  .team-stapel__karte { transition: none; }
}
@keyframes team-stapel-fallen { from { opacity: 0; transform: translate(var(--tx), calc(var(--ty) - 18%)) rotate(calc(var(--rot) - 14deg)) scale(1.08); } }
@keyframes team-stapel-tipp { from { opacity: 0; scale: .4; } }
@keyframes team-stapel-wackeln { 0%, 100% { rotate: 8deg; } 30% { rotate: -4deg; } 60% { rotate: 12deg; } }

/* ---------- Wir sind ein Team, … (Andrea Tissen, 2026-10-22: „stelle diesen abschnitt anders/ kreativer dar vllt auch
   animiert“): links Überschrift und das hochkante Gruppenfoto als Polaroid (bleibt am Rechner stehen), rechts fünf Karten, die beim
   Scrollen oben kleben bleiben und sich übereinander schieben (position: sticky, kein JavaScript). Beim Einblenden springt das
   Icon auf und das Schlüsselwort wird unterstrichen. overflow: clip statt hidden, damit sticky im Abschnitt funktioniert. ---------- */
.team-werte-sektion { overflow: clip; }
.team-werte { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.team-werte .section-head { margin-bottom: 0; }
.team-werte__bild {
  width: min(76%, 300px); margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 10px 10px 0; border-radius: 6px; background: var(--white); rotate: -3deg;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7);
}
.team-werte__bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--tile-2); }
.team-werte__bild figcaption { padding: .6rem .2rem .75rem; color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: center; }
.team-werte__liste { display: grid; gap: clamp(1rem, 3vw, 1.75rem); }
.team-wert {
  --nr-farbe: rgba(0, 73, 148, .35);
  position: sticky; top: calc(var(--header-h) + var(--header-gap) + 1.25rem + var(--i) * .9rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.5rem, 4vw, 2.5rem);
  min-height: clamp(220px, 24vw, 290px); padding: clamp(1.4rem, 3.5vw, 2.25rem);
  border-radius: var(--radius-l); background: var(--white); color: var(--ink);
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .35), 0 24px 48px -24px rgba(0, 0, 0, .55);
}
.team-wert--verlauf { --nr-farbe: rgba(255, 255, 255, .5); background: var(--gradient-diag); color: var(--white); }
.team-wert--hellblau { background: var(--tile-2); }
.team-wert--dunkel { --nr-farbe: rgba(255, 255, 255, .5); background: linear-gradient(150deg, var(--primary-900), var(--primary)); color: var(--white); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45), 0 24px 48px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.team-wert__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.team-wert__icon { display: grid; place-items: center; width: clamp(48px, 5vw, 60px); aspect-ratio: 1; border-radius: 16px; background: var(--gradient); color: var(--white); box-shadow: 0 12px 24px -12px rgba(0, 73, 148, .9); }
.team-wert--verlauf .team-wert__icon, .team-wert--dunkel .team-wert__icon { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.team-wert__icon .icon { width: 44%; height: 44%; }
.team-wert__nr { color: transparent; font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; -webkit-text-stroke: 1.5px var(--nr-farbe); }
.team-wert__text { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); font-weight: 700; line-height: 1.25; text-wrap: pretty; }
/* „… in dem“ kursiv wie der Zusatz der H1 */
.team-werte__in { display: block; margin-bottom: .35rem; color: var(--accent-700); font-size: .6em; font-style: italic; font-weight: 600; }
.team-wert--verlauf .team-werte__in, .team-wert--dunkel .team-werte__in { color: var(--hell); }
.team-wert mark { padding-inline: .04em; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% .14em no-repeat; color: inherit; }
.team-wert--verlauf mark, .team-wert--dunkel mark { background-image: linear-gradient(var(--hell), var(--hell)); }
@media (prefers-reduced-motion: no-preference) {
  .js .team-wert[data-reveal] { opacity: 1; translate: none; }
  .js .team-wert .team-wert__icon { scale: .3; rotate: -25deg; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) .15s, rotate .6s cubic-bezier(.34, 1.56, .64, 1) .15s; }
  .js .team-wert.is-visible .team-wert__icon { scale: 1; rotate: 0deg; }
  .js .team-wert mark { background-size: 0% .14em; transition: background-size 1s var(--ease) .35s; }
  .js .team-wert.is-visible mark { background-size: 100% .14em; }
}
@media (min-width: 1024px) {
  .team-werte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .team-werte__kopf { position: sticky; top: calc(var(--header-h) + var(--header-gap) + 2rem); }
}

/* Personen wie zuvor auf Startseite 2 (Andrea Tissen, 2026-10-20): Filter nach Bereich als Pillen wie auf neu, Porträts 4:5 als
   weiße Kacheln in Farbe (die blaue Einfärbung ist seit 2026-10-22 entfernt, Andrea Tissen: „entferne die blauen Überlagerungen
   auf den Portraitfotos“); am Rechner beim Darüberfahren „Hallo!“, die Kachel hebt sich und neigt sich zur Maus (js/team.js).
   Der Filter erscheint nur mit JavaScript (Klasse .js schon im <head>, darum ohne Sprung beim Laden); ohne JavaScript sind alle
   Personen sichtbar. */
.team-filter { display: none; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.js .team-filter { display: flex; }
/* Gewicht und Rahmen bleiben im gedrückten Zustand gleich: kein Springen der Pillen */
.team-filter__chip {
  flex: none; min-height: 44px; padding: 0 1.1rem;
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-s);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.team-filter__chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.team-filter__chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--white); box-shadow: 0 10px 22px -12px rgba(0, 73, 148, .8); }
/* Handy und kleines Tablet: Pillen in einer Zeile, seitlich wischen statt umbrechen */
@media (max-width: 767.98px) {
  .js .team-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .team-filter::-webkit-scrollbar { display: none; }
}

/* Gleich hohe Zeilen: die Kachel „Du?“ ist auch allein in einer Zeile so hoch wie die Porträts */
.team-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(.875rem, 2.2vw, 1.5rem); }
@media (min-width: 768px) { .team-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .team-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-person { display: flex; }
.team-person__karte {
  --lift: 0px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; width: 100%;
  border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease), box-shadow .3s var(--ease);
}
/* Verlaufslinie unten wie bei .karte.linked */
.team-person__karte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.team-person__bild { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tile-2); }
.team-person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .8s var(--ease); }
.team-person__hallo {
  position: absolute; z-index: 2; top: .75rem; right: .75rem;
  padding: .3rem .8rem; border-radius: 99px; background: var(--gradient); color: var(--white);
  box-shadow: 0 8px 18px -8px rgba(0, 38, 80, .6);
  font-size: .875rem; font-weight: 600; line-height: 1.4;
  transform: scale(0) rotate(-14deg); transition: transform .45s var(--ease);
}
.team-person__name { padding: 1rem clamp(.875rem, 2vw, 1.25rem) 0; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.3; }
.team-person__rolle { padding: .2rem clamp(.875rem, 2vw, 1.25rem) 1.15rem; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .team-person:hover .team-person__karte { --lift: -4px; box-shadow: var(--shadow); }
  .team-person:hover .team-person__karte::after { transform: scaleX(1); }
  .team-person:hover .team-person__bild img { transform: scale(1.06); }
  .team-person:hover .team-person__hallo { transform: scale(1) rotate(-6deg); }
}

/* Letzte Kachel „Du? Bewirb dich!“ mit gestricheltem Rahmen: ganz klickbar, bleibt bei jedem Filter sichtbar (data-immer) */
.team-person__du {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem; width: 100%; min-height: 15rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 2px dashed var(--primary); border-radius: var(--radius);
  color: var(--primary); text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.team-person__du-gross { width: fit-content; padding: 0 .1em .08em 0; font-size: clamp(3.25rem, 2rem + 4vw, 5.25rem); font-style: italic; font-weight: 600; line-height: .95; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .team-person__du-gross { background: linear-gradient(90deg, #004994, #009ee3); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.team-person__du-text { color: var(--text); font-size: 1rem; line-height: 1.45; }
.team-person__du-text strong { display: block; color: var(--primary); font-size: 1.2em; font-weight: 700; }
.team-person__du .icon { width: 18px; height: 18px; color: var(--accent); transition: transform .2s var(--ease); }
.team-person__du:hover { border-style: solid; background: var(--white); box-shadow: var(--shadow-s); }
.team-person__du:hover .icon { transform: translateX(4px); }

/* Nach dem Filtern erscheinen die Personen nacheinander */
@media (prefers-reduced-motion: no-preference) {
  .team-person.ist-neu { animation: team-person-rein .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
@keyframes team-person-rein { from { opacity: 0; transform: translateY(18px) scale(.96); } }

/* Jobs-Band (.jobs-banner in style.css) unter dem Raster, Sprungziel #jobs */
.team-jobs { margin-top: clamp(3rem, 7vw, 5rem); }