/* =====================================================================
   WeVo Redesign-CSS (nur fuer /karriere und /ansprechpartner)
   Bewusst OHNE @layer - die bestehende styles.css hat unlayered Rules
   (* { margin: 0 } u.ae.), die layered Rules immer ueberschreiben wuerden.
   Statt @layer-Trennung nutzen wir den .rd-Body-Class als Scope.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------------- */
:root {
  --color-brand-900: #1f3a36;
  --color-brand-800: #2a4a45;
  --color-brand-700: #355d56;
  --color-brand-600: #3f7167;
  --color-brand-500: #1b805e;
  --color-brand-400: #4ea592;
  --color-brand-300: #7cc4b3;
  --color-brand-200: #b3decf;
  --color-brand-100: #d7ece4;
  --color-brand-50:  #ecf6f2;

  --color-sand-900: #5b4f3a;
  --color-sand-700: #8a7a5e;
  --color-sand-500: #c4b89c;
  --color-sand-300: #e6dec9;
  --color-sand-200: #ece5d4;
  --color-sand-100: #f2ede6;
  --color-sand-50:  #faf7f1;

  --color-service-tiefbau:        #afca00;
  --color-service-tiefbau-dark:   #8aa000;
  --color-service-entsorgung:     #ef7c00;
  --color-service-entsorgung-dark:#c46500;
  --color-service-kanal:          #00b0eb;
  --color-service-kanal-dark:     #008cbb;
  --color-service-energie:        #dc1b26;
  --color-service-energie-dark:   #b3151e;

  --color-bg:          #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-inverse:  var(--color-brand-900);
  --color-surface:     #f4f2ee;
  --color-surface-alt: #ebe7df;
  --color-text:        #1a2a27;
  --color-text-muted:  #4f5e5b;
  --color-text-soft:   #7a8784;
  --color-text-inverse:#ffffff;
  --color-border:      rgba(31, 58, 54, 0.16);
  --color-border-strong: rgba(31, 58, 54, 0.32);
  --color-focus:       var(--color-brand-700);
  /* CTA-/Akzent-Farbe: Brand-Petrol statt Entsorgungs-Orange.
     Das Orange ist eine spezifische Service-Farbe (Entsorgung) und passt
     nicht als generischer CTA-Akzent fuer die Gruppe. */
  --color-accent:      var(--color-brand-700);
  --color-accent-hover:var(--color-brand-900);

  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-3xs:  0.75rem;
  --fs-2xs:  0.8125rem;
  --fs-xs:   0.875rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-xl:   clamp(1.20rem, 1.10rem + 0.40vw, 1.40rem);
  --fs-2xl:  clamp(1.45rem, 1.30rem + 0.65vw, 1.75rem);
  --fs-3xl:  clamp(1.70rem, 1.45rem + 1.05vw, 2.20rem);
  --fs-4xl:  clamp(2.00rem, 1.65rem + 1.50vw, 2.75rem);
  --fs-5xl:  clamp(2.30rem, 1.85rem + 1.95vw, 3.25rem);

  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.55; --lh-relaxed:1.65;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:.02em;
  --tracking-wider:.06em;   --tracking-widest:.14em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem;
  --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --section-py-sm: clamp(2.5rem, 4vw + 1rem, 4rem);
  --section-py:    clamp(3.5rem, 6vw + 1rem, 6.5rem);
  --section-py-lg: clamp(5rem,   8vw + 1rem, 9rem);

  --container:        min(100% - 2.5rem, 1280px);
  --container-narrow: min(100% - 2.5rem, 880px);
  --container-wide:   min(100% - 2rem,   1440px);
  --gutter:           clamp(1rem, 2vw, 1.75rem);

  --radius-xs:2px; --radius-sm:3px; --radius-md:4px; --radius-lg:6px;
  --radius-xl:8px; --radius-2xl:12px; --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(31, 58, 54, 0.05);
  --shadow-md: 0 2px 6px rgba(31, 58, 54, 0.07);
  --shadow-lg: 0 8px 24px rgba(31, 58, 54, 0.10);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-100:120ms; --dur-200:200ms; --dur-300:320ms; --dur-500:520ms; --dur-700:720ms;

  /* Bestand-Header ist position:fixed mit ~130px Hoehe. */
  --header-h: 130px;
}
@media (max-width: 1200px) { :root { --header-h: 100px; } }
@media (max-width: 900px)  { :root { --header-h: 80px; } }
@media (max-width: 600px)  { :root { --header-h: 70px; } }

