/* =====================================================================
   Karriereseite AVS Accu Vertrieb Süd GmbH
   Eigene Styles (Präfix kr-), mobile zuerst.
   Header, Footer und Schrift kommen aus avs-rahmen.css (Auszug aus dem
   Original-Stylesheet von avs.bayern). Markenwerte von dort:
   Rubik 300 Text, 600 fett, 700 Überschriften, Blau #003674,
   Orange #F26B31, Footer-Blau #001A37, Text #484848, Button-Radius .4375rem.
   Gestaltung: Fotos, flache AVS-Flächen, große Typografie, viel Weißraum.
   Kein Leuchten, kein Glas, keine Verlaufsflecken. Orange nur für Buttons, Zahlen
   und Hervorhebungen. Animationen laufen nur über transform und opacity.

   Schriftgrößen: genau 9 Stufen (--fs-...), nichts daneben.
   Karten: genau 1 Bauart (Abschnitt „Karte“), nichts daneben.
   Übergänge: Zahlen-Brücke unter dem Hero, Akku-Linie vor jedem blauen Abschnitt,
   helle Abschnitte schieben sich als Blatt über blaue, Bilder öffnen sich beim Scrollen.
   ===================================================================== */

/* Ersatzschrift mit den Maßen von Rubik: verhindert, dass der Text springt, während Rubik lädt.
   Sobald Rubik da ist, wird ausschließlich Rubik angezeigt. */
