/* =========================================================
   Spedition Hütter GmbH – Karriere-Website
   Design-System: Lichtblau + Graphitgrau, Roboto
   Modern, mit Scroll-Animationen
   ========================================================= */

:root {
  --tlm-blue: #009CE1;              /* Primärfarbe: Lichtblau */
  --tlm-blue-2: #00b4f0;            /* helle Gradient-Spitze */
  --tlm-blue-dark: #007ab3;         /* Text/Hover auf Weiß */
  --tlm-blue-deep: #005f8c;         /* tiefes Blau */
  --tlm-grad: linear-gradient(135deg, #00b4f0 0%, #0082c8 100%);
  --tlm-graphite: #2b2e33;          /* Sekundärfarbe: Graphitgrau */
  --tlm-graphite-dark: #191b1e;     /* dunkler Footer / Hero */
  --tlm-light: #f4f8fc;             /* heller Sektionshintergrund */
  --tlm-muted: #64707d;             /* Fließtext gedämpft */
  --tlm-border: #e6edf4;
  --tlm-shadow: 0 .6rem 1.6rem rgba(25, 27, 30, .07);
  --tlm-shadow-lg: 0 1.4rem 3rem rgba(25, 27, 30, .13);
  --tlm-shadow-blue: 0 .8rem 1.8rem rgba(0, 156, 225, .32);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tlm-graphite);
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, .display-4, .display-5 { font-weight: 700; letter-spacing: -.015em; }
h2.section-title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; }
.text-graphite { color: var(--tlm-graphite) !important; }
.text-blue { color: var(--tlm-blue-dark) !important; }
.bg-graphite { background-color: var(--tlm-graphite) !important; }
.bg-graphite-dark { background-color: var(--tlm-graphite-dark) !important; }
.bg-light-blue { background-color: var(--tlm-light) !important; }
a { color: var(--tlm-blue-dark); }
a:hover { color: var(--tlm-blue-deep); }