/* ---------------------------------------------------------------------
   BASE (Body weglassen, da styles.css das schon definiert)
   --------------------------------------------------------------------- */
.rd h1, .rd .h1 { font-size: var(--fs-4xl); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -.005em; color: var(--color-brand-900); }
.rd h2, .rd .h2 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); line-height: 1.2;  color: var(--color-brand-900); }
.rd h3, .rd .h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: 1.3;  color: var(--color-brand-900); }
.rd h4, .rd .h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-brand-900); }
.rd .display    { font-size: var(--fs-5xl); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -.01em; color: var(--color-brand-900); }
.rd p { max-width: 65ch; }
.rd .lead { font-size: var(--fs-lg); line-height: var(--lh-normal); max-width: 62ch; }
.rd .muted { color: var(--color-text-muted); }
.rd .soft  { color: var(--color-text-soft); }

.rd .eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-brand-700);
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--color-brand-700);
  margin-bottom: var(--space-3);
}

.rd a { color: var(--color-brand-600); text-decoration: none; transition: color var(--dur-200) var(--ease-out); }
.rd a:hover { color: var(--color-brand-800); }

/* ---------------------------------------------------------------------
   CONTAINER & SECTIONS
   Wichtig: margin-inline: auto MUSS hier definitiv greifen.
   Da styles.css ein globales `* { margin: 0 }` setzt, das unlayered ist,
   nutzen wir hier zusaetzlich !important fuer den Container-Margin —
   sonst zentriert sich nichts.
   --------------------------------------------------------------------- */
.rd .container        { width: var(--container);        margin-left: auto !important; margin-right: auto !important; }
.rd .container-narrow { width: var(--container-narrow); margin-left: auto !important; margin-right: auto !important; }
.rd .container-wide   { width: var(--container-wide);   margin-left: auto !important; margin-right: auto !important; }

.rd .section { padding-top: var(--section-py); padding-bottom: var(--section-py); position: relative; background: var(--color-bg); }
.rd .section--sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.rd .section--lg { padding-top: var(--section-py-lg); padding-bottom: var(--section-py-lg); }
.rd .section--tight-top    { padding-top: 0 !important; }
.rd .section--tight-bottom { padding-bottom: 0 !important; }
.rd .section--surface { background: var(--color-surface); }
.rd .section--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.rd .section--inverse h1, .rd .section--inverse h2,
.rd .section--inverse h3, .rd .section--inverse h4 { color: #fff; }
.rd .section--inverse .muted   { color: rgba(255,255,255,.72); }
.rd .section--inverse .eyebrow { color: var(--color-brand-200); border-bottom-color: var(--color-brand-200); }

.rd .section__head {
  display: flex; flex-direction: column;
  gap: var(--space-3); max-width: 64ch;
  margin-top: 0 !important;
  margin-bottom: var(--space-7) !important;
  margin-left: 0; margin-right: 0;
}
.rd .section__head--center { text-align: center; align-items: center; margin-left: auto !important; margin-right: auto !important; }
.rd .section__head h2 + p { color: var(--color-text-muted); font-size: var(--fs-base); max-width: 60ch; }

/* ---------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------- */
.rd .stack > * + * { margin-block-start: var(--stack-gap, var(--space-5)); }
.rd .cluster {
  display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-4)); align-items: center;
}
.rd .cluster--between { justify-content: space-between; }
.rd .cluster--center  { justify-content: center; }

.rd .auto-grid {
  display: grid;
  gap: var(--grid-gap, var(--gutter));
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
}
.rd .auto-grid--sm { --grid-min: 12rem; }
.rd .auto-grid--md { --grid-min: 16rem; }
.rd .auto-grid--lg { --grid-min: 22rem; }

