/* ==========================================================================
   R&K Gruppe — Design System
   Light Mode: abgeleitet aus den Bestandsfarben der Webseite rkingenieure.de
   (#a1120e Rot, #342a2a / #404040 Schrift, #efefef Flächen, #c0c0c0 Linien,
    #f0e2e2 Rot-Tint)
   Dark Mode: warmes Anthrazit auf gleicher Rot-Achse, Akzent aufgehellt
   für ausreichenden Kontrast.
   ========================================================================== */

/* ---------- Schrift ----------
   Inter liegt lokal unter assets/fonts/ und wird NICHT mehr von Google
   geladen. Grund: Der Abruf von fonts.googleapis.com überträgt die
   IP-Adresse jedes Besuchers an Google. Das LG München I hat darin am
   20.01.2022 (Az. 3 O 17493/20) einen DSGVO-Verstoß gesehen und
   Schadenersatz zugesprochen. Lokal eingebunden verlässt kein Aufruf mehr
   die eigene Domain — die Einwilligungsfrage stellt sich damit nicht.

   Verwendet wird die variable Fassung: eine Datei deckt alle Schnitte von
   100 bis 900 ab (47 KB) statt fünf Einzeldateien mit zusammen 118 KB.
   Inter 5.3.0, SIL Open Font License 1.1 — Lizenztext im selben Ordner.

   font-display: swap zeigt den Text sofort in der Ersatzschrift und tauscht
   nach, sobald Inter geladen ist. Ohne diese Angabe bliebe Text bis zu drei
   Sekunden unsichtbar.

   latin-ext wird nur geladen, wenn ein Zeichen daraus tatsächlich vorkommt
   (etwa in polnischen oder tschechischen Namen). Für die derzeitigen Inhalte
   genügt latin — die 83 KB werden im Regelfall nie übertragen. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  /* Marke */
  --rk-red: #a1120e;
  --rk-red-dark: #7d0d0a;
  --rk-red-hover: #b20600;

  /* Flächen */
  --bg: #ffffff;
  --bg-alt: #efefef;
  --bg-sunken: #e6e6e6;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --tint: #f0e2e2;

  /* Schrift */
  --text: #342a2a;
  --text-2: #404040;
  --text-3: #6f6a6a;
  --text-mute: #8f8c8c;
  --text-on-accent: #ffffff;

  /* Linien */
  --line: #d6d4d4;
  --line-strong: #c0c0c0;

  /* Akzent (kontextabhängig) */
  --accent: var(--rk-red);
  --accent-hover: var(--rk-red-hover);
  --accent-soft: var(--tint);

  /* Hero / dunkle Bänder */
  --band-bg: #241d1d;
  --band-text: #f4f2f2;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(52, 42, 42, .06), 0 2px 8px rgba(52, 42, 42, .05);
  --shadow-md: 0 2px 4px rgba(52, 42, 42, .07), 0 12px 28px rgba(52, 42, 42, .09);
  --shadow-lg: 0 4px 8px rgba(52, 42, 42, .08), 0 24px 56px rgba(52, 42, 42, .13);

  /* Maße */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 10px;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .32s;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
  --bg: #161313;
  --bg-alt: #1d1919;
  --bg-sunken: #100e0e;
  --surface: #221d1d;
  --surface-2: #2a2424;
  --tint: #2e2020;

  --text: #f1eeee;
  --text-2: #d3cccc;
  --text-3: #a8a0a0;
  --text-mute: #8f8888;
  --text-on-accent: #ffffff;

  --line: #362e2e;
  --line-strong: #473d3d;

  --accent: #ef5a52;
  --accent-hover: #ff7a72;
  --accent-soft: #33201f;

  --band-bg: #100e0e;
  --band-text: #f1eeee;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .6);

  color-scheme: dark;
}
}

/* ---------- Reset / Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--text);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; letter-spacing: -.005em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }
.container--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }
.section--band { background: var(--band-bg); color: var(--band-text); }
.section--band h2, .section--band h3, .section--band h4 { color: var(--band-text); }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Typo-Bausteine ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.section--band .eyebrow { color: var(--accent); }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-2);
}
.section--band .lead { color: #cfc7c7; }

.section-head { max-width: 68ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.muted { color: var(--text-mute); }
.small { font-size: .875rem; }

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { flex: none; }

.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); box-shadow: none; }

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .45);
}
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: #241d1d; --btn-bd: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--accent);
}
.link-more::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.link-more:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .header { background: var(--bg); }
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; margin-right: auto; }
.brand__logo { height: 40px; width: auto; }

@media (prefers-color-scheme: dark) {
  :root .brand__logo--light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .brand__logo--dark { display: none; }
}

.nav { display: flex; align-items: center; gap: .25rem; }

.nav__link {
  position: relative;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 500;
  font-size: .9375rem;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--bg-alt); }
.nav__link::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .28rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { width: 19px; height: 19px; }

/* Der Umschalter für helles/dunkles Design ist am 11.08.2026 entfallen.
   Die Website folgt jetzt ausschließlich der Systemeinstellung — geregelt
   über @media (prefers-color-scheme), ohne eine Zeile JavaScript. */

