/* Karriere: Stile der React-Inseln (Leistungen, Bereiche, Stimmen, Bewerbungsweg).
   Muster nach 21st.dev (Infinite Moving Cards, Tailwind Image Accordion, Animated Testimonials,
   Feature Steps), ohne framer-motion umgesetzt: Zustand setzt React, Bewegung macht CSS.
   Farben aus der Palette: dark #0b1920, borderLight #d7d7d7, grey #666666, accent #2453ff,
   accentOnDark #6b8dff. */

/* ---------- Leistungen: zwei Reihen, gegenläufig, Pause bei Hover ---------- */
.kr-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.kr-marquee + .kr-marquee { margin-top: 1.25rem; }
.kr-marquee-spur { display: flex; gap: 1.25rem; width: max-content; animation: kr-scroll var(--dauer, 60s) linear infinite; animation-direction: var(--richtung, normal); will-change: transform; }
.kr-marquee:hover .kr-marquee-spur, .kr-marquee:focus-within .kr-marquee-spur, .kr-marquee.is-ruhend .kr-marquee-spur { animation-play-state: paused; }
@keyframes kr-scroll { to { transform: translateX(calc(-50% - 0.625rem)); } }
.kr-karte { flex: 0 0 auto; width: 20rem; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.625rem; background: #ffffff; border: 1px solid #d7d7d7; border-radius: 16px; transition: border-color 300ms ease, transform 300ms ease; }
.kr-karte:hover { border-color: #000000; transform: translateY(-2px); }
.kr-karte iconify-icon { color: #000000; }
.kr-karte h3 { font-family: Inter, sans-serif; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: #000000; margin: 0; }
.kr-karte p { font-family: Montserrat, sans-serif; font-size: 0.9rem; font-weight: 300; line-height: 1.6; color: #666666; margin: 0.4rem 0 0; }
@media (max-width: 639px) { .kr-karte { width: 16.5rem; padding: 1.25rem 1.375rem; } }
@media (prefers-reduced-motion: reduce) {
  .kr-marquee { mask-image: none; -webkit-mask-image: none; }
  .kr-marquee-spur { animation: none; width: auto; flex-wrap: wrap; }
  .kr-marquee-spur > [aria-hidden="true"] { display: none; }
  .kr-karte { width: calc(50% - 0.625rem); }
  @media (min-width: 1024px) { .kr-karte { width: calc(25% - 0.9375rem); } }
}

/* ---------- Bereiche: drei Bildtafeln, die angesteuerte Tafel wird breit ---------- */
.kr-akk { display: grid; gap: 0.75rem; }
.kr-akk-tafel { position: relative; overflow: hidden; border-radius: 16px; background: #0b1920; min-height: 17rem; cursor: pointer; outline: none; transition: flex-grow 600ms cubic-bezier(.2,.7,.2,1); }
.kr-akk-tafel:focus-visible { box-shadow: 0 0 0 2px #0b1920, 0 0 0 4px #6b8dff; }
.kr-akk-tafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 600ms ease; filter: saturate(0.85); }
.kr-akk-tafel:hover img, .kr-akk-tafel.is-aktiv img { transform: scale(1.04); }
.kr-akk-schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,25,32,0.94) 0%, rgba(11,25,32,0.55) 45%, rgba(11,25,32,0.15) 100%); }
.kr-akk-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: #ffffff; }
.kr-akk-ort { font-family: Inter, sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); }
.kr-akk-titel { font-family: Inter, sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0.5rem 0 0; }
.kr-akk-text { font-family: Montserrat, sans-serif; font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0.75rem 0 0; max-width: 30rem; }
.kr-akk-link { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1.25rem; font-family: Inter, sans-serif; font-size: 0.85rem; font-weight: 500; color: #ffffff; }
.kr-akk-link iconify-icon { transition: transform 300ms ease; }
.kr-akk-link:hover iconify-icon { transform: translateX(4px); }
.kr-akk-link:focus-visible { outline: 2px solid #6b8dff; outline-offset: 4px; }
@media (min-width: 768px) {
  .kr-akk { display: flex; height: 30rem; }
  .kr-akk-tafel { flex: 1 1 0; min-height: 0; }
  /* Ruhelage: die aktive Tafel ist breit. Sobald ein Zeiger im Raster ist, gilt nur noch die angesteuerte Tafel. */
  .kr-akk:not(:hover) .kr-akk-tafel.is-aktiv { flex-grow: 2.6; }
  .kr-akk:hover .kr-akk-tafel { flex-grow: 0.7; }
  .kr-akk:hover .kr-akk-tafel:hover { flex-grow: 2.6; }
  .kr-akk-inhalt { padding: 2rem; }
  /* Schmale Tafel: Titel kleiner und mit Trennung, Text und Link zugeklappt (max-height statt display,
     damit das Aufklappen weich laeuft und der Titel unten bleibt) */
  .kr-akk-titel { font-size: 1.15rem; hyphens: auto; overflow-wrap: anywhere; transition: font-size 400ms ease; }
  .kr-akk-text, .kr-akk-link { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease, max-height 500ms cubic-bezier(.2,.7,.2,1), margin-top 500ms cubic-bezier(.2,.7,.2,1); }
  .kr-akk:not(:hover) .kr-akk-tafel.is-aktiv .kr-akk-titel, .kr-akk-tafel:hover .kr-akk-titel { font-size: 1.75rem; hyphens: manual; }
  .kr-akk:not(:hover) .kr-akk-tafel.is-aktiv .kr-akk-text, .kr-akk-tafel:hover .kr-akk-text { max-height: 12rem; margin-top: 0.75rem; opacity: 1; transform: none; transition-delay: 150ms; }
  .kr-akk:not(:hover) .kr-akk-tafel.is-aktiv .kr-akk-link, .kr-akk-tafel:hover .kr-akk-link { max-height: 3rem; margin-top: 1.25rem; opacity: 1; transform: none; transition-delay: 200ms; }
}
@media (min-width: 768px) and (max-width: 1023px) { .kr-akk { height: 26rem; } }
@media (prefers-reduced-motion: reduce) {
  .kr-akk-tafel, .kr-akk-tafel img, .kr-akk-titel, .kr-akk-text, .kr-akk-link, .kr-akk-link iconify-icon { transition: none; }
}

/* ---------- Stimmen: Bildstapel links, Zitat rechts, Wort für Wort ---------- */
.kr-stimmen-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .kr-stimmen-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; } }
.kr-stapel { position: relative; aspect-ratio: 4 / 5; max-width: 26rem; margin: 0 auto; width: 100%; }
.kr-stapel-bild { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transform: rotate(var(--drehung, 0deg)) scale(var(--groesse, 1)); opacity: var(--deckung, 1); transition: transform 600ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease; transform-origin: 50% 100%; }
.kr-stapel-bild img { width: 100%; height: 100%; object-fit: cover; }
.kr-stapel-bild[data-lage="aktiv"] { --drehung: 0deg; --groesse: 1; --deckung: 1; z-index: 3; }
.kr-stapel-bild[data-lage="naechste"] { --drehung: 5deg; --groesse: 0.94; --deckung: 0.55; z-index: 2; }
.kr-stapel-bild[data-lage="hinten"] { --drehung: -6deg; --groesse: 0.9; --deckung: 0.35; z-index: 1; }
.kr-zitat { font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 1.75rem 0 0; min-height: 7.5rem; }
@media (min-width: 1024px) { .kr-zitat { font-size: 1.5rem; } }
.kr-wort { display: inline-block; animation: kr-wort 420ms cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--v, 0ms); }
@keyframes kr-wort { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
.kr-stimme-name { font-family: Inter, sans-serif; font-size: 1.1rem; font-weight: 500; color: #ffffff; margin: 0; }
.kr-stimme-rolle { font-family: Inter, sans-serif; font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0.25rem 0 0; }
.kr-stimmen-steuer { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; }
.kr-pfeil { width: 2.75rem; height: 2.75rem; border-radius: 999rem; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 300ms ease, border-color 300ms ease; }
.kr-pfeil:hover { background: #ffffff; color: #000000; border-color: #ffffff; }
.kr-pfeil:focus-visible { outline: 2px solid #6b8dff; outline-offset: 4px; }
.kr-stimmen-stand { font-family: Inter, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-left: 0.5rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .kr-wort { animation: none; } .kr-stapel-bild { transition: none; } }

/* ---------- Team: zwei Gruppen, Portraits auf dunklen Karten ---------- */
.kr-team { display: flex; flex-direction: column; gap: 3.5rem; }
.kr-team-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 0.9rem; }
.kr-team-ort { font-family: Inter, sans-serif; font-size: 1.1rem; font-weight: 500; color: #ffffff; margin: 0; }
.kr-team-bereich { font-family: Inter, sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.6); margin: 0; }
.kr-team-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .kr-team-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .kr-team-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kr-person { min-width: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(to top, #0b1920 0%, #043b4e 100%); transition: border-color 300ms ease; }
.kr-person:hover { border-color: rgba(255,255,255,0.35); }
.kr-person-bild { position: relative; aspect-ratio: 1; overflow: hidden; }
.kr-person-bild::before { content: ""; position: absolute; inset: auto 10% 18% 10%; height: 55%; border-radius: 999rem; background: radial-gradient(ellipse at 50% 60%, rgba(107,141,255,0.22), transparent 70%); }
.kr-person-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.kr-person:hover .kr-person-bild img { transform: scale(1.03); }
.kr-person-text { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.1); background: #0b1920; }
.kr-person-name { font-family: Inter, sans-serif; font-size: 0.98rem; font-weight: 500; color: #ffffff; margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kr-person-rolle { font-family: Inter, sans-serif; font-size: 0.78rem; color: rgba(255,255,255,0.6); margin: 0.2rem 0 0; }
@media (prefers-reduced-motion: reduce) { .kr-person, .kr-person-bild img { transition: none; } .kr-person { opacity: 1; transform: none; } }

/* ---------- Bewerbungsweg: Schritte links mit Fortschritt, Bild rechts ---------- */
.kr-weg-raster { display: grid; gap: 2.5rem; align-items: stretch; }
@media (min-width: 1024px) { .kr-weg-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; } }
.kr-weg-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; order: 2; }
@media (min-width: 1024px) { .kr-weg-liste { order: 1; } }
.kr-schritt { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1.25rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid #d7d7d7; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; width: 100%; font: inherit; color: inherit; transition: opacity 400ms ease; }
.kr-schritt:last-child { border-bottom: 1px solid #d7d7d7; }
.kr-schritt:focus-visible { outline: 2px solid #2453ff; outline-offset: 4px; border-radius: 4px; }
.kr-schritt:not(.is-aktiv) { opacity: 0.55; }
.kr-schritt:not(.is-aktiv):hover { opacity: 0.85; }
.kr-schritt-nr { width: 2.5rem; height: 2.5rem; border-radius: 999rem; border: 1px solid #d7d7d7; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-family: Inter, sans-serif; font-size: 0.82rem; font-weight: 500; color: #000000; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.kr-schritt.is-aktiv .kr-schritt-nr { background: #000000; border-color: #000000; color: #ffffff; }
.kr-schritt.is-fertig .kr-schritt-nr { border-color: #000000; }
.kr-schritt-titel { font-family: Inter, sans-serif; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: #000000; margin: 0.35rem 0 0; }
.kr-schritt-text { font-family: Montserrat, sans-serif; font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: #666666; margin: 0.5rem 0 0; }
.kr-schritt-lauf { grid-column: 2; margin-top: 1rem; height: 1px; background: #d7d7d7; overflow: hidden; opacity: 0; transition: opacity 300ms ease; }
.kr-schritt.is-aktiv .kr-schritt-lauf { opacity: 1; }
.kr-schritt-lauf > span { display: block; height: 100%; background: #000000; transform-origin: left; transform: scaleX(var(--fortschritt, 0)); transition: transform 200ms linear; }
.kr-weg-bild { position: relative; order: 1; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #0b1920; min-height: 16rem; }
@media (min-width: 1024px) { .kr-weg-bild { order: 2; aspect-ratio: auto; min-height: 30rem; } }
.kr-weg-bild figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(24px) scale(1.02); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.kr-weg-bild figure.is-aktiv { opacity: 1; transform: none; }
.kr-weg-bild img { width: 100%; height: 100%; object-fit: cover; }
.kr-weg-bild figcaption { position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem; color: #ffffff; font-family: Inter, sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }
.kr-weg-bild figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,25,32,0.7), rgba(11,25,32,0) 45%); }
@media (prefers-reduced-motion: reduce) {
  .kr-weg-bild figure, .kr-schritt, .kr-schritt-nr, .kr-schritt-lauf > span { transition: none; }
}