.rd .mt-0{margin-top:0 !important} .rd .mt-2{margin-top:var(--space-2) !important}
.rd .mt-4{margin-top:var(--space-4) !important} .rd .mt-6{margin-top:var(--space-6) !important}
.rd .mt-8{margin-top:var(--space-8) !important}
.rd .mb-0{margin-bottom:0 !important} .rd .mb-4{margin-bottom:var(--space-4) !important}
.rd .mb-6{margin-bottom:var(--space-6) !important} .rd .mb-8{margin-bottom:var(--space-8) !important}
.rd .center{text-align:center} .rd .right{text-align:right}

/* ---------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------- */
.rd .rd-btn {
  --btn-bg: var(--color-brand-800);
  --btn-bg-hover: var(--color-brand-900);
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-py: 0.85rem;
  --btn-px: 1.4rem;
  --btn-fs: var(--fs-sm);
  --btn-radius: var(--radius-xs);

  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--dur-200) var(--ease-out),
              border-color    var(--dur-200) var(--ease-out),
              color           var(--dur-200) var(--ease-out);
}
.rd .rd-btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.rd .rd-btn .rd-btn__icon { display:inline-flex; width:1.1em; height:1.1em; transition: transform var(--dur-300) var(--ease-out); }
.rd .rd-btn:hover .rd-btn__icon { transform: translateX(3px); }
.rd .rd-btn--accent  { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-hover); }
.rd .rd-btn--ghost   { --btn-bg: transparent; --btn-fg: var(--color-brand-900); --btn-border: var(--color-brand-900); --btn-bg-hover: var(--color-brand-900); }
.rd .rd-btn--ghost:hover { color: #fff; }
.rd .rd-btn--inverse { --btn-bg: #fff; --btn-fg: var(--color-brand-900); --btn-border: #fff; --btn-bg-hover: var(--color-surface); }
.rd .rd-btn--sm { --btn-py: 0.6rem; --btn-px: 1rem; --btn-fs: var(--fs-xs); }
.rd .rd-btn--lg { --btn-py: 1rem;   --btn-px: 1.8rem; --btn-fs: var(--fs-base); }

.rd .link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  color: var(--color-brand-800); text-decoration: none;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding-bottom: .3em; border-bottom: 1.5px solid var(--color-brand-800);
  transition: color var(--dur-200) var(--ease-out);
}
.rd .link-arrow::after { content: "→"; transition: transform var(--dur-300) var(--ease-out); }
.rd .link-arrow:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.rd .link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------------------- */
.rd .breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.rd .breadcrumbs a { color: var(--color-text-muted); }
.rd .breadcrumbs a:hover { color: var(--color-brand-800); }
.rd .breadcrumbs [aria-current="page"] { color: var(--color-brand-900); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------
   JOB-CARDS
   --------------------------------------------------------------------- */
.rd .job-card {
  --accent: var(--color-brand-700); --accent-dark: var(--color-brand-900);
  position: relative; display: flex; flex-direction: column;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-top: 4px solid var(--accent);
  text-decoration: none; color: var(--color-text);
  transition: border-color var(--dur-200) var(--ease-out);
  height: 100%; padding: var(--space-5);
}
.rd .job-card:hover { border-top-color: var(--accent-dark); border-color: var(--color-brand-700); }
.rd .job-card[data-accent="tiefbau"]        { --accent: var(--color-service-tiefbau);    --accent-dark: var(--color-service-tiefbau-dark); }
.rd .job-card[data-accent="entsorgung"]     { --accent: var(--color-service-entsorgung); --accent-dark: var(--color-service-entsorgung-dark); }
.rd .job-card[data-accent="kanalsanierung"] { --accent: var(--color-service-kanal);      --accent-dark: var(--color-service-kanal-dark); }
.rd .job-card[data-accent="energie"]        { --accent: var(--color-service-energie);    --accent-dark: var(--color-service-energie-dark); }
.rd .job-card__title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: var(--color-brand-900); margin: 0 0 var(--space-2);
}
.rd .job-card__meta {
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  color: var(--color-text-muted); font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
}
.rd .job-card__meta li::after { content: "·"; margin-left: .65rem; color: var(--color-text-soft); }
.rd .job-card__meta li:last-child::after { display: none; }
.rd .job-card__cta {
  margin-top: auto; padding-top: var(--space-4);
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: var(--fw-bold); color: var(--color-brand-800);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.rd .job-card__cta::after { content: "→"; transition: transform var(--dur-300) var(--ease-out); }
.rd .job-card:hover .job-card__cta::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   CTA-BAND
   --------------------------------------------------------------------- */
.rd .cta-band {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  background:
    linear-gradient(120deg,
      var(--color-brand-900) 0%,
      var(--color-brand-800) 55%,
      var(--color-brand-700) 100%);
  box-shadow: var(--shadow-lg);
}
/* Subtile diagonale Streifen-Textur fuer optisches Interesse */
.rd .cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    -35deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 22px,
    rgba(255,255,255,0.025) 22px,
    rgba(255,255,255,0.025) 23px
  );
  pointer-events: none;
}
/* Grosser dekorativer Pfeil rechts oben, der den Klick-Hinweis verstaerkt */
.rd .cta-band::after {
  content: "";
  position: absolute;
  top: -40%; right: -8%;
  width: 50%; height: 180%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.rd .cta-band__inner {
  display: grid; gap: var(--space-6); align-items: center;
  position: relative; z-index: 1;
}
@media (min-width: 56rem) {
  .rd .cta-band__inner { grid-template-columns: 1.4fr auto; gap: clamp(2rem, 4vw, 4rem); }
}
.rd .cta-band__eyebrow {
  display: inline-block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-brand-200);
  padding-bottom: .4rem;
  margin: 0 0 var(--space-3);
  border-bottom: 2px solid var(--color-brand-200);
}
.rd .cta-band h2 {
  font-size: var(--fs-4xl); margin: 0 0 var(--space-3);
  color: #fff; line-height: 1.1; letter-spacing: -0.01em;
}
.rd .cta-band p  { color: rgba(255,255,255,.88); max-width: 56ch; font-size: var(--fs-lg); margin: 0; line-height: 1.55; }
.rd .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 55.99rem) {
  .rd .cta-band__actions { width: 100%; }
  .rd .cta-band__actions .rd-btn { flex: 1 1 auto; min-width: 12rem; }
}