/* Gradient-Text für Akzente/Zahlen */
.text-gradient {
  background: var(--tlm-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Eyebrow-Label */
.eyebrow {
  display: inline-flex; align-items: center; gap:.5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tlm-blue-dark); margin-bottom: .8rem;
}
.eyebrow::before { content:""; width:1.6rem; height:2px; background:var(--tlm-blue); display:inline-block; }
.eyebrow.on-dark { color: #fff; }
.eyebrow.on-dark::before { background:var(--tlm-blue); }
.eyebrow.center { justify-content:center; }

.section { padding: 6rem 0; overflow-x: hidden;}
@media (max-width: 767.98px) { .section { padding: 3.75rem 0; } }
.lead-muted { color: var(--tlm-muted); font-size: 1.1rem; }

/* verhindert horizontalen Overflow durch große Gutter auf schmalen Screens */
@media (max-width: 991.98px) {
  .row.g-4, .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------- Scroll-Reveal-Animationen ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].in-view { transform: none; }
/* Stagger */
.stagger > * { opacity:0; transform:translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.stagger.in-view > * { opacity:1; transform:none; }
.stagger.in-view > *:nth-child(1){transition-delay:.05s}
.stagger.in-view > *:nth-child(2){transition-delay:.13s}
.stagger.in-view > *:nth-child(3){transition-delay:.21s}
.stagger.in-view > *:nth-child(4){transition-delay:.29s}
.stagger.in-view > *:nth-child(5){transition-delay:.37s}
.stagger.in-view > *:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 2rem; font-weight: 600; padding: .7rem 1.7rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-lg { padding: .85rem 2rem; }
.btn-tlm {
  background: var(--tlm-grad); border: none; color: #fff;
  box-shadow: var(--tlm-shadow-blue);
}
.btn-tlm:hover, .btn-tlm:focus { color:#fff; transform: translateY(-2px); box-shadow: 0 1rem 2.2rem rgba(0,156,225,.42); }
.btn-tlm .arrow, .btn-outline-tlm .arrow { display:inline-block; transition: transform .2s ease; }
.btn-tlm:hover .arrow, .btn-outline-tlm:hover .arrow { transform: translateX(4px); }
.btn-outline-tlm {
  border: 2px solid var(--tlm-blue); color: var(--tlm-blue-dark); background: transparent;
}
.btn-outline-tlm:hover { background: var(--tlm-blue); color: #fff; transform: translateY(-2px); }
.btn-outline-light-tlm { border: 2px solid rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06); }
.btn-outline-light-tlm:hover { background:#fff; color:var(--tlm-graphite); border-color:#fff; transform:translateY(-2px); }

/* ---------- Navbar ---------- */
.navbar {
  transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
  padding-top: 1rem; padding-bottom: 1rem;
  background-color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.navbar .navbar-brand img { height: 46px; transition: height .3s ease; }
.navbar.scrolled { padding-top: .4rem; padding-bottom: .4rem; box-shadow: var(--tlm-shadow); background-color: rgba(255,255,255,.96); }
.navbar.scrolled .navbar-brand img { height: 38px; }
.navbar .nav-link { color: var(--tlm-graphite); font-weight: 500; margin: 0 .3rem; position: relative; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--tlm-blue-dark); }
.navbar .nav-link.active::after {
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.05rem; height:2px; background:var(--tlm-blue);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 70% 15%, #3a4048 0%, var(--tlm-graphite) 45%, var(--tlm-graphite-dark) 100%);
  color: #fff; padding: 10rem 0 8rem; overflow: hidden;
}
/* animierte Farb-Glows */
.hero::before {
  content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background: radial-gradient(closest-side, rgba(0,156,225,.35), rgba(0,156,225,0));
  filter: blur(10px); animation: floatGlow 9s ease-in-out infinite alternate; pointer-events:none;
}
.hero::after {
  content:""; position:absolute; bottom:-30%; left:-10%; width:45%; height:120%;
  background: radial-gradient(closest-side, rgba(0,180,240,.18), rgba(0,180,240,0));
  animation: floatGlow 11s ease-in-out infinite alternate-reverse; pointer-events:none;
}
@keyframes floatGlow { from{transform:translate(0,0)} to{transform:translate(-30px,30px)} }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.05; }
.hero .hero-sub { color: rgba(255,255,255,.85); font-size: 1.18rem; max-width: 34rem; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:.45rem 1.05rem; border-radius:2rem; font-size:.85rem; margin-bottom:1.6rem;
  backdrop-filter: blur(6px);
}
.hero-badge .dot { width:.55rem; height:.55rem; border-radius:50%; background: var(--tlm-blue); box-shadow:0 0 0 0 rgba(0,156,225,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(0,156,225,.55)} 70%{box-shadow:0 0 0 .5rem rgba(0,156,225,0)} 100%{box-shadow:0 0 0 0 rgba(0,156,225,0)} }

/* LKW fährt beim Laden von links herein */
.hero-truck {
  position: relative; z-index: 2; width: 100%; height: auto;
  transform: translateX(-130%); opacity: 0;
  filter: drop-shadow(0 1.6rem 2.2rem rgba(0,0,0,.5));
}
.hero-truck.drive-in { animation: truckDriveIn 1.6s cubic-bezier(.22,.61,.36,1) .3s forwards; }
@keyframes truckDriveIn { 0%{transform:translateX(-130%);opacity:0} 55%{opacity:1} 100%{transform:translateX(0);opacity:1} }
@media (prefers-reduced-motion: reduce) { .hero-truck{transform:none;opacity:1;animation:none} }

/* Scroll-Cue */
.scroll-cue { position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.7); font-size:1.5rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* Diagonaler Abschluss */
.diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }

/* ---------- Hero-Szene: LKW fährt über den Hof ein (GSAP) ---------- */
.hero-scene { position: relative; height: 92vh; min-height: 560px; overflow: hidden; background:#c7cdd3; }
/* object-position: bottom ist Pflicht, nicht Kosmetik: nur wenn die Bildunterkante
   an der Boxunterkante klebt, ist der Abstand der Hof-Bodenlinie zum unteren Rand
   berechenbar (siehe --ground bei .truck-scroll). Mit dem Default (center) wandert
   die Bodenlinie je Fensterhöhe und der LKW passt nur zufällig dazu. */
.hero-bg2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center bottom; will-change: transform; }
/* Zwei deckungsgleiche Parallax-Schichten (Hintergrund+Schatten / LKW). Beide
   bekommen dieselbe Scroll-Tween, dadurch bewegen sie sich pixelgleich und der LKW
   bleibt auf dem Hof stehen. Vorher wurde nur .hero-bg2 vertikal verschoben – der
   Boden wanderte unter dem LKW weg und er schwebte, auf großen Screens am stärksten. */
.hero-parallax, .hero-truck-layer { position: absolute; inset: 0; }
.hero-truck-layer { z-index: 5; pointer-events: none; }
@media (max-width: 767.98px) {
  /* gestapeltes Layout: der Layer darf den normalen Fluss nicht kapern,
     sonst rutscht der LKW aus seiner Position unter dem Textblock. */
  .hero-truck-layer { position: static; }
}
.hero-shade { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(15,18,22,.8) 0%, rgba(15,18,22,.5) 38%, rgba(15,18,22,0) 68%); }
.hero-copy2 { position: absolute; z-index: 6; top: 50%; left: 6%; transform: translateY(-50%); color:#fff; max-width: 42rem; }
/* Hero-Typo skaliert mit Viewport-Breite UND -Höhe. Vorher nur 5vw (Deckel 3.9rem):
   auf Laptops (breit, aber niedrig) füllte der Textblock den kompletten Hero und
   klebte an der fixierten Navbar – man musste im Browser auszoomen. */
.hero-copy2 h1 { font-size: clamp(2.2rem, min(5vw, 5.6vh), 3.9rem); line-height: 1.05; }
.hero-copy2 .hero-sub { color: rgba(255,255,255,.9); font-size: min(1.15rem, 2.1vh); max-width: 36rem; }
.hero-copy2 .hero-badge { margin-bottom: min(1.6rem, 2.4vh); }
/* LKW steht auf der Hoffläche des Hintergrundfotos – NICHT mittig im Hero.
   Vorher war `bottom` an die Hero-Mitte gekoppelt ((92vh - truckH)/2 - 2cm); die
   Bodenlinie des Fotos liegt aber je Fensterformat woanders, dadurch stand der LKW
   nur bei einer Fenstergröße richtig und schwebte sonst.
   Jetzt an der Bodenlinie gerechnet: Halle trifft Hof bei 68,6 % der Bildhöhe
   (background.png 1619×971, gemessen), ihr Abstand zur Unterkante sind also 31,4 %
   der gerenderten Bildhöhe. Bei object-fit:cover ist die entweder breitengetrieben
   (100vw / 1.6674) oder höhengetrieben (92vh) – deshalb max().
   Der LKW sitzt 42 % seiner eigenen Höhe unterhalb dieser Linie: der Versatz skaliert
   mit dem LKW mit, dadurch ist der Standpunkt auf jedem Bildschirm derselbe.
   ACHTUNG: 92vh muss zur Höhe von .hero-scene passen – beide zusammen ändern.
   Der grosse Rechts-Versatz ist Pflicht: mittig rückt der LKW sonst unter den
   Textblock und der Text stünde auf weisser Lackfläche. */
.truck-scroll {
  position: absolute; z-index: 5;
  /* Breite ist PLATZABHÄNGIG, nicht fix: der Textblock links belegt 6vw + 42rem.
     Damit der LKW rechts davon bleibt, gilt
       truckW <= 100vw + Rechtsversatz(28vw) - 6vw - 672px - Luft(24px) = 122vw - 700px.
     Ohne diesen Term überlappt der LKW unter ~1400px Fensterbreite den Text und
     der Text stünde auf weisser Lackfläche. */
  --truck-w: min(74vw, calc(122vw - 700px), 1320px);
  --truck-h: calc(var(--truck-w) / 2.917);
  width: var(--truck-w);
  /* Versatz gedeckelt: reines -28vw schiebt den LKW auf 27" so weit raus,
     dass nur noch ~46 % sichtbar sind. */
  right: max(-28vw, -420px);
  /* Abstand der Hof-Bodenlinie zur Hero-Unterkante (31,4 % der gerenderten Bildhöhe) */
  --ground: max(18.83vw, 28.89vh);
  bottom: calc(var(--ground) - var(--truck-h) * .42);
  will-change: transform;
}
/* width:100% ist Pflicht – ohne die Begrenzung rendert der LKW in Naturgröße und
   sprengt den Hero (fiel beim alten 1263px-Bild nur zufällig nicht auf). */
.hero-truck2 { width: 100%; height: auto; display:block; filter: drop-shadow(0 1.2rem 1.4rem rgba(0,0,0,.4)); will-change: transform, opacity; }
.scroll-cue2 { position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:7; color:#fff; font-size:1.5rem; animation: bounce 2s infinite; }
.scroll-cue2:hover { color:#fff; }
/* Tablet: LKW breiter und weniger aus dem Bild geschoben – mit -35vw war er
   nach der width-Begrenzung nur noch zur Hälfte sichtbar und wirkte gequetscht. */
@media (max-width: 991.98px){ .truck-scroll { width: 92%; right: -22vw; bottom: 0; } }
@media (max-width: 767.98px){
  /* gestapeltes Layout: Text oben, LKW darunter – keine Überlappung */
  .hero-scene { height: auto; min-height: 0; }
  .hero-copy2 { position: relative; top: auto; left: auto; transform: none; max-width: 100%; padding: 7rem 1.2rem 0; }
  /* Werte auf das freigestellte Foto (1864x639) abgestimmt: leicht über den
     rechten Rand hinaus = "fährt herein". Die alten Werte waren auf das
     überlaufende KI-Bild getunt und ließen den LKW winzig wirken. */
  .truck-scroll { position: relative; right: auto; left: auto; bottom: auto;
    width: 132%; max-width: none; margin: 1.5rem 0 0 -6%; }
  .hero-shade { background: linear-gradient(180deg, rgba(15,18,22,.72) 0%, rgba(15,18,22,.32) 62%, rgba(15,18,22,.5) 100%); }
  .scroll-cue2 { display: none; }
}


/* ---------- Bild-Marquee (Einblicke, direkt unter dem Hero) ----------
   Steht auf allen Seiten an derselben Stelle: direkt nach dem Hero/Page-Banner.
   Endlos-Lauf ohne JS: Der Track enthält die Bildliste genau zweimal und wird
   um 50 % verschoben. Abstand deshalb als margin-right am Item (nicht als
   flex-gap) – sonst stimmt die halbe Track-Breite nicht und es ruckelt.
   Hintergrund weiss; die Haarlinie unten ist Pflicht, weil die Folge-Section
   ebenfalls weiss ist und der Streifen sonst nach unten randlos ausläuft. */
.marquee { position: relative; overflow: hidden; background:#fff; padding: 1.1rem 0;
  border-bottom: 1px solid var(--tlm-border); }
.marquee::before, .marquee::after {
  content:""; position:absolute; top:0; bottom:0; width:8%; z-index:2; pointer-events:none;
}
.marquee::before { left:0; background: linear-gradient(90deg, #fff, transparent); }
.marquee::after  { right:0; background: linear-gradient(270deg, #fff, transparent); }
.marquee-track { display:flex; width:max-content; animation: marqueeScroll 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item { flex:0 0 auto; margin-right:1.1rem; border-radius:.9rem; overflow:hidden; }
.marquee-item img { display:block; height: clamp(118px, 19vh, 200px); width:auto; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Werte-/Benefit-Karten ---------- */
.value-card {
  background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem;
  padding:2.1rem 1.7rem; height:100%; position:relative; overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.value-card::after { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tlm-grad); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.value-card:hover { transform: translateY(-8px); box-shadow: var(--tlm-shadow-lg); border-color:transparent; }
.value-card:hover::after { transform:scaleX(1); }
.value-icon {
  width:3.6rem; height:3.6rem; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  background: rgba(0,156,225,.12); color: var(--tlm-blue-dark); font-size:1.6rem; margin-bottom:1.15rem;
  transition: transform .28s ease;
}
.value-card:hover .value-icon { transform: scale(1.08) rotate(-4deg); }

/* Zahlen/Counter */
.stat-num { font-size: clamp(2rem,4vw,2.8rem); font-weight:900; line-height:1; }

/* ---------- Positions-Karten ---------- */
.job-card {
  background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem;
  overflow:hidden; height:100%; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position:relative;
}
.job-card:hover { transform: translateY(-8px); box-shadow: var(--tlm-shadow-lg); border-color:transparent; }
/* Bildfläche skaliert mit der Kartenbreite (col-md-6 vs. col-lg-4 unterscheiden
   sich stark) – fixe 9.5rem wirkten auf Desktop wie ein Briefmarken-Streifen.
   Die Icon-Kachel (.job-icon) ist entfallen, das Foto trägt die Karte. */
.job-card .job-thumb { display:block; width:100%; height: clamp(12rem, 17vw, 16rem); object-fit:cover; }
.job-card .job-top { padding:1.4rem 1.7rem 1rem; border-top:4px solid transparent; border-image:var(--tlm-grad) 1; }
.job-card .job-tag { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--tlm-blue-dark); }
.job-card .job-body { padding:0 1.7rem 1.9rem; }
.job-card p.desc { color:var(--tlm-muted); font-size:.97rem; }

/* ---------- Overlay-/Split-Block ---------- */
.overlay-block { position: relative; color:#fff; border-radius:1.25rem; overflow:hidden; background: var(--tlm-graphite); }
.overlay-block .overlay-img { min-height: 340px; background-size:cover; background-position:center; }
.overlay-block .overlay-text { padding: 2.5rem; }
@media (min-width: 992px){ .overlay-block .overlay-text { padding: 3.75rem; } }

/* ---------- Standort / Maps ---------- */
.map-frame { border:0; width:100%; height:100%; min-height:360px; border-radius:1.25rem; filter:grayscale(.15); }
.map-wrap { border-radius:1.25rem; overflow:hidden; box-shadow: var(--tlm-shadow); height:100%; }

/* ---------- Arbeitgeberbewertung + Siegel (Quelle: kununu) ----------
   Echte Werte des Profils: 4,6 von 5 · 100 % Weiterempfehlung (Stand 2026-07-27).

   FARBEN = aktuelle kununu-Markenfarben, ausgelesen aus den OFFIZIELLEN Siegel-SVGs,
   die der Kunde aus seinem kununu-Arbeitgeberbereich geliefert hat
   (assets/img/kununu/*.svg, alle fünf Dateien geprüft):
     #102b69 Dunkelblau (Wortmarken-Fläche in allen Siegeln) · #feca14 Gelb (2026er
     Siegel) · #e9edef helles Grau · Jahresfarben #ff734d (2023), #f4cbd3 (2024).
   Vorher stand hier das Lime-Grün (#a0d61d) aus dem alten Theme-Repo
   github.com/kununu/theme (v3). Das ist die ABGELÖSTE Markenwelt – die Siegel
   belegen Dunkelblau/Gelb, also gilt das. Beleg schlägt Repo-Fundstück.

   Nach wie vor wird KEIN Siegel nachgezeichnet: die Siegel-Section bindet die
   echten SVGs aus dem Arbeitgeberbereich ein. */
.rating-card {
  --ku-navy: #102b69;
  --ku-navy-dark: #0b1f4d;
  --ku-yellow: #feca14;
  --ku-ice: #e9edef;
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  background: var(--ku-navy); border:1px solid var(--ku-navy); border-radius:1.1rem;
  padding:1.5rem 1.7rem; box-shadow: 0 .8rem 1.8rem rgba(16,43,105,.28); color:#fff;
}
.rating-card > .rc-body { flex:1 1 14rem; min-width:0; }
/* Score-Kachel gelb mit dunkelblauer Zahl – genau die Kombination, die kununu auf
   dem „Top Rated"-Siegel verwendet (gelbe Fläche, Typo in #102b69). */
.rating-score {
  flex:0 0 auto; text-align:center; line-height:1; color: var(--ku-navy);
  background: var(--ku-yellow); border-radius:1rem; padding:1.1rem 1.3rem; min-width:6.8rem;
}
.rating-score .rc-num { font-size:2.9rem; font-weight:900; line-height:1; display:block; }
.rating-score .rc-max { font-size:.8rem; opacity:.85; display:block; margin-top:.25rem; font-weight:700; }
/* Sterne in kununu-Gelb (halbe Sterne inklusive: 4,6 = 4½). */
.rating-stars { color: var(--ku-yellow); font-size:1rem; letter-spacing:2px;
  display:block; margin:.1rem 0 .75rem; }
.rating-src { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ku-yellow); display:block; margin-bottom:.4rem; }
.rating-card h5 { color:#fff; }
.rating-card p { color: rgba(255,255,255,.78) !important; }
.rating-chip {
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(254,202,20,.16); color: var(--ku-yellow); border-radius:2rem;
  padding:.35rem .9rem; font-size:.85rem; font-weight:700;
}
.btn-kununu { background: var(--ku-yellow); border:none; color: var(--ku-navy); font-weight:700; }
.btn-kununu:hover, .btn-kununu:focus { color: var(--ku-navy); background:#ffd94a; }

/* ---------- kununu-Siegel-Reihe ----------
   Die SVGs bringen eine eigene weiße Fläche mit; deshalb steht die Reihe auf weiß
   und die Kacheln bekommen nur einen dezenten Rahmen, keine Farbfläche. */
.seal-row { display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem; }
.seal-item {
  flex:0 0 auto; background:#fff; border:1px solid var(--tlm-border); border-radius:.9rem;
  padding:.75rem; line-height:0;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.seal-item:hover { transform: translateY(-6px); box-shadow: var(--tlm-shadow-lg); border-color: #102b69; }
.seal-item img { display:block; height: clamp(7rem, 11vw, 9.5rem); width:auto; }
@media (max-width: 575.98px) { .seal-item img { height: 6.2rem; } }

/* ---------- Formular (Kurzbewerbung) ---------- */
.form-wrap { background:#fff; border-radius:1.25rem; box-shadow: var(--tlm-shadow-lg); padding:2rem; }
@media (min-width:992px){ .form-wrap { padding:2.9rem; } }
.form-label { font-weight:500; font-size:.92rem; }
.form-control, .form-select { border-radius:.7rem; padding:.75rem .95rem; border-color:var(--tlm-border); }
.form-control:focus, .form-select:focus { border-color: var(--tlm-blue); box-shadow: 0 0 0 .2rem rgba(0,156,225,.2); }
/* Honeypot: für Menschen unsichtbar, von Bots ausgefüllt. Bewusst NICHT
   display:none/hidden – manche Bots überspringen solche Felder. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-item { display:flex; gap:.9rem; margin-bottom:1.4rem; align-items:flex-start; }
.contact-item .ci-icon { flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:.8rem; background: rgba(0,156,225,.12); color:var(--tlm-blue-dark); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }

/* Erfolgs-/Prozess-Bereich */
.process-step { display:flex; gap:1.1rem; margin-bottom:1.6rem; }
.process-step .step-num {
  flex:0 0 auto; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--tlm-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--tlm-shadow-blue);
}
.process-step h5 { margin-bottom:.25rem; }
.trust-quote { border-left:4px solid var(--tlm-blue); padding:1rem 0 1rem 1.4rem; font-style:italic; color:var(--tlm-graphite); }

/* ---------- Seiten-Banner (Stellenseiten) ---------- */
.page-banner {
      background-position: 0 87px;
  position: relative; color:#fff; padding: 9rem 0 4.5rem;
  background-size: cover; background-repeat: no-repeat;
}
.page-banner::before { content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(rgba(25,27,30,.72), rgba(25,27,30,.82)); }
.page-banner .container { position: relative; z-index: 1; }
.page-banner .breadcrumb a { color: rgba(255,255,255,.75); text-decoration:none; }
.page-banner .breadcrumb-item.active { color:#fff; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ---------- Stellenseiten-Hero mit Bildrahmen (Text links, Bild rechts) ----------
   Der Hook ist hier bewusst kleiner als .display-5: Text und Bildrahmen teilen sich
   die Breite, mit 3,5rem würde der Hook neben dem Rahmen sechs Zeilen hoch. */
/* overflow: hidden ist Pflicht – der Blau-Glow hinter dem Bildrahmen (.hero-frame::before)
   ragt sonst am Handy ~29px über den rechten Rand und erzeugt eine Horizontal-Scrollbar. */
.job-hero { padding-bottom: 5rem; overflow: hidden; }
.job-hero-title { font-size: clamp(1.5rem, 2.45vw, 2.1rem); line-height: 1.2; }
.job-hero-lead { color: rgba(255,255,255,.85); font-size: 1rem; }

/* Bildrahmen: Passepartout aus Farbverlauf, weicher Blau-Glow dahinter */
.hero-frame { position: relative; }
.hero-frame::before {
  content:""; position:absolute; inset:-12% -8%; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, rgba(0,156,225,.45), rgba(0,156,225,0));
}
.hero-frame-inner {
  position: relative; z-index:1; padding:.5rem; border-radius:1.4rem;
  background: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.04) 46%, rgba(0,156,225,.42));
  box-shadow: 0 1.5rem 3.2rem rgba(0,0,0,.45);
}
.hero-frame-inner img {
  display:block; width:100%; border-radius:1rem;
  height: clamp(18rem, 32vw, 25rem); object-fit: cover;
}

/* „Auf einen Blick" – kompakte Glas-Karte auf dem Bildrahmen (früher Sidebar) */
.hero-facts {
  position:absolute; z-index:2; left:1rem; right:1rem; bottom:1rem;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.65rem .9rem;
  padding:.9rem 1rem 1rem; border-radius:1rem;
  background: rgba(18,21,25,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.38);
}
.hero-facts .hf-title {
  grid-column:1/-1; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color: var(--tlm-blue-2);
}
.hf-item { display:flex; gap:.55rem; min-width:0; }
.hf-item > i { flex:0 0 auto; color: var(--tlm-blue-2); font-size:.95rem; line-height:1.5; }
.hf-item .hf-k { display:block; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); line-height:1.5; }
.hf-item .hf-v { display:block; font-size:.85rem; font-weight:600; color:#fff; line-height:1.25; }
@media (min-width: 576px) and (max-width: 991.98px) {
  /* gestapelt liegt der Rahmen über die volle Breite: ohne mehr Höhe verdeckt die
     Fakten-Karte fast die Hälfte des flachen Fotos. */
  .hero-frame-inner img { height:22rem; }
}
@media (max-width: 575.98px) {
  /* auf dem Handy würde die Karte das halbe Foto verdecken */
  .hero-facts { position:static; left:auto; right:auto; bottom:auto; margin-top:.5rem; }
  .hero-frame-inner img { height:14rem; }
}

/* ---------- Aufgaben-Section (Bild links, Text rechts) ----------
   Bewusst anders als der Hero-Rahmen: kein Passepartout, sondern ein versetzter
   Akzentblock hinter dem Foto plus überlappende Kennzahl. */
.task-media { position:relative; }
.task-media::before {
  content:""; position:absolute; left:-1rem; top:-1rem; width:60%; height:55%;
  border-radius:1.25rem; background:var(--tlm-grad); opacity:.18; z-index:0;
}
.task-media img {
  position:relative; z-index:1; display:block; width:100%; border-radius:1.25rem;
  height: clamp(19rem, 38vw, 29rem); object-fit:cover; box-shadow: var(--tlm-shadow-lg);
}
.task-chip {
  position:absolute; z-index:2; right:-.5rem; bottom:1.5rem; max-width:12.5rem;
  background:#fff; border:1px solid var(--tlm-border); border-radius:1rem;
  padding:.85rem 1.1rem; box-shadow: var(--tlm-shadow-lg);
}
.task-chip .tc-num { display:block; font-size:1.45rem; font-weight:900; line-height:1; }
.task-chip .tc-lbl { display:block; margin-top:.25rem; font-size:.78rem; line-height:1.3; color:var(--tlm-muted); }

/* Aufgabengruppen: schlanke Blöcke mit blauer Schiene statt Karten */
.task-group { position:relative; padding-left:1.3rem; margin-bottom:1.8rem; }
.task-group:last-child { margin-bottom:0; }
.task-group::before { content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:3px; border-radius:3px; background:var(--tlm-grad); }
.task-group > h3 { font-size:1.05rem; margin-bottom:.75rem; color: var(--tlm-blue-dark); }

/* ---------- Profil-Section mit Hintergrundbild ---------- */
/* Bewusst KEIN background-attachment: fixed – der Ausschnitt wird dann scrollabhängig
   und beim Einfahren der Section sieht man nur den unteren Bildrand (Boden/Beine). */
.profile-section { position:relative; color:#fff; padding:6rem 0; overflow:hidden;
  background-size:cover; background-position:center; }
@media (max-width:767.98px){ .profile-section { padding:3.75rem 0; } }
.profile-section::before { content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(15,18,22,.95) 0%, rgba(15,18,22,.86) 46%, rgba(15,18,22,.5) 100%); }
/* schmal: das Foto liegt hinter dem Text, deshalb flächig abdunkeln */
@media (max-width:991.98px){
  .profile-section::before { background: linear-gradient(180deg, rgba(15,18,22,.9), rgba(15,18,22,.84)); }
}
.profile-section > .container { position:relative; z-index:1; }
.profile-card {
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:1.4rem; padding:1.9rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.4);
}
@media (min-width:992px){ .profile-card { padding:2.8rem; } }
.profile-card .check-list li { color: rgba(255,255,255,.84); }
.profile-card .check-list li strong { color:#fff; }
.text-on-dark { color: rgba(255,255,255,.82); }

/* Aufgaben-/Profil-Listen */
.check-list { list-style:none; padding-left:0; }
.check-list li { position:relative; padding-left:2rem; margin-bottom:.75rem; }
.check-list li::before {
  content:"\2713"; position:absolute; left:0; top:.15rem; width:1.35rem; height:1.35rem; border-radius:50%;
  background: var(--tlm-grad); color:#fff; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Info-Karten für Aufgaben-Gruppen */
.info-card { background:#fff; border:1px solid var(--tlm-border); border-radius:1.1rem; padding:1.9rem; transition:transform .28s ease, box-shadow .28s ease; }
.info-card:hover { transform:translateY(-6px); box-shadow:var(--tlm-shadow-lg); }
.info-card h3, .info-card h4 { display:flex; align-items:center; gap:.6rem; }

/* Sticky Sidebar auf Stellenseiten */
@media (min-width: 992px){ .sticky-side { position: sticky; top: 6rem; } }

/* ---------- Footer ---------- */
.footer { background: var(--tlm-graphite-dark); color: rgba(255,255,255,.72); }
/* logo-weiss.png ist bereits weiß freigestellt – KEIN brightness/invert-Filter mehr
   (der hier vorher nötig war, um das dunkle logo-schrift.png weiß zu färben).
   Höhe 72px statt 50: das Logo ist fast quadratisch (212×166), als Schriftzug-Version
   war es doppelt so breit und wirkte bei 50px passend. */
.footer img.footer-logo { height:72px; width:auto; opacity:.95; }
.footer a { color: rgba(255,255,255,.72); text-decoration:none; transition:color .2s ease; }
.footer a:hover { color:#fff; }
.footer h6 { color:#fff; font-weight:700; letter-spacing:.03em; }
.footer .footer-bottom { border-top:1px solid rgba(255,255,255,.12); }

.iso-chip { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--tlm-border); border-radius:2rem; padding:.45rem 1rem; font-size:.85rem; color:var(--tlm-muted); background:#fff; }