.nav-toggle { display: none; }

.header__cta { font-size: .875rem; padding: .6rem 1.1rem; }

/* Mobile-Navigation
   Achtung: .header hat backdrop-filter und ist damit Containing Block für
   position:fixed-Kinder. Deshalb wird die Schublade relativ zum Header
   positioniert (top:100%) und ihre Höhe explizit gesetzt — ein inset:0
   würde auf Header-Höhe kollabieren. */
.mobile-nav {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gutter) 2.5rem;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__link {
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 600;
}
.mobile-nav__link[aria-current="page"] { color: var(--accent); }
.mobile-nav .btn { margin-top: 1.75rem; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 780px);
  padding-block: clamp(5rem, 12vw, 8rem);
  overflow: hidden;
  background: var(--band-bg);
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease), transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(20, 16, 16, .9) 0%, rgba(20, 16, 16, .68) 45%, rgba(20, 16, 16, .3) 100%),
    linear-gradient(to top, rgba(20, 16, 16, .85) 0%, rgba(20, 16, 16, 0) 55%);
}

.hero__inner { position: relative; max-width: 60ch; }

.hero__title { color: #fff; margin-bottom: 1.1rem; }
.hero__title .accent {
  display: block;
  color: transparent;
  background: linear-gradient(92deg, #ff8a83, var(--rk-red) 70%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__text {
  max-width: 52ch;
  margin-bottom: 2rem;
  color: #dcd5d5;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
}
.hero .eyebrow { color: #ff9a94; }
.hero .eyebrow::before { background: #ff9a94; }

.hero__dots {
  position: absolute;
  left: var(--gutter);
  bottom: 1.75rem;
  display: flex;
  gap: .5rem;
}
.hero__dot {
  width: 30px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.hero__dot.is-active { background: var(--rk-red); width: 48px; }
.hero__dot:hover { background: rgba(255, 255, 255, .65); }

/* Kompakter Seitenkopf für Unterseiten */
.pagehead {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--band-bg);
  color: var(--band-text);
  isolation: isolate;
  overflow: hidden;
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(18, 14, 14, .92), rgba(18, 14, 14, .6));
}
.pagehead h1 { color: #fff; margin-bottom: .5rem; }
.pagehead p { max-width: 62ch; color: #d4cccc; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 0; }
.pagehead .eyebrow { color: #ff9a94; }
.pagehead .eyebrow::before { background: #ff9a94; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: #b3aaaa;
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .55; }
.breadcrumb a { color: #d9d1d1; }
.breadcrumb a:hover { color: #fff; }

/* ---------- Grids ---------- */

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Feste Spaltenzahl, damit vier Karten ein 2x2-Raster bilden und nicht 3+1 */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Eigene Spaltenbreite für die Einsatzfeld-Kacheln: Seit der Schiffbau wieder
   dabei ist, sind es fünf. Mit der Breite von grid--4 stünde die fünfte allein
   in einer zweiten Reihe. Bewusst eine eigene Klasse statt grid--4 zu ändern —
   dort liegen die vier Leistungsfelder, die schmaler würden. */
.grid--sectors { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
@media (max-width: 720px) { .grid--2 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--top { align-items: start; }

/* ---------- Cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--text-2); font-size: .9375rem; margin-bottom: 0; }
.card__num {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg { width: 24px; height: 24px; }
.card ul { margin: 1.1rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--text-2); }
.card--link:hover h3 { color: var(--accent); }

.card--pillar {
  position: relative;
  padding-top: clamp(1.75rem, 2.6vw, 2.25rem);
  overflow: hidden;
}
.card--pillar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.card--pillar:hover::before { transform: scaleX(1); }

/* Karte als Link (Einsatzfelder auf der Projektseite) */
.card--link { color: inherit; }
.card--link:hover { color: inherit; }
.card--link:hover h3 { color: var(--accent); }

.card--sector .card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
}
.card__count {
  padding: .22rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-mute);
}
.card--sector .link-more { margin-left: auto; }

/* Projektkarten */
.project {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sunken);
}
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.project:hover .project__media img { transform: scale(1.05); }
.project__tag {
  position: absolute;
  top: .85rem; left: .85rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(20, 16, 16, .78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project__body { padding: clamp(1.25rem, 2vw, 1.65rem); }
.project__body h3 { font-size: 1.1875rem; margin-bottom: .45rem; }
.project__body p { font-size: .9375rem; color: var(--text-2); margin-bottom: 0; }
.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--text-mute);
}
.project__note {
  display: inline-block;
  margin-top: .9rem;
  font-size: .75rem;
  color: var(--text-mute);
  font-style: italic;
}

/* Projektkarte als Link zur Detailseite */
.project--link { color: inherit; }
.project--link:hover { color: inherit; }
.project--link:hover h3 { color: var(--accent); }
.project--link .project__body { display: flex; flex-direction: column; flex: 1; }

.project__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
}
.project__more::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.project--link:hover .project__more::after { transform: translateX(4px); }

/* Großes Bild auf der Projekt-Detailseite */
.project-figure { margin: 0 0 2rem; }
.project-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.project-figure figcaption {
  margin-top: .6rem;
  font-size: .75rem;
  font-style: italic;
  color: var(--text-mute);
}

/* Sektor-Tiles */
.sector {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  color: #fff;
  /* Grundfarbe für Einsatzfelder ohne hinterlegtes Bild — ohne sie stünde
     weiße Schrift auf hellem Grund und wäre unlesbar. */
  background-color: #2a2222;
}
.sector img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(16, 13, 13, .88) 0%, rgba(16, 13, 13, .25) 65%, rgba(16, 13, 13, .1) 100%);
}
.sector:hover img { transform: scale(1.06); }
.sector h3 { color: #fff; margin: 0 0 .3rem; font-size: 1.25rem; }
.sector p { margin: 0; font-size: .875rem; color: #d9d1d1; }

/* ---------- Karussell ---------- */

/* Ohne JavaScript bleibt die Spur horizontal scrollbar — der Inhalt ist also
   in jedem Fall erreichbar. */
.carousel { position: relative; }

.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Platz für den Schatten der angehobenen Karte */
  margin: -.5rem;
  padding: .5rem;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.carousel__slide {
  flex: 0 0 calc((100% - 2 * clamp(1.25rem, 2.5vw, 2rem)) / 3);
  scroll-snap-align: start;
  display: flex;
}
.carousel__slide > * { width: 100%; }

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.carousel__dots {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-right: auto;
}
.carousel__dot {
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.carousel__dot:hover { background: var(--text-mute); }
.carousel__dot.is-active { background: var(--accent); width: 40px; }

.carousel__nav { display: flex; gap: .5rem; }
.carousel__nav .icon-btn svg { width: 17px; height: 17px; }
.carousel__nav .icon-btn[disabled] { opacity: .35; cursor: default; }
.carousel__nav .icon-btn[disabled]:hover {
  border-color: var(--line);
  color: var(--text-2);
  background: transparent;
}

@media (max-width: 1000px) {
  .carousel__slide { flex-basis: calc((100% - clamp(1.25rem, 2.5vw, 2rem)) / 2); }
}
@media (max-width: 680px) {
  .carousel__slide { flex-basis: 100%; }
}

/* ---------- Kennzahlen ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.stat { padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--surface); text-align: center; }
.stat__value {
  display: block;
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.stat__label {
  display: block;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- Logo-Leisten ---------- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}
.logo-strip img {
  height: clamp(34px, 4.5vw, 52px);
  width: auto;
  max-width: 100%;
  flex: none;
  opacity: .85;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.logo-strip a:hover img { opacity: 1; transform: translateY(-2px); }

@media (prefers-color-scheme: dark) {
  :root .logo-strip img.on-light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .logo-strip img.on-dark { display: none; }
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.cert {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  align-items: center;
}
/* Fremdlogos werden nie umgefärbt — sie stehen immer auf einer weißen Platte,
   damit sie in beiden Modi originalgetreu und lesbar bleiben.
   Die Platte ist bewusst hoch: die Logos reichen von 5:1 (Zertifizierung Bau)
   bis 2:3 (TOP-100-Trophäe). Bei einer flachen Platte deckelt die Höhe die
   hochformatigen Logos und sie wirken winzig. */
.cert__logo {
  display: grid;
  place-items: center;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  background: #fff;
}
/* Höhe absolut am Bild, nicht als Prozentwert am Container: im Grid löste 100%
   nicht zuverlässig auf und hochformatige Logos sprengten die Platte.
   object-fit skaliert jede Grafik proportional in diesen Kasten. */
.cert__logo img {
  width: 100%;
  height: clamp(96px, 12vw, 118px);
  object-fit: contain;
}
.cert p { font-size: .875rem; color: var(--text-2); margin: 0; }

.badge-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.badge-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  font-size: .9375rem;
  color: var(--text-2);
}
.badge-list svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--accent); }
/* zweispaltig, wenn die Liste allein eine Sektion füllt */
.badge-list--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: .85rem clamp(1.5rem, 3vw, 2.5rem);
}

/* Logo der ausschreibenden Gesellschaft im Kopf einer Stellenanzeige.
   Höhe begrenzt, Breite frei — die fünf Logos haben sehr verschiedene
   Seitenverhältnisse, eine feste Breite verzerrte sie. */
.job-detail__logo {
  height: auto;
  width: auto;
  max-height: 34px;
  max-width: min(100%, 170px);
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root .job-detail__logo.on-light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .job-detail__logo.on-dark { display: none; }
}

/* Logo einer Gesellschaft im Seitenkopf ihres Profils */
.profile-logo {
  height: auto;
  width: auto;
  max-height: 46px;
  max-width: min(100%, 260px);
  margin-bottom: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root .profile-logo.on-light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .profile-logo.on-dark { display: none; }
}

/* ---------- Standorte ---------- */

.locations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.locations__map { display: flex; justify-content: center; }

.map-figure {
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 0;
}
.map-figure img { max-height: 620px; width: auto; }

@media (prefers-color-scheme: dark) {
  :root .map-figure img { filter: brightness(1.12) saturate(1.05); }
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 2px solid rgba(20, 12, 12, .55);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.map-pin::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.map-pin:hover, .map-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.4);
  background: #241d1d;
  border-color: #fff;
}
.map-pin:hover::after, .map-pin:focus-visible::after { opacity: 1; }
.map-pin.is-active {
  background: #241d1d;
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .3);
}
.map-pin.is-active::after { opacity: 1; background: #241d1d; color: #fff; }

.loc-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.loc-list li { margin: 0; }

.loc {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.loc:hover { border-color: var(--accent); transform: translateX(3px); }
.loc[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.loc__city { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .9375rem; }
.loc__role { font-size: .8125rem; color: var(--text-mute); font-weight: 500; }
.loc__pin { width: 18px; height: 18px; color: var(--accent); flex: none; }
.loc__chev { width: 16px; height: 16px; color: var(--text-mute); transition: transform .25s var(--ease); }
.loc[aria-expanded="true"] .loc__chev { transform: rotate(180deg); color: var(--accent); }

.loc-panel {
  display: none;
  padding: 1.1rem 1.15rem 1.35rem 3.05rem;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-2);
  font-size: .9375rem;
}
.loc-panel.is-open { display: block; }
.loc-panel address { font-style: normal; color: var(--text-2); margin-bottom: .75rem; }
.loc-panel .loc-contact { display: grid; gap: .3rem; }
.loc-panel .loc-contact a { font-weight: 500; }
.loc-panel .loc-companies {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .9rem; padding: 0; list-style: none;
}
.loc-panel .loc-companies li {
  margin: 0;
  padding: .22rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-3);
}

/* ---------- Team / Personen ---------- */

/* 260px, damit auch lange Mailadressen ohne Umbruch mitten im Wort passen */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Kein align-items: start — sonst ist jede Karte nur so hoch wie ihr
     eigener Inhalt, und eine zweizeilige Funktionsbezeichnung lässt die
     Karte aus der Reihe fallen. Mit dem Standardwert stretch sind alle
     Karten einer Zeile gleich hoch. */
}

/* Bleibt nur eine einzelne Karte in der Reihe (derzeit PSM Ingenieure), würde
   auto-fit sie über die ganze Breite ziehen — Foto und Kasten wirken dann
   aufgeblasen. Deshalb hier eine feste Höchstbreite statt 1fr. */
.team--einzeln {
  grid-template-columns: minmax(260px, 340px);
}

.member {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.member:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* 3:2 entspricht dem Seitenverhältnis der Originalaufnahmen — kein Beschnitt */
.member__photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-sunken);
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Der Textbereich füllt die Karte aus, damit bei gleich hohen Karten der
   Kontaktblock unten bündig steht statt in der Luft zu hängen. */
.member__body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.member__name { font-weight: 700; color: var(--text); font-size: 1rem; letter-spacing: -.01em; }
.member__role {
  margin-top: .15rem;
  font-size: .8125rem;
  color: var(--text-mute);
  min-height: 2.4em;
}
.member__contact {
  display: grid;
  gap: .3rem;
  /* auto schiebt den Block an den unteren Rand der Karte. */
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.member__contact a {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.member__contact a:hover { color: var(--accent); }
.member__contact svg { flex: none; width: 14px; height: 14px; color: var(--accent); }

/* Übersichtskarte einer Gesellschaft (verlinkt auf deren eigene Seite) */
.company-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.company-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
/* align-self verhindert, dass der Flex-Container das Logo auf volle Kartenbreite
   zieht — zusammen mit der festen Höhe wäre es sonst verzerrt. */
.company-card__logo {
  align-self: flex-start;
  height: 38px;
  width: auto;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root .company-card__logo.on-light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .company-card__logo.on-dark { display: none; }
}
.company-card p { font-size: .9375rem; color: var(--text-2); }
.company-card__seat {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.company-card__seat svg { width: 14px; height: 14px; color: var(--accent); }
.company-card .link-more { margin-top: auto; padding-top: 1.25rem; }

/* Kompakter Datenkasten (Sitz, Adresse, Schwerpunkt) */
.factbox {
  margin: 0;
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.factbox > div + div { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.factbox dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.factbox dd { margin: .3rem 0 0; font-size: .9375rem; color: var(--text); }
.factbox dd a { overflow-wrap: anywhere; }

/* ---------- Karriere ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
/* Zweite Filterzeile (Aufgabenbereiche): rückt optisch etwas zurück, damit
   die Regionen als erste Ebene erkennbar bleiben. */
.filters--second {
  margin-top: -1.4rem;
  font-size: .9375rem;
}
.filters--second .filter { padding-block: .45rem; }
.filter {
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.jobs { display: grid; gap: .75rem; }

.job {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.job:hover {
  border-left-color: var(--accent);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}
.job__title { font-weight: 700; color: var(--text); font-size: 1rem; margin-bottom: .35rem; }
.job__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .8125rem; color: var(--text-mute); }
.job__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.job__meta svg { width: 14px; height: 14px; }
.job__region {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.job[hidden] { display: none; }

/* Die ganze Karte ist anklickbar: Der Link im Titel legt sich über die
   gesamte Fläche. So bleibt es ein einziger Link — für die Sprachausgabe,
   für „in neuem Tab öffnen" und für Suchmaschinen. */
.job { position: relative; }
.job__link {
  color: inherit;
  text-decoration: none;
}
.job__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.job:hover .job__link { color: var(--accent); }
/* Tastaturbedienung: Der Rahmen muss um die Karte liegen, nicht um den
   Text — sonst sieht man beim Durchtabben nicht, was gemeint ist. */
.job__link:focus-visible { outline: none; }
.job__link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.job__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.job:hover .job__cta { border-color: var(--accent); color: var(--accent); }

@media (max-width: 560px) {
  .job { grid-template-columns: 1fr; gap: .9rem; }
  .job__cta { justify-self: start; }
}

.jobs-empty { padding: 2rem; text-align: center; color: var(--text-mute); }

/* ---------- Fenster (Stellenanzeige) ---------- */

.modal {
  width: min(760px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(88vh, 900px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--text);
}
/* dvh berücksichtigt die ein- und ausfahrende Adressleiste auf dem Handy.
   Steht bewusst nach der vh-Regel, damit ältere Browser bei vh bleiben. */
@supports (max-height: 88dvh) {
  .modal { max-height: min(88dvh, 900px); }
}
.modal::backdrop {
  background: rgba(12, 9, 9, .62);
}
.modal__box {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1rem;
  border-bottom: 1px solid var(--line);
}
.modal__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.25;
}
.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.modal__close svg { width: 18px; height: 18px; }
.modal__close:hover { border-color: var(--accent); color: var(--accent); }
.modal__body {
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem) 1.35rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
}

/* Hintergrund festhalten, solange das Fenster offen ist — sonst scrollt
   auf dem Handy die Seite unter dem Fenster weg. */
html.has-modal { overflow: hidden; }

@media not all and (prefers-reduced-motion: reduce) {
  .modal[open] { animation: modal-auf .22s var(--ease); }
  .modal[open]::backdrop { animation: modal-schleier .22s var(--ease); }
}
@keyframes modal-auf {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-schleier {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Inhalt einer Stellenanzeige ---------- */

/* minmax bewusst knapp: Auf dem Handy bleiben so zwei Spalten stehen. Bei
   150 px kippte die Liste dort auf eine Spalte und schob den eigentlichen
   Anzeigentext aus dem Bild. */
.job-detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: .9rem 1.25rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.job-detail__facts dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .3rem;
}
.job-detail__facts dd { margin: 0; font-weight: 600; }
.job-detail__intro p { margin: 0 0 1rem; }
.job-detail__h {
  margin: 1.75rem 0 .75rem;
  font-size: 1.0625rem;
}
.job-detail__h:first-child { margin-top: 0; }
.job-detail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.job-detail__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-2);
}
.job-detail__list li::before {
  content: '';
  position: absolute;
  left: .3rem;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.job-detail__todo {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-mute);
  font-size: .9375rem;
}
/* ---------- Galerie-Kachel: großes Bild, kein „Projekt ansehen" ---------- */

/* 16:10 wird zu 4:3 — die Kachel wird höher, und weil im Galerie-Raster nur
   zwei statt drei nebeneinander stehen, auch breiter. Das Bild ist hier der
   Inhalt, nicht die Beigabe. */
.project--gallery .project__media { aspect-ratio: 4 / 3; }
.project--gallery .project__body { padding: 1rem clamp(1.25rem, 2vw, 1.65rem) 1.25rem; }
.project--gallery .project__body h3 { margin-bottom: 0; font-size: 1.25rem; }
/* Seit die Schiffbau-Kacheln eine Beschriftung tragen, braucht die
   Überschrift wieder Luft nach unten — aber nur dann. */
.project--gallery .project__body h3 + p { margin-top: .45rem; }

/* ---------- Infokasten mit weiterführenden Verweisen (Feederdock) ---------- */

.infobox {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.infobox .eyebrow { margin-bottom: .35rem; }
.infobox__title { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.infobox__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
/* Ab zwei Spalten, sobald Platz ist — die Einträge sind kurz. */
@media (min-width: 720px) {
  .infobox__list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2rem; }
}
.infobox__item { padding-top: 1rem; border-top: 1px solid var(--line); }
.infobox__meta {
  margin: 0 0 .3rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.infobox__text { margin: 0 0 .6rem; color: var(--text-2); }

.job-detail__prose p { margin: 0 0 1rem; color: var(--text-2); }
.job-detail__prose p:last-child { margin-bottom: 0; }

/* Ansprechpartner und Schaltflächen sitzen unter dem Anzeigentext — im
   Fenster wie auf der eigenen Seite, weil beide denselben Rumpf ausgeben. */
.job-detail__contact {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.job-detail__contact .job-detail__h { margin-top: 0; }
/* Porträt und Angaben stehen nebeneinander; ohne Bild rückt der Text
   einfach nach links, es bleibt kein Loch. */
.job-detail__contact-person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.job-detail__contact-foto {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  /* Porträts sind oben angeschnitten schlecht — der Kopf sitzt im oberen
     Drittel, deshalb der Ausschnitt weiter oben statt mittig. */
  object-position: 50% 25%;
  border: 1px solid var(--line);
}
.job-detail__contact-name { margin: 0; font-weight: 600; }
.job-detail__contact-role,
.job-detail__contact-lines {
  margin: .2rem 0 0;
  color: var(--text-2);
  font-size: .9375rem;
}
/* Adresse und Rufnummer stehen nebeneinander, brechen aber auf schmalen
   Bildschirmen sauber um statt die Zeile zu sprengen. */
.job-detail__contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
}
.job-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.25rem;
}

.benefit {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  /* Zwei getrennte Bewegungen: Der Scroll-Auftritt (.reveal) läuft über
     transform/opacity mit gestaffeltem Versatz (--d), das Anheben beim
     Überfahren über die eigenständige Eigenschaft translate ohne Versatz.
     Vorher kollidierten beide: .reveal.is-in setzte transform:none und hob
     damit das Hover-Anheben wieder auf. */
  --d: 0s;
}
/* Eigener Selektor mit höherer Spezifität, weil die allgemeine .reveal-Regel
   weiter unten in der Datei sonst die transition-Kurzform überschreibt. */
.grid > .benefit,
.grid > .benefit.reveal {
  transition: border-color .3s var(--ease), translate .3s var(--ease),
              box-shadow .3s var(--ease), opacity .7s var(--ease),
              transform .7s var(--ease);
  transition-delay: 0s, 0s, 0s, var(--d), var(--d);
}
/* Roter Akzentstrich, der beim Überfahren von links hereinwächst. Liegt als
   Pseudo-Element in der Karte, damit die Kartenhöhe im Raster gleich bleibt. */
.benefit::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.benefit:hover,
.benefit:focus-within {
  border-color: var(--accent);
  translate: 0 -4px;
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .35);
}
.benefit:hover::before,
.benefit:focus-within::before { transform: scaleX(1); }
.benefit h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.benefit p { font-size: .9375rem; margin-bottom: 0; }

/* Icon auf einer weichen Kreisfläche; beim Überfahren hebt es sich leicht
   und die Fläche färbt sich. Nur transform und Farbe — beides läuft ohne
   Layout-Neuberechnung und ruckelt daher auch auf dem Handy nicht. */
.benefit__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              transform .35s var(--ease);
}
.benefit__icon svg {
  width: 24px;
  height: 24px;
  transition: transform .35s var(--ease);
}
.benefit:hover .benefit__icon,
.benefit:focus-within .benefit__icon {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.benefit:hover .benefit__icon svg,
.benefit:focus-within .benefit__icon svg { transform: scale(1.08); }

/* Gestaffelter Auftritt beim Scrollen: Die Karten kommen nacheinander,
   nicht als Block. Nutzt den vorhandenen .reveal-Mechanismus (site.js),
   nur der Versatz --d kommt hinzu. Ab der siebten Karte kein weiterer. */
.grid > .benefit:nth-child(2) { --d: .08s; }
.grid > .benefit:nth-child(3) { --d: .16s; }
.grid > .benefit:nth-child(4) { --d: .24s; }
.grid > .benefit:nth-child(5) { --d: .32s; }
.grid > .benefit:nth-child(6) { --d: .40s; }

/* ---------- Formular ---------- */

.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
/* min-width: 0 ist hier entscheidend: Rasterfelder sind standardmäßig
   mindestens so breit wie ihr breitester Inhalt. Bei einem Auswahlfeld ist
   das der längste Eintrag der Liste — und der schob das Feld bisher über die
   Spalte hinaus und unter das Nachbarfeld. */
.field { display: grid; gap: .4rem; min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }
.field select { width: 100%; }

/* Kennzeichnung optionaler Felder — bewusst unauffälliger als die
   Pflichtfeld-Markierung, damit der Blick auf den Pflichtfeldern bleibt. */
.opt { font-weight: 400; color: var(--text-mute); }
.field label { font-size: .8125rem; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: .75rem; color: var(--text-mute); }
.field-file input[type="file"] { padding: .6rem; font-size: .8125rem; }

/* ---------- Ablagebereich für Dateien (Drag & Drop) ----------
   Ohne JavaScript: nur das native Dateifeld, Text und Liste bleiben
   unsichtbar. Mit JavaScript (Klasse .has-js auf dem Bereich) wird das
   Feld visuell versteckt, bleibt aber im Tab-Fokus und öffnet per Enter
   oder Leertaste den Dateidialog — der Rahmen zeigt den Fokus an. */
.dropzone { position: relative; display: grid; gap: .5rem; }
.dropzone__text, .dropzone__files { display: none; }
.dropzone.has-js {
  padding: 1.1rem 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dropzone.has-js input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone.has-js:hover,
.dropzone.has-js.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-js:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dropzone.has-js.is-over { border-style: solid; }
.dropzone.has-js .dropzone__text {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: var(--text-mute);
  pointer-events: none;
}
.dropzone.has-js .dropzone__text svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.dropzone.has-js .dropzone__text strong { color: var(--text); font-weight: 600; }
.dropzone__link { color: var(--accent); text-decoration: underline; }
.dropzone.has-js .dropzone__files {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.dropzone__files:empty { display: none !important; }
.dropzone__files li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}
.dropzone__files li.is-bad { color: var(--accent); }
.dropzone__files .dropzone__size { color: var(--text-mute); white-space: nowrap; }
.field-check { display: flex; align-items: flex-start; gap: .7rem; font-size: .875rem; color: var(--text-2); }
.field-check input { margin-top: .25rem; accent-color: var(--accent); width: 17px; height: 17px; }
.form__note { font-size: .8125rem; color: var(--text-mute); }

/* ---------- CTA-Band ---------- */

.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--band-bg);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(16, 13, 13, .93), rgba(16, 13, 13, .66));
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 58ch; color: #d4cccc; }
.cta-band .btn--primary { --btn-bg: var(--rk-red); --btn-bd: var(--rk-red); }
.cta-band .btn--primary:hover { --btn-bg: var(--rk-red-hover); --btn-bd: var(--rk-red-hover); }

/* ---------- Zitat ---------- */

.quote {
  position: relative;
  max-width: 60ch;
  margin-inline: auto;
  padding-top: 2.5rem;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.015em;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 3px;
  background: var(--accent);
}

/* ---------- Footer ---------- */

.footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}

@media (prefers-color-scheme: dark) {
  :root .footer { background: #0e0c0c; }
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__logo { height: 42px; width: auto; margin-bottom: 1.25rem; }

@media (prefers-color-scheme: dark) {
  :root .footer__logo.on-light { display: none; }
}

@media not all and (prefers-color-scheme: dark) {
  :root .footer__logo.on-dark { display: none; }
}
.footer__about { color: var(--text-2); max-width: 40ch; }
.footer h4 {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.footer ul li { margin: 0; }
.footer ul a { color: var(--text-2); }
.footer ul a:hover { color: var(--accent); }
.footer address { font-style: normal; color: var(--text-2); display: grid; gap: .3rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--text-mute);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.footer__bottom a { color: var(--text-mute); }
.footer__bottom a:hover { color: var(--accent); }

/* ---------- Cookie-Hinweis ---------- */

.cookie {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 120;
  max-width: 460px;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  transform: translateY(140%);
  transition: transform .45s var(--ease);
}
.cookie.is-visible { transform: none; }
.cookie h4 { font-size: .9375rem; letter-spacing: normal; text-transform: none; color: var(--text); margin-bottom: .5rem; }
.cookie p { color: var(--text-2); margin-bottom: 1.1rem; }
.cookie .btn-row .btn { padding: .6rem 1.1rem; font-size: .875rem; }

/* ---------- Scroll-Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Rechtstexte ---------- */

.legal { max-width: 78ch; }
.legal h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--text-2); }

/* Tabelle in Rechtstexten (Registerangaben der Gesellschaften) */
.legal-table-wrap { overflow-x: auto; margin: 1.25rem 0 2rem; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.legal-table th,
.legal-table td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-table th {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.legal-table td:first-child { font-weight: 600; color: var(--text); min-width: 220px; }
.legal-table td { color: var(--text-2); }
.legal-table code { font-size: .95em; white-space: nowrap; }

/* Zugang zur Verwaltung — bewusst unauffällig am Ende des Impressums */
.legal-login {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.legal-login a { color: var(--text-mute); }
.legal-login a:hover { color: var(--accent); }

.notice {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .9375rem;
  color: var(--text-2);
}

.notice p        { margin: .5rem 0 0; }
.notice ul       { margin: .5rem 0 0; padding-left: 1.2rem; }
.notice li       { margin: .25rem 0; }
.notice strong   { color: var(--text-1); }

/* Rückmeldungen zum Bewerbungsformular.
   Die Farbe ist NICHT das einzige Unterscheidungsmerkmal — die Meldungen
   beginnen zusätzlich mit einem eindeutigen Text und tragen role="status"
   bzw. role="alert". Sonst wäre der Unterschied für Menschen mit
   Rot-Grün-Schwäche und für Sprachausgaben nicht wahrnehmbar. */
.notice--ok {
  border-left-color: #1c7c46;
  background: var(--surface-2);
}

@media (prefers-color-scheme: dark) {
  :root .notice--ok { border-left-color: #4ec27f; }
}

.notice--error {
  border-left-color: var(--accent);
  background: var(--tint);
}

/* Falle für automatisierte Einsendungen: aus dem Sichtfeld geschoben statt
   display:none — manche Bots überspringen ausgeblendete Felder gezielt.
   aria-hidden und tabindex="-1" halten es von Sprachausgabe und Tastatur fern. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Utilities ---------- */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .locations { grid-template-columns: 1fr; }
  .locations__map { order: 2; }
  .locations__map img { max-height: 480px; }
}

@media (max-width: 960px) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: inline-grid; }
}

@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .brand__logo { height: 32px; }
  .job { grid-template-columns: 1fr; }
  .job .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom nav { margin-left: 0; }
  .cookie { max-width: none; }
  .hero { min-height: 78vh; }
  .loc-panel { padding-left: 1.15rem; }
  .btn-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .benefit { --d: 0s; }
  .benefit:hover, .benefit:focus-within { translate: none; }
  .benefit__icon, .benefit__icon svg { transform: none !important; }
  .hero__slide { transform: none; }
}

@media print {
  .header, .mobile-nav, .cookie, .hero__dots, .theme-toggle, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}