/* ---------------------------------------------------------------------
   TEAM-CARD CTA-Variante (Dummy-Karte pro Abteilung)
   --------------------------------------------------------------------- */
.rd .team-card--cta {
  background: var(--color-surface);
  border-style: dashed;
  border-color: var(--accent, var(--color-brand-700));
  color: var(--color-brand-900);
}
.rd .team-card--cta:hover {
  background: var(--color-bg-elevated);
  border-style: solid;
}
.rd .team-card__photo--cta {
  background: var(--color-surface);
  display: grid; place-items: center;
  color: var(--accent, var(--color-brand-700));
}
.rd .team-card__photo--cta svg {
  width: 48px; height: 48px;
  transition: transform var(--dur-300) var(--ease-out);
}
.rd .team-card--cta:hover .team-card__photo--cta svg {
  transform: rotate(90deg) scale(1.1);
}
.rd .team-card__job-count {
  font-size: 3.5rem;
  font-weight: var(--fw-bold);
  color: var(--accent, var(--color-brand-700));
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform var(--dur-300) var(--ease-out);
}
.rd .team-card--cta:hover .team-card__job-count {
  transform: scale(1.1);
}
.rd .team-card--cta .team-card__name { color: var(--color-brand-900); }
.rd .team-card--cta .team-card__role { color: var(--color-text-muted); }
.rd .team-card__cta-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent, var(--color-brand-700));
}
.rd .team-card--cta:hover .team-card__cta-link {
  color: var(--color-brand-900);
}

/* ---------------------------------------------------------------------
   REVEAL
   --------------------------------------------------------------------- */
.rd .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-700) var(--ease-out), transform var(--dur-700) var(--ease-out); }
.rd .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rd .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   TEAM
   --------------------------------------------------------------------- */