@font-face { font-family: "Rubik Ersatz"; font-weight: 300; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 100.98%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Ersatz"; font-weight: 400; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 103.78%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Ersatz"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold"); size-adjust: 101.9%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Ersatz"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold"); size-adjust: 103.51%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
:root { --bs-body-font-family: "Rubik", "Rubik Ersatz", "Inter", sans-serif; --bs-font-sans-serif: "Rubik", "Rubik Ersatz", "Inter", sans-serif; }

.kr, .kr-sticky, .kr-credit, .kr-progress, .kr-offcanvas, .kr-subnav {
  --blue: #003674;
  --navy: #001A37;
  --night: #000a1a;
  --orange: #F26B31;
  --text: #484848;
  --ink: #1b2430;
  --line: #dfe5ee;
  --soft: #f3f5f9;
  --r: .625rem;
  --r-sm: .4375rem;
  --gap: .75rem;
  --pad: 5rem;
  --bridge: clamp(3.75rem, 11vw, 10.625rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Rubik", "Rubik Ersatz", sans-serif;
  /* Die 9 Schriftgrößen der Seite */
  --fs-display: clamp(2.625rem, 8.6vw + .6rem, 5.25rem);
  --fs-h2: clamp(2rem, 3.6vw + 1.15rem, 3.75rem);
  --fs-quote: clamp(1.5rem, 1.7vw + 1.1rem, 2.5rem);
  --fs-num: clamp(2.75rem, 3vw + 1.8rem, 4.5rem);
  --fs-h3: 1.3125rem;
  --fs-lead: clamp(1.125rem, .5vw + 1rem, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .8125rem;
}
@media (min-width: 768px) { .kr, .kr-sticky, .kr-credit, .kr-progress, .kr-offcanvas, .kr-subnav { --gap: 1.25rem; --pad: 7.5rem; --fs-h3: 1.375rem; --fs-body: 1.125rem; } }
@media (min-width: 1200px) { .kr { --pad: 9.5rem; } }

.kr { display: block; font-family: var(--font); font-weight: 300; font-size: var(--fs-body); line-height: 1.62; color: var(--text); background: #fff; overflow-x: clip; }
.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr h1, .kr h2, .kr h3 { font-family: var(--font); font-weight: 700; line-height: 1.12; color: var(--blue); margin: 0; letter-spacing: -.015em; text-transform: none; text-wrap: balance; }
.kr p, .kr ol, .kr ul, .kr figure, .kr blockquote { margin: 0; padding: 0; }
.kr ol, .kr ul { list-style: none; }
.kr a { text-decoration: none; }
.kr strong, .kr b { font-weight: 600; }
.kr img { max-width: 100%; display: block; }
.kr-ic { flex: none; display: inline-block; vertical-align: middle; }
html { scroll-behavior: smooth; }
.kr [id] { scroll-margin-top: 1rem; }
@media (min-width: 768px) { .kr [id] { scroll-margin-top: 4.75rem; } }
.kr-container { width: 100%; max-width: 87.5rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .kr-container { padding: 0 2.5rem; } }
@media (min-width: 992px) { .kr-container { padding: 0 1.25rem; } }
/* Große Bildschirme: Die Schrift bleibt in normaler Größe (Felix, 2026-10-09: keine vergrößerte Schrift). Nur der Inhalt wird breiter. */
@media (min-width: 2000px) {
  .container, .kr-container { max-width: clamp(87.5rem, 56vw, 120rem); }
}
.kr-ic[width="16"] { width: 1rem; height: 1rem; } .kr-ic[width="18"] { width: 1.125rem; height: 1.125rem; } .kr-ic[width="22"] { width: 1.375rem; height: 1.375rem; }
.kr-ic[width="30"] { width: 1.875rem; height: 1.875rem; } .kr-ic[width="32"] { width: 2rem; height: 2rem; } .kr-ic[width="40"] { width: 2.5rem; height: 2.5rem; }

/* ---------- Abschnitte: Weiß, helles Grau und flaches AVS-Blau im Wechsel ---------- */
.kr-sec { position: relative; padding: var(--pad) 0; }
.kr-sec--white { background: #fff; }
.kr-sec--soft { background: var(--soft); }
.kr-dark { position: relative; overflow: hidden; background: var(--blue); color: rgba(255, 255, 255, .86); font-weight: 400; }
.kr-dark > .kr-container { position: relative; z-index: 1; }
.kr .kr-dark h2 { color: #fff; }

/* ---------- Übergänge: gerade, ruhige Kanten. An 2 Stellen greift ein Element bewusst über die Kante:
   die Zahlen-Karte am unteren Rand des Hero und das Teamfoto zwischen Team und Stellenangeboten. ---------- */
.kr-sec.kr-dark { overflow: clip visible; }

/* ---------- Typo ---------- */
.kr-eyebrow { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.4; color: var(--orange); margin-bottom: 1rem !important; }
.kr .kr-h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.028em; }
.kr .kr-h2 > span:not(.kr-w) { color: var(--orange); }
.kr-sub { max-width: 43.75rem; margin-top: 1.375rem !important; font-size: var(--fs-lead); line-height: 1.5; }
.kr-dark .kr-sub { color: rgba(255, 255, 255, .86); }
.kr-head { max-width: 56.25rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .kr-head { margin-bottom: 4rem; } }

/* ---------- Buttons (Form wie avs.bayern: .4375rem Radius, 600). Rückmeldung schon beim Drücken. ---------- */
.kr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.5rem; padding: .75rem 1.625rem; border: 2px solid transparent; border-radius: var(--r-sm); font-family: var(--font, "Rubik", sans-serif); font-size: var(--fs-body, 1.0625rem); font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .25s, color .25s, border-color .25s, transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.kr-btn:active { transform: scale(.97); transition-duration: .08s; }
.kr-btn .kr-ic { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.kr-btn:hover .kr-ic { transform: translateX(.25rem); }
.kr-btn--primary { background: #F26B31; color: #fff !important; }
.kr-btn--primary:hover { background: #003674; }
.kr-dark .kr-btn--primary:hover, .kr-hero .kr-btn--primary:hover, .kr-map .kr-btn--primary:hover, .kr-contact .kr-btn--primary:hover { background: #fff; color: #003674 !important; }
.kr-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff !important; background: transparent; }
.kr-btn--ghost:hover { background: #fff; color: #003674 !important; border-color: #fff; }
.kr-btn--outline { border-color: #003674; color: #003674 !important; background: transparent; }
.kr-btn--outline:hover { background: #003674; color: #fff !important; }
.kr-btn--lg { min-height: 3.75rem; padding: .875rem 1.875rem; }
.kr-btn--block { width: 100%; }
@media (max-width: 419.98px) { .kr-btn, .kr-btn--lg { padding: .75rem .875rem; font-size: var(--fs-small, .875rem); gap: .5rem; } }
.kr-btn:focus-visible, .kr-acc__q:focus-visible, .kr-map__load:focus-visible, .kr-benefit__head:focus-visible { outline: 3px solid #F26B31; outline-offset: 3px; }

/* ---------- Einblenden (nur mit JS aktiv, sonst alles sichtbar) ---------- */
.kr-js .kr-r, .kr-js .kr-fade { opacity: 0; transform: translateY(2.75rem) scale(.965); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--sd, 0s); }
.kr-js .is-in > .kr-r, .kr-js .kr-fade.is-in { opacity: 1; transform: none; }
/* Überschriften bauen sich zeilenweise auf */
.kr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kr-w > span { display: inline-block; transform: translateY(105%); transition: transform .75s var(--ease); transition-delay: var(--ld, 0s); }
.is-in .kr-w > span { transform: none; }

/* ---------- Fortschrittsleiste ---------- */
.kr-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.kr-progress i { display: block; height: 100%; background: #F26B31; transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ---------- Lichtkegel unter der Maus in blauen Abschnitten (nur Desktop, sehr dezent) ---------- */
.kr-torch { position: absolute; top: 0; left: 0; width: 45rem; height: 45rem; margin: -22.5rem 0 0 -22.5rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 65%); opacity: 0; pointer-events: none; transition: opacity .6s; will-change: transform, opacity; z-index: 0; }
.kr-torch.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .kr-torch { display: none; } }

/* ---------- Karte: die eine Bauart für Team, Werte, Arbeitsbereiche, Schritte, Tipps, Warum AVS und Benefits ---------- */
.kr-tcard, .kr-area, .kr-glass, .kr-value, .kr-step, .kr-tip { position: relative; min-width: 0; padding: 1.625rem 1.375rem 1.75rem; border-radius: var(--r); background: #fff; color: var(--text); font-weight: 300; }
.kr-sec--white .kr-value, .kr-sec--white .kr-step, .kr-sec--white .kr-tip, .kr-sec--white .kr-glass { background: var(--soft); }
@media (min-width: 768px) { .kr-tcard, .kr-area, .kr-glass, .kr-value, .kr-step, .kr-tip { padding: 2.125rem 2rem 2.25rem; } }
.kr .kr-tcard h3, .kr .kr-area h3, .kr .kr-glass h3, .kr .kr-value h3, .kr .kr-step h3, .kr .kr-tip h3, .kr .kr-benefit h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.016em; color: var(--blue); margin-bottom: .625rem; }
.kr-tcard p, .kr-area p, .kr-glass p, .kr-value p, .kr-step p, .kr-tip p { line-height: 1.6; }
.kr-tcard__ic, .kr-area__ic, .kr-glass__ic, .kr-value__ic { width: 4rem; height: 4rem; margin: -.25rem 0 1.125rem -.25rem; }
@media (min-width: 768px) { .kr-tcard__ic, .kr-area__ic, .kr-glass__ic, .kr-value__ic { width: 4.75rem; height: 4.75rem; margin-bottom: 1.375rem; } }
/* Große Ziffer in Karten (Schritte, Tipps) */
.kr-step b, .kr-tip span { display: block; margin-bottom: 1.125rem; font-size: var(--fs-num); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--orange); font-variant-numeric: tabular-nums; }
/* Raster der Karten */
.kr-team, .kr-values, .kr-areas, .kr-why, .kr-steps, .kr-tips { display: grid; gap: var(--gap); }
@media (min-width: 700px) {
  .kr-values, .kr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-team, .kr-tips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kr-tcard, .kr-tip { grid-column: span 3; }
  .kr-tcard:nth-child(5), .kr-tip:nth-child(5) { grid-column: span 6; }
}
@media (min-width: 900px) { .kr-areas, .kr-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .kr-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kr-tcard:nth-child(n + 3), .kr-tip:nth-child(n + 3) { grid-column: span 2; }
}

/* ---------- Bild-Slots mit festem Seitenverhältnis ----------
   Jeder Slot hat einen sprechenden Dateinamen (assets/img/<name>.webp). Für den Tausch gegen
   echte Fotos: Datei ersetzen. Slots mit data-bild warten noch auf das echte Foto. */
.kr-slot { position: relative; width: 100%; aspect-ratio: var(--ar, 4/3); border-radius: var(--r); overflow: hidden; background: var(--navy); }
.kr-slot > img:not(.kr-slot__icon) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-slot__icon { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; margin: 0; transform: translate(-50%, -50%); }
.kr-slot--cone { background: radial-gradient(75% 85% at 28% 10%, rgba(242, 107, 49, .5) 0%, rgba(242, 107, 49, .14) 40%, rgba(242, 107, 49, 0) 72%), var(--navy); }
/* Bilder öffnen sich beim Scrollen: eine dunkle Blende fährt weg, das Bild kommt aus leichter Vergrößerung zur Ruhe */
.kr-js .kr-slot > img:not(.kr-slot__icon) { opacity: 0; transform: scale(1.16); transition: opacity .9s ease-out, transform 1.5s var(--ease); }
.kr-js .kr-slot.is-shown > img:not(.kr-slot__icon) { opacity: 1; transform: none; }

/* ---------- 3D-Icons ---------- */
.kr-i3 { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); will-change: transform; }
.kr-js .kr-r .kr-i3 { transform: scale(.8); transition-delay: calc(var(--sd, 0s) + .1s); }
.kr-js .is-in > .kr-r .kr-i3 { transform: none; }

/* ================= 1 · HERO: Hintergrundbild ohne Personen, füllt den ganzen Bildschirm ================= */
.kr-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; font-weight: 400; padding: 66vw 0 6rem; min-height: calc(100svh - var(--kr-head, 10.375rem)); display: flex; flex-direction: column; justify-content: flex-end; }
.kr-hero__media { position: absolute; inset: 0 0 auto 0; height: 96vw; z-index: -1; overflow: hidden; will-change: transform; }
.kr-hero__media picture { display: block; width: 100%; height: 100%; }
.kr-hero__photo { width: 100%; height: 100%; max-width: none !important; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 40%; animation: krDrift 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes krDrift { from { transform: scale(1); } to { transform: scale(1.07); } }
/* Handy: unten läuft das Bild ins Dunkle, damit der Text ruhig steht */
.kr-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 10, 26, 0) 46%, rgba(0, 10, 26, .82) 74%, var(--night) 100%); }
.kr-hero__dim { position: absolute; inset: 0; z-index: 1; background: #00050d; opacity: 0; pointer-events: none; }
.kr-hero__inner { position: relative; z-index: 1; }
.kr-hero__badge { margin-bottom: 1.125rem !important; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.4; color: #fff; }
.kr-hero__badge span { display: inline-block; padding-bottom: .625rem; border-bottom: 3px solid var(--orange); }
.kr .kr-hero__title { color: #fff; font-size: var(--fs-display); line-height: 1; letter-spacing: -.032em; margin-bottom: 1.375rem; }
.kr-hero__title span { display: block; color: var(--orange); }
.kr-hero__lead { max-width: 42rem; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .9); }
.kr-hero__lead strong { color: #fff; }
.kr-hero__para { display: block; margin-bottom: .85em; }
.kr-hero__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.kr-hero__words { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin-top: 1.875rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .84); }
.kr-hero__words i { width: .3125rem; height: .3125rem; background: var(--orange); }
/* Handy: Bild, Überschrift, 1 Satz und der Bewerben-Button passen auf den ersten Bildschirm */
@media (max-width: 599.98px) {
  .kr-hero { padding-top: 48vw; }
  .kr-hero__lead-wide { display: none; }
  .kr-hero__media::after { background: linear-gradient(180deg, rgba(0, 10, 26, .1) 0%, rgba(0, 10, 26, .3) 36%, rgba(0, 10, 26, .88) 66%, var(--night) 100%); }
}
@media (min-width: 600px) {
  .kr-hero { padding-top: 40vw; padding-bottom: 7.5rem; }
  .kr-hero__media { height: 60vw; }
  .kr-hero__badge { margin-bottom: 1.5rem !important; }
  .kr-hero__actions { flex-direction: row; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
  .kr-hero__words { gap: .5rem 1.5rem; margin-top: 2.75rem; }
}
/* Desktop: Bild in voller Breite sichtbar. Ein blauer Schleier liegt über der ganzen Fläche und ist links dichter, damit der Text ruhig steht. */
@media (min-width: 1000px) {
  .kr-hero { padding: 0; min-height: max(calc(100svh - var(--kr-head, 7.1875rem)), 37.5rem); flex-direction: row; justify-content: flex-start; align-items: center; }
  .kr-hero__media { inset: 0; height: auto; }
  .kr-hero__media::after { background: linear-gradient(90deg, rgba(0, 16, 40, .97) 0%, rgba(0, 16, 40, .95) 36%, rgba(0, 16, 40, .8) 50%, rgba(0, 16, 40, .42) 68%, rgba(0, 16, 40, .26) 100%); }
  .kr-hero__inner { padding-top: 1.75rem !important; padding-bottom: 5.75rem !important; }
  .kr-hero__copy { max-width: 42rem; }
  .kr .kr-hero__title { margin-bottom: 1.625rem; font-size: clamp(2.5rem, min(4.5vw, 8.2svh), 4.375rem); }
  .kr-hero__actions { margin-top: 1.875rem; }
  .kr-hero__words { margin-top: 2rem; }
}
/* Sehr breite Bildschirme schneiden oben und unten ab: der Kopf soll im Bild bleiben */
/* Ablauf „Licht an“: Der Raum liegt kurz im Dunkeln, das Licht springt an, der Text baut sich darüber auf. */
.kr-js .kr-hero__dim { animation: krDim .9s ease-out both; }
.kr-js .kr-after { opacity: 0; transform: translateY(1.125rem); animation: krAfter .9s var(--ease) forwards; animation-delay: var(--d, .3s); }
/* Kein Flackern mehr (Felix, 2026-10-10): Das Bild hellt beim Laden einmal ruhig auf. */
@keyframes krDim { from { opacity: .55; } to { opacity: 0; } }
@keyframes krAfter { to { opacity: 1; transform: none; } }

/* ================= 3 · ÜBER UNS ================= */
/* Übergang Hero → Über uns: die Zahlen liegen als Karte halb auf dem Hero */
.kr-aboutsec { padding-top: 0; }
.kr-aboutsec > .kr-container { display: flow-root; }
.kr-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; margin-top: -3.5rem; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px rgba(0, 26, 55, .08), 0 .5rem 1.25rem -.75rem rgba(0, 20, 50, .28); transform: translateZ(0); }
.kr-stat { min-width: 0; padding: 1.25rem 1rem 1.125rem; }
.kr-stat:nth-child(even) { border-left: 1px solid var(--line); }
.kr-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
.kr .kr-stat__num { font-weight: 700; color: var(--orange); font-size: var(--fs-num); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
.kr-stat__label { margin-top: .5rem !important; font-size: var(--fs-small); font-weight: 400; line-height: 1.35; color: var(--blue); }
@media (min-width: 768px) {
  .kr-stats { grid-template-columns: repeat(4, 1fr); margin-top: -4rem; }
  .kr-stat { padding: 1.875rem 2rem 1.75rem; }
  .kr-stat:nth-child(n) { border-top: 0; }
  .kr-stat + .kr-stat { border-left: 1px solid var(--line); }
}
.kr-about { display: grid; gap: 1.75rem; margin-top: 4.5rem; }
.kr-about__cols { display: grid; gap: 1.125rem; }
.kr-about__cols b { color: var(--blue); }
.kr-about__media { position: relative; padding: 0 0 2.75rem 1.75rem; }
.kr-about__media2 { position: absolute; left: 0; bottom: 0; width: 54%; border: .375rem solid #fff; border-radius: calc(var(--r) + .375rem); will-change: transform; }
@media (min-width: 960px) {
  .kr-about { grid-template-columns: minmax(0, 1fr) minmax(0, min(38rem, 46%)); grid-template-rows: 1fr auto auto 1fr; column-gap: 5.5rem; row-gap: 0; margin-top: var(--pad); }
  .kr-about__head { grid-column: 1; grid-row: 2; margin-bottom: 2.25rem; }
  .kr-about__cols { grid-column: 1; grid-row: 3; gap: 1.25rem; max-width: 46rem; }
  .kr-about__media { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: 0 0 4rem 3.5rem; }
}

/* ================= 4 · BENEFITS ================= */
/* Handy: eine weiße Liste zum Aufklappen. Ab 48rem: Karten im Raster mit wechselnden Breiten. */
.kr-benefits { display: grid; border-radius: var(--r); background: #fff; overflow: hidden; }
.kr-benefit { min-width: 0; color: var(--text); font-weight: 300; }
.kr-benefit + .kr-benefit { border-top: 1px solid var(--line); }
.kr-benefit__head { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 1.75rem; align-items: center; gap: .875rem; min-height: 5.25rem; padding: .875rem 1rem .875rem .875rem; -webkit-tap-highlight-color: transparent; }
.kr-benefit__ic { width: 3.25rem; height: 3.25rem; }
.kr-benefit__ttl span { display: block; margin-bottom: 2px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; color: var(--orange); font-variant-numeric: tabular-nums; }
.kr .kr-benefit h3 { margin-bottom: 0; }
.kr-benefit__tog { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--blue); transition: transform .5s var(--ease), background-color .25s, border-color .25s; }
.kr-benefit__tog::before, .kr-benefit__tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: .6875rem; height: 1.5px; margin: -.75px 0 0 -.3438rem; background: var(--blue); transition: transform .5s var(--ease), background-color .25s; }
.kr-benefit__tog::after { transform: rotate(90deg); }
.kr-benefit__body { display: grid; grid-template-rows: 1fr; }
.kr-benefit__body > div { overflow: hidden; min-height: 0; }
.kr-benefit p { padding: 0 1.125rem 1.375rem; line-height: 1.6; }
.kr-benefit p b { color: var(--blue); }
@media (max-width: 767.98px) {
  .kr-js .kr-benefit__head { cursor: pointer; }
  .kr-js .kr-benefit__body { transition: grid-template-rows .5s var(--ease); }
  .kr-js .kr-benefit__body p { transition: opacity .4s; }
  .kr-js .kr-benefit:not(.is-open) .kr-benefit__body { grid-template-rows: 0fr; }
  .kr-js .kr-benefit:not(.is-open) .kr-benefit__body p { opacity: 0; }
  .kr-js .kr-benefit.is-open .kr-benefit__tog { background: var(--orange); border-color: var(--orange); transform: rotate(180deg); }
  .kr-js .kr-benefit.is-open .kr-benefit__tog::before, .kr-js .kr-benefit.is-open .kr-benefit__tog::after { background: #fff; }
  .kr-js .kr-benefit.is-open .kr-benefit__tog::after { transform: rotate(0deg); }
  html:not(.kr-js) .kr-benefit__tog { display: none; }
}
@media (min-width: 768px) {
  .kr-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); background: none; border-radius: 0; overflow: visible; }
  .kr-benefit + .kr-benefit { border-top: 0; }
  .kr-benefit__in { position: relative; height: 100%; padding: 2.125rem 2rem 2.25rem; border-radius: var(--r); background: #fff; }
  .kr-benefit__head { display: block; min-height: 0; padding: 0; }
  .kr-benefit__ic { width: 4.75rem; height: 4.75rem; margin: -.25rem 0 1.375rem -.25rem; }
  .kr-benefit__ttl span { position: absolute; right: 1.875rem; top: 1.875rem; }
  .kr .kr-benefit h3 { margin-bottom: .625rem; }
  .kr-benefit__tog { display: none; }
  .kr-benefit p { padding: 0; }
}
@media (min-width: 1100px) {
  .kr-benefits { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kr-benefit { grid-column: span 2; }
  .kr-benefit:nth-child(5n + 1), .kr-benefit:nth-child(5n + 2) { grid-column: span 3; }
  .kr-benefit:nth-child(5n + 1) .kr-benefit__in, .kr-benefit:nth-child(5n + 2) .kr-benefit__in { padding: 2.75rem 2.75rem 2.875rem; }
  .kr .kr-benefit:nth-child(5n + 1) h3, .kr .kr-benefit:nth-child(5n + 2) h3 { font-size: var(--fs-quote); letter-spacing: -.026em; margin-bottom: .875rem; }
}

/* ================= 5 · EIN TAG BEI AVS ================= */
/* Ohne JS oder bei reduzierter Bewegung: einfache Liste. Mit JS: Abschnitt bleibt stehen (.is-pinned). */
.kr-day { background: var(--soft); padding: var(--pad) 0; }
.kr-day__head { margin-bottom: 1.75rem; }
.kr-day__clock { display: none; }
.kr-day__steps { display: grid; gap: 1.75rem; }
.kr-daystep { display: grid; gap: 1rem; }
.kr-daystep__t { font-size: var(--fs-quote); font-weight: 700; color: var(--orange); line-height: 1.1; letter-spacing: -.03em; margin-bottom: .375rem !important; }
.kr-daystep p + p, .kr-daystep div > p:last-child { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); font-weight: 400; }
@media (min-width: 900px) { .kr-daystep { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } }

.kr-day.is-pinned { padding: 0; height: calc(100svh + 330vh); }
.kr-day.is-pinned .kr-day__pin { position: sticky; top: 0; height: 100svh; min-height: 33.75rem; display: flex; align-items: center; overflow: hidden; }
@media (min-width: 768px) { .kr-day.is-pinned .kr-day__pin { padding-top: 3.5rem; } }
.kr-day.is-pinned .kr-day__wrap { display: flex; flex-direction: column; gap: .875rem; }
.kr-day.is-pinned .kr-day__head { margin-bottom: 0; }
.kr-day.is-pinned .kr-eyebrow { margin-bottom: .625rem !important; }
.kr-day.is-pinned .kr-h2 { font-size: var(--fs-quote); }
.kr-day.is-pinned .kr-day__clock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .875rem; }
.kr-clock { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.kr-clock i { position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px; transform-origin: 50% 100%; background: var(--blue); will-change: transform; }
.kr-clock__h { height: 26%; }
.kr-clock__m { height: 38%; background: var(--orange) !important; }
.kr-clock b { position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%; background: var(--blue); }
.kr-clock span { position: absolute; left: 50%; top: 3px; width: 2px; height: .3125rem; margin-left: -1px; background: rgba(0, 54, 116, .45); transform-origin: 50% 1.375rem; transform: rotate(var(--a)); }
.kr-day__time { font-size: var(--fs-quote); font-weight: 700; line-height: .95; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.kr-day__time span { font-size: var(--fs-num); letter-spacing: -.04em; color: var(--orange); }
.kr-day__rail { grid-column: 1 / -1; height: 3px; background: rgba(0, 54, 116, .12); overflow: hidden; }
.kr-day__rail i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; will-change: transform; }
.kr-day.is-pinned .kr-day__steps { display: grid; gap: 0; }
.kr-day.is-pinned .kr-daystep { grid-area: 1 / 1; opacity: 0; transform: translateY(1.375rem); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; align-content: start; gap: 1rem; }
.kr-day.is-pinned .kr-daystep.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kr-day.is-pinned .kr-daystep .kr-slot { max-height: 34svh; }
.kr-day.is-pinned .kr-daystep__t { display: none; }
@media (min-width: 900px) {
  .kr-day.is-pinned .kr-day__wrap { gap: 2.5rem; }
  .kr-day.is-pinned .kr-h2 { font-size: var(--fs-h2); }
  .kr-day.is-pinned .kr-day__body { display: grid; grid-template-columns: 20rem 1fr; gap: 4.5rem; align-items: center; }
  .kr-day.is-pinned .kr-day__clock { grid-template-columns: 1fr; gap: 1.5rem; justify-items: start; }
  .kr-clock { width: 11.25rem; height: 11.25rem; border-width: .3125rem; }
  .kr-clock i { width: .3125rem; margin-left: -2.5px; }
  .kr-clock b { width: .875rem; height: .875rem; margin: -.4375rem 0 0 -.4375rem; }
  .kr-clock span { top: .5rem; width: 3px; height: .875rem; margin-left: -1.5px; transform-origin: 50% 4.8125rem; }
  .kr-day__rail { width: 100%; }
  .kr-day.is-pinned .kr-daystep { grid-template-columns: 1.5fr 1fr; gap: 2.75rem; align-items: center; }
  .kr-day.is-pinned .kr-daystep .kr-slot { max-height: 52svh; }
}

/* ================= 6 · UNSER ANSPRUCH ================= */
.kr-claim { display: grid; gap: 2.75rem; }
@media (min-width: 960px) { .kr-claim { grid-template-columns: minmax(0, min(34rem, 42%)) minmax(0, 1fr); gap: 5.5rem; align-items: center; } .kr-claim__text { max-width: 48rem; } }
.kr-claim__media { position: relative; max-width: 34rem; padding: 0 1.75rem 2.75rem 0; }
.kr-claim__media2 { position: absolute; right: 0; bottom: 0; width: 56%; border: .375rem solid #fff; border-radius: calc(var(--r) + .375rem); will-change: transform; }
.kr .kr-h2--stack { margin-bottom: 1.75rem; }
.kr-claim__text p { margin-bottom: 1.125rem; }
.kr-claim__text p strong { color: var(--blue); }
.kr-motto { margin: 1.875rem 0; padding: .25rem 0 .25rem 1.375rem; border-left: .25rem solid var(--orange); }
.kr-motto span { display: block; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: .5rem; }
.kr-motto em { font-size: var(--fs-quote); font-weight: 700; font-style: normal; color: var(--blue); line-height: 1.15; letter-spacing: -.025em; }
.kr-points { display: grid; }
.kr-point { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(0, 54, 116, .14); line-height: 1.4; }
.kr-point:last-child { border-bottom: 1px solid rgba(0, 54, 116, .14); }
.kr-point b { flex: none; width: .5rem; height: .5rem; overflow: hidden; background: var(--orange); color: transparent; font-size: 0; }
.kr-point span { font-weight: 400; color: var(--ink); }

/* ================= 7 · TEAM UND KULTUR ================= */
.kr-bigquote { max-width: 61.25rem; margin: 4rem auto 0 !important; text-align: center; color: var(--orange); }
.kr-bigquote p { margin-top: 1rem; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -.028em; text-wrap: balance; }
@media (min-width: 768px) { .kr-bigquote { margin-top: 6.5rem !important; } }
/* Das Teamfoto ragt aus dem blauen Abschnitt in den nächsten */
/* Teamfoto über die volle Breite, das Zitat steht darauf */
.kr-sec--flush { padding-bottom: 0 !important; }
.kr-teamwide { position: relative; isolation: isolate; overflow: hidden; margin-top: 3.5rem !important; min-height: 30rem; display: flex; align-items: flex-end; padding: 0 0 2.75rem !important; }
@media (min-width: 768px) { .kr-teamwide { margin-top: 6rem !important; min-height: min(86svh, 54rem); padding-bottom: 5rem !important; } }
.kr-teamwide__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.kr-teamwide__media img { position: absolute; left: 0; top: -4%; width: 100%; height: 124%; max-width: none !important; object-fit: cover; object-position: 50% 0%; will-change: transform; }
.kr-teamwide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 26, 55, .12) 0%, rgba(0, 26, 55, .2) 42%, rgba(0, 20, 46, .9) 100%); }
.kr-teamwide .kr-bigquote { margin: 0 !important; max-width: 62rem; text-align: left; }

/* ================= 8 · STELLENANGEBOTE ================= */
.kr-jobs { display: grid; gap: var(--gap); }
.kr-job { position: relative; border-radius: var(--r); overflow: hidden; }
.kr-job__type { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); line-height: 1.4; }
.kr .kr-job h3 { font-size: var(--fs-quote); line-height: 1.1; letter-spacing: -.026em; }
.kr-job__need ul { display: grid; gap: .625rem; margin-top: .875rem; }
.kr-job__need li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; line-height: 1.45; font-weight: 400; }
.kr-job__need .kr-ic { margin-top: .15em; color: var(--orange); }
/* Hauptstelle: große blaue Fläche, links der Inhalt, rechts das Bild */
.kr-job--main { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--grad-blue, var(--blue)); color: rgba(255, 255, 255, .88); font-weight: 400; }
.kr-job--main .kr-job__body { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1.375rem; padding: 2rem 1.375rem 2.25rem; align-content: center; justify-items: start; }
.kr .kr-job--main h3 { color: #fff; max-width: 16em; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 768px) { .kr .kr-job--main h3 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.028em; hyphens: manual; } }
.kr-job--main p strong { color: #fff; }
.kr-job--main .kr-job__body > p { max-width: 40rem; }
.kr-job__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kr-job__chips span { padding: .4375rem .875rem; border: 1px solid rgba(255, 255, 255, .34); border-radius: 62rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #fff; line-height: 1.2; }
.kr-job--main .kr-job__need { width: 100%; max-width: 40rem; padding-top: 1.375rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.kr-job--main .kr-job__need li { color: #fff; }
.kr-job--main .kr-job__img { order: -1; }
.kr-job--main .kr-slot { aspect-ratio: 16/9; border-radius: 0; height: 100%; }
/* Initiativbewerbung: schmale helle Leiste */
.kr-job--open { display: grid; gap: 1.5rem; padding: 1.75rem 1.375rem 2rem; background: #fff; }
.kr .kr-job--open h3 { margin: .5rem 0 .75rem; }
.kr-job--open p strong { color: var(--blue); }
.kr-job--open .kr-job__need li { color: var(--blue); }
@media (min-width: 768px) {
  .kr-job--main .kr-job__body { padding: 3.5rem 3rem; }
  .kr-job--open { padding: 2.5rem 3rem; }
}
@media (min-width: 1000px) {
  .kr-job--main { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 34rem; }
  .kr-job--main .kr-job__img { order: 0; }
  .kr-job--main .kr-slot { aspect-ratio: auto; min-height: 100%; }
  .kr-job--main .kr-job__body { padding: 4.5rem 4rem; }
  .kr-job--open { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 3.5rem; align-items: center; }
}
/* Arbeitsbereiche: Überschrift links, rechts 3 nummerierte Zeilen statt Karten */
.kr-work { display: grid; gap: 2.5rem; }
.kr-work .kr-head { margin-bottom: 0; }
.kr-work__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.5rem; padding: 1.75rem 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.kr-work__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.kr-work__list b { font-size: var(--fs-num); font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: var(--grad-orange, var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--orange); }
.kr .kr-work__list h3 { color: #fff; font-size: var(--fs-quote); line-height: 1.1; letter-spacing: -.026em; margin-bottom: .75rem; }
.kr-work__list p { max-width: 38rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
@media (min-width: 960px) {
  .kr-work { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6rem; align-items: start; }
  .kr-work .kr-head { position: sticky; top: 7.5rem; }
  .kr-work__list li { gap: 0 3rem; padding: 2.5rem 0; }
}

/* ================= 9 · GESCHÄFTSFÜHRUNG ================= */
.kr-lead { display: grid; gap: 2.25rem; }
@media (min-width: 960px) { .kr-lead { grid-template-columns: minmax(0, min(30rem, 40%)) minmax(0, 1fr); gap: 5.5rem; align-items: center; } .kr-lead__text { max-width: 48rem; } }
.kr-lead__photo { max-width: 30rem; }
.kr-lead__role { margin-top: .75rem !important; font-weight: 400; color: var(--blue); }
.kr-lead__quote { margin: 1.875rem 0 !important; padding-left: 1.375rem; border-left: .25rem solid var(--orange); font-size: var(--fs-quote); font-weight: 700; line-height: 1.15; color: var(--blue); letter-spacing: -.025em; text-wrap: balance; }
.kr-lead__text .kr-stagger p + p { margin-top: 1.125rem; }
.kr-lead__text p strong { color: var(--blue); }

/* ================= 12 · STANDORT ================= */
.kr-office { display: grid; gap: 2.25rem; }
@media (min-width: 960px) { .kr-office { grid-template-columns: 1fr .85fr; gap: 5rem; align-items: center; } }
.kr-office__text .kr-h2 { margin-bottom: 1.625rem; }
.kr-office__text p + p { margin-top: 1.125rem; }
.kr-office__text p strong { color: var(--blue); }
.kr-towns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.625rem !important; }
.kr-towns li { padding: .4375rem .875rem; border-radius: var(--r-sm); background: #fff; font-size: var(--fs-small); font-weight: 400; color: var(--blue); line-height: 1.4; }
.kr-map { position: relative; min-height: 23.75rem; border-radius: var(--r); overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--blue); background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 2.5rem 2.5rem, 2.5rem 2.5rem; color: rgba(255, 255, 255, .9); font-weight: 400; }
@media (min-width: 960px) { .kr-map { min-height: 32.5rem; } }
.kr-map__inner { position: relative; z-index: 1; padding: 2rem 1.375rem; text-align: center; }
.kr-map__inner > .kr-ic { color: var(--orange); margin-bottom: .875rem; }
.kr-map__inner p { margin-bottom: 1.5rem; line-height: 1.5; }
.kr-map__inner p strong { color: #fff; }
.kr-map__load { display: block; margin: 1rem auto 0; padding: .375rem; background: none; border: 0; font: inherit; font-size: var(--fs-small); color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kr-map iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }

/* ================= 14 · IMPRESSIONEN (Mosaik) ================= */
.kr-places { display: grid; gap: 1.5rem var(--gap); }
.kr-places figure { min-width: 0; }
.kr-places figcaption { margin-top: .75rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--blue); }
@media (min-width: 768px) { .kr-places { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kr-places__lead { grid-column: span 2; } }
@media (max-width: 767.98px) { .kr-places__lead .kr-slot { --ar: 16/9 !important; } }
.kr-mosaic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem var(--gap); }
.kr-mosaic figure { min-width: 0; }
.kr-mosaic figure:nth-child(1), .kr-mosaic figure:nth-child(4) { grid-column: span 2; }
.kr-mosaic figcaption { margin-top: .625rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--blue); }
@media (min-width: 768px) {
  .kr-mosaic { gap: 0 var(--gap); }
  .kr-mosaic figure:nth-child(n) { grid-column: span 1; margin-bottom: 2.5rem; }
  .kr-mosaic figure:nth-child(even) { margin-top: 4.5rem; margin-bottom: 0; }
  .kr-mosaic figcaption { margin-top: .875rem; }
}

/* ================= 15 · BEWERBUNG ================= */
.kr-apply { max-width: 45rem; margin: 0 auto; }
.kr-apply .kr-head { margin-bottom: 1.5rem; }
.kr-apply__trust { display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; margin-bottom: 1.625rem; }
.kr-apply__trust span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--blue); line-height: 1.3; }
.kr-apply__trust .kr-ic { color: var(--orange); }
.kr-apply__box { padding: 1.5rem 1.125rem 1.5rem; border-radius: var(--r); background: #fff; border-top: .25rem solid var(--orange); box-shadow: 0 1.875rem 3.75rem -2.5rem rgba(0, 38, 90, .45); }
@media (min-width: 768px) { .kr-apply__box { padding: 2.75rem 2.75rem 2.5rem; } }
@media (min-width: 1040px) {
  .kr-apply { max-width: none; display: grid; grid-template-columns: 1fr minmax(0, 32.5rem); column-gap: 5rem; align-items: center; }
  .kr-apply .kr-head { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 1.75rem; }
  .kr-apply__trust { grid-column: 1; grid-row: 2; align-self: start; margin: 0; flex-direction: column; gap: .75rem; }
  .kr-apply__box { grid-column: 2; grid-row: 1 / span 2; }
}
.kr-form { display: grid; gap: 1rem; }
.kr-form__row { display: grid; gap: 1rem; }
@media (min-width: 520px) { .kr-form__row { grid-template-columns: 1fr 1fr; } }
.kr-field { position: relative; }
.kr-field label { display: block; margin: 0 0 .4375rem; font-size: var(--fs-small); font-weight: 600; color: var(--blue); line-height: 1.3; }
.kr-field input, .kr-field select { width: 100%; height: 3.5rem; padding: 0 1rem; border: 1.5px solid #c9d3e0; border-radius: var(--r-sm); background: #fff; font-family: var(--font); font-size: var(--fs-body); font-weight: 400; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; transition: border-color .2s; }
.kr-field input:focus, .kr-field select:focus { border-color: var(--blue); outline: 3px solid rgba(0, 54, 116, .18); outline-offset: 0; }
.kr-field--select > .kr-ic { position: absolute; right: 1rem; top: 2.875rem; color: var(--blue); pointer-events: none; }
.kr-field.has-error input, .kr-field.has-error select { border-color: #df0000; }
.kr-err { display: none; margin-top: .375rem !important; font-size: var(--fs-small); font-weight: 400; color: #c40000; line-height: 1.3; }
.kr-err.is-on { display: block; }
.kr-check { display: flex; align-items: flex-start; gap: .75rem; margin: .25rem 0 0; cursor: pointer; font-weight: 300; }
.kr-check input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 2px; accent-color: var(--blue); }
.kr-check span { font-size: var(--fs-small); line-height: 1.5; }
.kr-check a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kr-form button[disabled] { opacity: .7; pointer-events: none; }
.kr-form__note { font-size: var(--fs-label); line-height: 1.5; text-align: center; color: #5f6b7a; font-weight: 400; }
.kr-success { padding: 2.25rem 0; text-align: center; outline: none; }
.kr-success[hidden] { display: none; }
.kr-success { animation: krPop .7s var(--ease) both; }
@keyframes krPop { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.kr-success__ic { width: 5.25rem; height: 5.25rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(1, 149, 78, .12); color: #01954e; }
.kr .kr-success h3 { font-size: var(--fs-quote); line-height: 1.15; letter-spacing: -.025em; margin-bottom: .625rem; }
.kr-success p { font-size: var(--fs-lead); }
.kr-err--submit { padding: .75rem .875rem; border-radius: var(--r-sm); background: #fdecec; }

/* ================= 16 · BEWERBUNGSPROZESS ================= */
.kr-step__ic { position: absolute; right: 1rem; top: 1rem; width: 4rem; height: 4rem; }

/* ================= 17 · FAQ ================= */
.kr-faq { display: grid; gap: 1.75rem; }
@media (min-width: 960px) { .kr-faq { grid-template-columns: 1fr 22.5rem; gap: 4rem; align-items: start; } }
.kr-acc { display: grid; border-top: 1px solid rgba(0, 54, 116, .18); }
.kr-acc__item { border-bottom: 1px solid rgba(0, 54, 116, .18); }
.kr .kr-acc__item h3 { font-size: inherit; letter-spacing: 0; }
.kr-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.5rem; padding: 1.125rem 0; background: none; border: 0; text-align: left; font-family: var(--font); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.016em; color: var(--blue); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kr-acc__q .kr-ic { color: var(--orange); transition: transform .5s var(--ease); }
.kr-acc__item.is-open .kr-acc__q .kr-ic { transform: rotate(180deg); }
.kr-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.kr-acc__item.is-open .kr-acc__a { grid-template-rows: 1fr; }
.kr-acc__a > div { overflow: hidden; }
.kr-acc__a p { padding: 0 2.5rem 1.5rem 0; line-height: 1.6; }
.kr-contact { padding: 2.125rem 1.625rem; border-radius: var(--r); background: var(--blue); color: rgba(255, 255, 255, .9); text-align: center; display: grid; gap: .75rem; font-weight: 400; }
@media (min-width: 960px) { .kr-contact { position: sticky; top: 5.5rem; } }
.kr-contact__ph { width: 7.25rem; margin: 0 auto .375rem; }
.kr-contact__ph .kr-slot { border-radius: 50%; background: var(--navy); }
.kr .kr-contact h3 { color: #fff; font-size: var(--fs-h3); letter-spacing: -.016em; }
.kr-contact__role { margin-bottom: .625rem !important; }

/* ================= 20 · ABSCHLUSS (Markenbild von avs.bayern) ================= */
.kr-final { position: relative; isolation: isolate; overflow: hidden; background: var(--night); padding: 6rem 0; text-align: center; }
@media (min-width: 768px) { .kr-final { padding: 11rem 0; } }
.kr-final__bg { position: absolute; left: 0; top: -14%; z-index: -2; width: 100%; height: 128%; max-width: none !important; object-fit: cover; will-change: transform; }
.kr-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 16, 40, .86); }
.kr .kr-final__box .kr-h2 { max-width: 56.25rem; margin: 0 auto; color: #fff; }
.kr-final__box p { max-width: 38.75rem; margin: 1.375rem auto 2.125rem !important; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, .9); }

/* ================= Feste Leiste mit Sprungmarken (ab Tablet, nach dem Hero) ================= */
.kr-subnav { display: none; }
@media (min-width: 768px) {
  .kr-subnav { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 950; background: #fff; border-bottom: 1px solid var(--line); transform: translateY(-110%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; font-family: "Rubik", sans-serif; }
  .kr-subnav.is-on { transform: none; }
  .kr-subnav__in { display: flex; align-items: center; gap: .25rem; max-width: 77.5rem; height: 3.75rem; margin: 0 auto; padding: 0 2.5rem; }
  .kr-subnav a:not(.kr-btn) { padding: .5rem .75rem; margin-left: -.75rem; margin-right: .75rem; font-size: var(--fs-small); font-weight: 600; color: #003674; text-decoration: none; white-space: nowrap; transition: color .2s; }
  .kr-subnav a:not(.kr-btn):hover, .kr-subnav a.is-current { color: #F26B31; }
  .kr-subnav .kr-btn { margin-left: auto; min-height: 2.5rem; padding: .5rem 1.125rem; font-size: var(--fs-small); }
  .kr-subnav .kr-btn:hover { background: #003674; }
}
@media (min-width: 768px) and (max-width: 899px) { .kr-subnav__in { padding: 0 1.25rem; } .kr-subnav a:not(.kr-btn) { margin-right: 0; padding: .5rem .5rem; margin-left: -.5rem; } }

/* ================= Agentur-Zeile, Bewerben-Balken, mobiles Menü ================= */
.kr-credit { padding: .875rem 1.25rem 1rem; background: #001A37; border-top: 1px solid rgba(229, 234, 241, .12); color: rgba(229, 234, 241, .7); font-family: "Rubik", "Inter", sans-serif; font-size: var(--fs-label); font-weight: 300; text-align: center; line-height: 1.5; }
.kr-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.kr-sticky.is-on { transform: none; }
@media (min-width: 768px) { .kr-sticky { display: none; } }
@media (max-width: 767.98px) { .kr-credit { padding-bottom: 6rem; } }

.kr-offcanvas { position: fixed; inset: 0; z-index: 1050; visibility: hidden; pointer-events: none; }
.kr-offcanvas.is-open { visibility: visible; pointer-events: auto; }
.kr-offcanvas__backdrop { position: absolute; inset: 0; background: rgba(0, 10, 26, .55); opacity: 0; transition: opacity .3s; }
.kr-offcanvas.is-open .kr-offcanvas__backdrop { opacity: 1; }
.kr-offcanvas__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(86%, 22.5rem); padding: 4rem 1.5rem 1.5rem; background: #fff; display: flex; flex-direction: column; gap: 2px; transform: translateX(-100%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); box-shadow: .625rem 0 2.5rem rgba(0, 0, 0, .2); overflow-y: auto; }
.kr-offcanvas.is-open .kr-offcanvas__panel { transform: none; }
.kr-offcanvas__panel > a:not(.kr-btn) { padding: .875rem .25rem; border-bottom: 1px solid #eee; font-family: "Rubik", "Inter", sans-serif; font-size: var(--fs-body); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #484848; text-decoration: none; }
.kr-offcanvas__panel > a:not(.kr-btn):hover, .kr-offcanvas__panel > a.is-active { color: #F26B31; }
.kr-offcanvas__panel .kr-btn { margin-top: 1.5rem; }
.kr-offcanvas__close { position: absolute; top: .875rem; right: .875rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: .625rem; background: #003674; color: #fff; cursor: pointer; }
body.kr-lock { overflow: hidden; }

/* ================= Einstellungen des Besuchers ================= */
/* ================= Effekte: Karten, Bilder, 4 Schritte, Hero beim Scrollen ================= */
.kr-tcard, .kr-area, .kr-value, .kr-step, .kr-tip, .kr-job { overflow: hidden; }
.kr-tcard::after, .kr-area::after, .kr-value::after, .kr-step::after, .kr-tip::after, .kr-job::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .25rem; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.kr-job { position: relative; }
.kr-i3 { transition: transform .55s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .kr-js .is-in.is-done > .kr-r { transition: transform .45s var(--ease), opacity .45s var(--ease); transition-delay: 0s; }
  .kr-js .is-in.is-done > .kr-tcard:hover, .kr-js .is-in.is-done > .kr-area:hover, .kr-js .is-in.is-done > .kr-value:hover, .kr-js .is-in.is-done > .kr-step:hover, .kr-js .is-in.is-done > .kr-tip:hover, .kr-js .is-in.is-done > .kr-benefit:hover { transform: translateY(-.5rem); }
  .kr-tcard:hover::after, .kr-area:hover::after, .kr-value:hover::after, .kr-step:hover::after, .kr-tip:hover::after, .kr-job:hover::after { transform: scaleX(1); }
  .kr-js .is-in > .kr-r:hover .kr-i3 { transform: scale(1.14) rotate(-6deg); transition-delay: 0s; }
  .kr-js .kr-places .kr-slot.is-shown:hover > img, .kr-js .kr-job--main:hover .kr-slot.is-shown > img { transform: scale(1.06); transition-duration: .9s; }
}
/* 4 Schritte: eine orange Linie läuft beim Scrollen von Schritt 1 bis 4 */
@media (min-width: 1000px) {
  .kr-steps { position: relative; padding-top: 2.25rem !important; }
  .kr-steps::before, .kr-steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .1875rem; border-radius: .1875rem; background: var(--line); }
  .kr-steps::after { background: var(--orange); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
}
.kr-hero__copy { will-change: transform, opacity; }

/* ================= Übergänge zwischen den Abschnitten =================
   Blaue Abschnitte: Die blaue Fläche fährt beim Hereinscrollen von 86 % auf volle Breite auf und beim Verlassen wieder zusammen.
   Dafür schieben sich 2 schmale Blenden in der Farbe des Nachbarabschnitts am oberen und unteren Rand nach außen (kleine Ebenen, damit es flüssig bleibt).
   Helle Abschnitte wechseln ohne Zierlinie (Felix, 2026-10-10). */
.kr-js .kr-sec.kr-dark::before, .kr-js .kr-sec.kr-dark::after { content: ""; position: absolute; left: 0; right: 0; height: 9.5rem; pointer-events: none; will-change: transform; }
.kr-js .kr-sec.kr-dark::before { top: 0; background: linear-gradient(90deg, var(--bg-a, #fff) 0 7%, transparent 7% 93%, var(--bg-a, #fff) 93% 100%); transform: scaleX(var(--o, 1.17)); }
.kr-js .kr-sec.kr-dark::after { bottom: 0; background: linear-gradient(90deg, var(--bg-b, #fff) 0 7%, transparent 7% 93%, var(--bg-b, #fff) 93% 100%); transform: scaleX(var(--u, 1.17)); }
.kr-js .kr-sec--flush::after { display: none; }
@media (max-width: 767.98px) { .kr-js .kr-sec.kr-dark::before, .kr-js .kr-sec.kr-dark::after { height: 5rem; } }


/* ================= Farbverläufe als Akzent (Felix, 2026-10-09): Blau und Orange dürfen verlaufen, aber als klare Flächen und Schrift, keine Flecken ================= */
.kr, .kr-sticky, .kr-subnav, .kr-progress { --grad-blue: linear-gradient(135deg, #0b4fa3 0%, #003674 46%, #002352 100%); --grad-orange: linear-gradient(180deg, #ff9a4d 0%, #f26b31 55%, #e2501a 100%); --grad-line: linear-gradient(90deg, #f26b31 0%, #ff9a4d 100%); }
.kr-dark { background: var(--grad-blue); }
.kr-final { background: var(--night); }
.kr-final::after { background: linear-gradient(135deg, rgba(8, 66, 140, .9) 0%, rgba(0, 40, 92, .93) 50%, rgba(0, 18, 44, .96) 100%); }
.kr-whysec { padding-top: 0; }
.kr-contact { background-image: var(--grad-blue); }
/* Orange Schrift mit leichtem Verlauf von hell nach kräftig */
.kr-hero__title span .kr-w > span, .kr .kr-h2 > span:not(.kr-w) .kr-w > span, .kr-step b, .kr-tip span, .kr-day__time span, .kr-daystep__t { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--orange); }
.kr-hero__title span .kr-w > span, .kr .kr-h2 > span:not(.kr-w) .kr-w > span { padding-bottom: .12em; }
/* Buttons, Linien und Kanten */
.kr-btn--primary { background-image: var(--grad-orange); }
.kr-btn--primary:hover, .kr-dark .kr-btn--primary:hover, .kr-hero .kr-btn--primary:hover, .kr-map .kr-btn--primary:hover, .kr-contact .kr-btn--primary:hover { background-image: none; }
.kr-hero__badge span { border-image: var(--grad-line) 1; }
.kr-progress i, .kr-steps::after, .kr-tcard::after, .kr-area::after, .kr-value::after, .kr-step::after, .kr-tip::after, .kr-job::after { background: var(--grad-line); }
/* Hero: Schleier in Blau mit Verlauf nach Nachtblau */
@media (min-width: 1000px) { .kr-hero__media::after { background: linear-gradient(90deg, rgba(0, 16, 40, .97) 0%, rgba(0, 22, 52, .95) 34%, rgba(0, 40, 92, .78) 50%, rgba(0, 54, 116, .4) 70%, rgba(0, 54, 116, .22) 100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kr *, .kr *::before, .kr *::after, .kr-sticky, .kr-progress i { animation: none !important; transition: none !important; }
  .kr-js .kr-r, .kr-js .kr-fade, .kr-js .kr-after, .kr-w > span, .kr-success, .kr-js .kr-sec.kr-dark::before, .kr-js .kr-sec.kr-dark::after, .kr-js .kr-slot > img:not(.kr-slot__icon), .kr-hero__media, .kr-about__media2, .kr-claim__media2 { opacity: 1 !important; transform: none !important; }
  .kr-subnav { transition: none !important; }
  .kr-js .kr-r .kr-i3 { transform: none !important; }
  .kr-torch { display: none; }
  .kr-teamwide__media img, .kr-final__bg { top: 0; height: 100%; transform: none !important; }
  .kr-steps::after { transform: none !important; }
  .kr-js .kr-sec.kr-dark::before, .kr-js .kr-sec.kr-dark::after { display: none !important; }
  .kr-hero__copy { transform: none !important; opacity: 1 !important; }
}
@media (prefers-contrast: more) {
  .kr-hero__lead, .kr-dark .kr-sub { color: #fff; }
}