.rd .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-5);
}
.rd .team-card {
  --accent: var(--color-brand-700);
  display: flex; flex-direction: column;
  background: var(--color-bg-elevated);
  overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-200) var(--ease-out);
}
.rd .team-card:hover { border-color: var(--accent); }
.rd .team-card__photo {
  aspect-ratio: 1; overflow: hidden; background: var(--color-sand-200);
  position: relative;
}
.rd .team-card__photo::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 4px; background: var(--accent);
}
.rd .team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-700) var(--ease-out); display: block; }
.rd .team-card:hover .team-card__photo img { transform: scale(1.04); }
.rd .team-card__photo-placeholder {
  width:100%; height:100%; display:grid; place-items:center;
  background: var(--color-brand-100); color: var(--color-brand-700);
  font-size: 2.5rem; font-weight: var(--fw-bold); text-transform: uppercase;
}
.rd .team-card__body { padding: var(--space-4); }
.rd .team-card__name { font-weight: var(--fw-semibold); color: var(--color-brand-900); font-size: var(--fs-base); line-height: 1.25; }
.rd .team-card__role { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: .15rem; }
.rd .team-card__contact { display: flex; flex-direction: column; gap: .15rem; margin-top: var(--space-3); font-size: var(--fs-sm); }
.rd .team-card__contact a {
  color: var(--color-brand-700); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--color-brand-700) 30%, transparent);
  transition: border-color var(--dur-200) var(--ease-out);
  align-self: flex-start; word-break: break-word;
}
.rd .team-card__contact a:hover { border-bottom-color: var(--color-brand-700); }
.rd .team-card[data-accent="tiefbau"]            { --accent: var(--color-service-tiefbau); }
.rd .team-card[data-accent="entsorgung"]         { --accent: var(--color-service-entsorgung); }
.rd .team-card[data-accent="kanalsanierung"]     { --accent: var(--color-service-kanal); }
.rd .team-card[data-accent="energie"]            { --accent: var(--color-service-energie); }
.rd .team-card[data-accent="geschaeftsfuehrung"] { --accent: var(--color-brand-700); }

/* Department-Header */
.rd .team-dept {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-5) !important;
  flex-wrap: wrap;
}
.rd .team-dept:first-child { margin-top: 0 !important; }
.rd .team-dept__swatch {
  width: .55rem; height: 2.4rem; border-radius: var(--radius-pill);
  background: var(--color-brand-700); flex-shrink: 0;
}
.rd .team-dept[data-accent="tiefbau"]        .team-dept__swatch { background: var(--color-service-tiefbau); }
.rd .team-dept[data-accent="entsorgung"]     .team-dept__swatch { background: var(--color-service-entsorgung); }
.rd .team-dept[data-accent="kanalsanierung"] .team-dept__swatch { background: var(--color-service-kanal); }
.rd .team-dept[data-accent="energie"]        .team-dept__swatch { background: var(--color-service-energie); }
.rd .team-dept h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
  color: var(--color-brand-900); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); margin: 0;
}
.rd .team-dept__company {
  margin-left: auto; color: var(--color-text-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-align: right;
}
@media (max-width: 600px) {
  .rd .team-dept__company { margin-left: 0; width: 100%; text-align: left; font-size: var(--fs-xs); }
}

/* ---------------------------------------------------------------------
   FORM-INPUTS innerhalb Filter (Karriere)
   Wegen `* { margin: 0 }` brauchen wir keine extra Resets.
   --------------------------------------------------------------------- */
.rd select, .rd input[type="text"], .rd input[type="email"], .rd input[type="tel"] {
  font: inherit;
}

/* ---------------------------------------------------------------------
   HEADER: erzwingen, dass der Bestand-Header tatsaechlich position:fixed
   ist. Auf manchen Hostern greift das aus styles.css nicht zuverlaessig
   - dann wuerde der Header durch body-padding-top mit nach unten geschoben.
   --------------------------------------------------------------------- */
body.has-fixed-header #header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 9991 !important;
}
body.has-fixed-header { padding-top: var(--header-h); }