/* SOLIDPLAN Design-Tokens + Komponenten-Styles.
   Quelle: Original-JSX der statischen Site (website/assets/js) — 1:1 portiert.
   Verwendung in Bricks: Elemente tragen nur CSS-Klassen, Styling liegt hier. */

:root {
  /* Navy (Markenanker) */
  --sp-navy-900: #00061F;
  --sp-navy-800: #000726;
  --sp-navy-700: #000933;
  --sp-navy-600: #0A1A54;
  --sp-navy-500: #1F3078;

  /* Akzent */
  --sp-cyan-500: #13B1FF;
  --sp-cyan-400: #0EB5FF;
  --sp-blue-500: #3E93FF;
  /* Textvariante des Markenblaus fuer HELLE Hintergruende (seit 2026-08-12).
     blue-500 erreicht auf Paper nur 2,94:1 und auf Bone 2,70:1, WCAG AA
     verlangt fuer Fliesstext 4,5:1. blue-600 liegt bei 5,52:1 bzw. 5,06:1.
     REGEL: blue-500 weiter fuer Flaechen, Rahmen, Icons und alles auf Navy -
     blue-600 ausschliesslich fuer TEXT auf hellem Grund. */
  --sp-blue-600: #1F63C4;
  --sp-gradient-brand: linear-gradient(135deg, #13B1FF, #3E93FF);

  /* Neutral */
  --sp-paper: #FAFAF7;
  --sp-bone: #F2F0EA;
  --sp-mist: #E6E4DE;
  --sp-stone: #BDBBB4;
  --sp-graphite: #5E5E5B;
  --sp-ink: #2B2B2A;

  /* Semantisch */
  --bg-page: var(--sp-paper);
  --bg-alt: var(--sp-bone);
  --fg-1: var(--sp-ink);
  --fg-2: var(--sp-graphite);
  /* Sekundaertext. War #8A8984 - das erfuellte WCAG AA als Fliesstext
     nirgends (3,50:1 auf Weiss / 3,35 auf Papier / 3,08 auf Bone, noetig
     sind 4,5). Zwischenschritt #6E6D69 (5,18 / 4,95 / 4,55) bestand zwar,
     hatte auf Bone aber nur 0,05 Reserve - eine minimal dunklere --bg-alt
     haette ihn sofort wieder durchfallen lassen.
     Seit 2026-08-12 #666561 = 5,83 / 5,58 / 5,12, damit ist Luft drin.
     Dunkler ginge nur noch #5E5E5B - das ist aber bereits --fg-2 und
     wuerde die Abstufung zwischen fg-2 und fg-3 einebnen. */
  --fg-3: #666561;
  --border-soft: var(--sp-mist);

  /* Typografie */
  --font-display: "Saira Semi Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  background-color: var(--bg-page);
}

h1, h2, h3, h4, h5, h6 { color: inherit; }

/* ---------- Wiederkehrende Muster ---------- */

/* Eyebrow: Inter 12/600, 0.22em, mit 48×2px Gradient-Linie davor (Original) */
.sp-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-blue-600);
  margin-bottom: 24px;
}
.sp-eyebrow::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--sp-gradient-brand);
  flex-shrink: 0;
}
.sp-eyebrow--cyan { color: var(--sp-cyan-400); }
.sp-eyebrow--center { justify-content: center; }
.sp-eyebrow--center::before { width: 32px; }
.sp-eyebrow--center::after {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--sp-gradient-brand);
  flex-shrink: 0;
}

/* Headlines: Saira 300, kursiver 500-Akzent */
.sp-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.sp-h2--sm { font-size: clamp(32px, 3.4vw, 48px); }
.sp-it { font-style: italic; font-weight: 500; }

.sp-gradient-text {
  background: var(--sp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Sektions-Kopf: Headline links, Text rechts (Original: grid 1fr 1fr, align end) */
.sp-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.sp-head-sub { font-size: 17px; line-height: 1.7; color: var(--fg-3); margin: 0; align-self: end; }
.sp-section--dark .sp-head-sub { color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.75; }

/* Buttons: Inter 12/600, 0.18em, Radius 2px, Arrow via Mask (currentColor) */
a.brxe-button.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 2px;
  border: none;
  line-height: 1.2;
  transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
a.brxe-button.sp-btn--sm { font-size: 11px; padding: 14px 24px; }
a.brxe-button.sp-btn--lg { padding: 18px 32px; }

.sp-btn--arrow::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') no-repeat center / contain;
}

a.brxe-button.sp-btn--white { background: #FFFFFF; color: var(--sp-navy-700); }
a.brxe-button.sp-btn--white:hover { background: var(--sp-cyan-400); color: var(--sp-navy-700); }

a.brxe-button.sp-btn--ghost-light { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.4); }
a.brxe-button.sp-btn--ghost-light:hover { border-color: var(--sp-cyan-400); color: var(--sp-cyan-400); }

a.brxe-button.sp-btn--navy { background: var(--sp-navy-700); color: #FFFFFF; }
a.brxe-button.sp-btn--navy:hover { background: var(--sp-navy-600); }

/* Unterstrichener Text-Link (Über uns) */
a.sp-link-underline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-navy-700);
  border-bottom: 2px solid var(--sp-blue-500);
  padding-bottom: 4px;
  transition: color 200ms var(--ease-standard);
}
a.sp-link-underline:hover { color: var(--sp-blue-600); }

/* Mono-Link (Initiativbewerbung) */
a.sp-link-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-decoration-color: var(--sp-blue-500);
  text-underline-offset: 4px;
}
a.sp-link-mono:hover { color: var(--sp-blue-600); }

/* Technisches Linienraster (Original: SVG-Linien im 50px-Abstand).
   Stand 2026-08-21: nur noch ZWEI Flaechen tragen es — die Sektionen
   „Unsere Projekte" (sp001a) und „Perfekt abgestimmt" (sp0035) auf der
   Startseite, beide mit `--v`. Entfernt wurde es am Startseiten-Hero, an den
   fünf Hero-Panels der Unterseiten, am Stellen-Hero, im Footer und auf der
   Anmeldeseite (dort lag eine eigene Kopie in login.css). Grund: die Linien
   liefen dort durch grosse Schrift bzw. ueber das Hero-Foto, das mit seinem
   blauen Drahtgitter dieselbe Aussage schon traegt — am gerenderten Bild
   verglichen, nicht nur gerechnet.
   Der zweiachsige Verlauf in `.sp-raster::before` wird dadurch NICHT mehr
   gerendert (beide verbliebenen Flaechen ueberschreiben ihn mit `--v`). Er
   bleibt stehen, damit ein Zurueckbauen ohne Neuschreiben moeglich ist. */
.sp-raster { position: relative; }
.sp-raster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 50px);
  pointer-events: none;
}
.sp-raster--v::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 50px);
}


/* Bricks-Container defaulten auf align-items:flex-start → Kinder schrumpfen
   auf Inhaltsbreite. Stretch stellt Block-Verhalten her (Gewerke-Head
   überschreibt weiter unten gezielt mit center). */
.sp-container { max-width: 1320px; margin: 0 auto; width: 100%; position: relative; z-index: 1; align-items: stretch; }
.sp-section { padding: 120px 40px; }
.sp-center { text-align: center; margin-top: 56px; }

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

.sp-hero {
  position: relative;
  /* Volle Viewport-Höhe (User-Entscheid 2026-08-09, nach Entfall der
     Stats-Zeile); svh = stabile Höhe bei mobiler Browser-UI */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sp-navy-800);
  /* Hero-Bild statt Video (User-Entscheid 2026-08-09, Attachment #174 =
     Hologramm-Motiv der Altseite); 0.50-Navy-Layer (User-Feedback:
     0.30 war zu hell) — Textkontrast links liefert zusätzlich das
     ::after-Gradient (0.92)
     Die Bild-URL kommt seit dem Umzug ins Child-Theme (2026-08-12) aus der
     Variablen --sp-hero-bild, die solidplan-design.php per Inline-Style aus
     wp_get_attachment_url(174) setzt. Vorher stand hier eine RELATIVE URL
     (../2026/08/…), die nur funktionierte, solange die Datei in uploads/ lag —
     sie wäre beim Umzug gebrochen. Der Umweg über PHP hat zusätzlich den
     Vorteil, dass hier keine absolute localhost-URL steht, die beim
     Domainwechsel mitgezogen werden müsste. */
  background-image: linear-gradient(rgba(0, 9, 51, 0.50), rgba(0, 9, 51, 0.50)), var(--sp-hero-bild, none);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  /* Bricks-Section ist flex-COLUMN → vertikale Mitte via justify-content
     (align-items wirkt dort nur horizontal; Gotcha 7) */
  justify-content: center;
  overflow: hidden;
  padding: 0 40px;
}

/* Gradient-Overlay über dem Bild (Original 115deg) */
.sp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(0,9,51,0.92) 0%, rgba(0,9,51,0.65) 45%, rgba(0,9,51,0.30) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Raster ÜBER dem Overlay */
.sp-hero::before { z-index: 1; }

.sp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  /* symmetrisch, damit align-items:center echt mittig sitzt (fixer
     Header wird durch 120px Puffer oben/unten nie unterlaufen) */
  padding: 120px 0;
  align-items: stretch;
}

.sp-hero .sp-eyebrow { color: var(--sp-cyan-400); margin-bottom: 36px; }

.sp-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  max-width: 1100px;
}
.sp-hero-title .sp-gradient-text { font-weight: 500; font-style: italic; }

.sp-hero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 24px;
  max-width: 720px;
}
.sp-hero-sub .sp-white { color: #FFFFFF; }

.sp-hero-cta { display: flex; gap: 16px; margin-top: 48px; flex-wrap: wrap; }

/* Stats-Strip im Hero (Original: Trennlinien, Gradient-Zahlen) */
.sp-hero-stats {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 32px;
  max-width: 980px;
}
.sp-stat { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.sp-stat:first-child { padding-left: 0; border-left: none; }
.sp-stat-zahl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  background: var(--sp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-stat-einheit { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #FFFFFF; margin-top: 8px; }
.sp-stat-text { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }

/* ---------- Pillars ---------- */

.sp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.sp-pillar {
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  padding: 36px 32px 32px;
  position: relative;
  transition: all 220ms var(--ease-standard);
}
.sp-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 64px;
  background: var(--sp-gradient-brand);
}
.sp-pillar:hover {
  border-color: var(--sp-blue-500);
  box-shadow: 0 12px 32px rgba(15, 27, 40, 0.08);
  transform: translateY(-2px);
}

.sp-pillar-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.sp-pillar-top .sp-icon { width: 32px; height: 32px; color: var(--sp-blue-500); }
.sp-pillar-nr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; }

.sp-pillar-eyebrow { font-family: var(--font-display); font-weight: 300; font-size: 22px; color: var(--sp-graphite); font-style: italic; line-height: 1; }
.sp-pillar-title { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--fg-1); margin: 4px 0 18px; letter-spacing: -0.01em; line-height: 1.05; }
.sp-pillar-body { font-size: 15px; line-height: 1.7; color: var(--fg-2); margin: 0; }

/* ---------- Über uns ---------- */

.sp-about { padding: 64px 40px 120px; }

.sp-about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }

.sp-about-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sp-about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sp-about-badge {
  position: absolute;
  bottom: 24px; left: 24px;
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 20px 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  z-index: 1;
}
.sp-about-badge-zahl {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  background: var(--sp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-about-badge-titel { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.sp-about-badge-sub { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }

/* H2 → Fließtext: 24px Luft (User-Wunsch 2026-08-09; vorher 0) */
.sp-about-grid .sp-h2 { margin-bottom: 24px; }
.sp-about-text { font-size: 16px; line-height: 1.75; color: var(--fg-2); margin: 0 0 16px; }
.sp-cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Projekte (dunkel, Query-Loop) ---------- */

.sp-section--dark { background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-section--dark .sp-eyebrow { color: var(--sp-cyan-400); }

/* FLEXBOX statt Grid - bewusst, nicht aus Stilgruenden.
   Als Grid wurde die Zeilenhoehe aus dem Inhalt abgeleitet, und dabei zaehlen
   prozentuale Breiten und Innenabstaende als null. Die Zeile bekam deshalb
   die Eigengroesse des Bildes (300px aus dem srcset) statt der 335px im
   Layout - die Karten ragten unterhalb 991px in die naechste Sektion.
   Flexbox berechnet die Zeilenhoehe aus den TATSAECHLICHEN Hoehen der
   Elemente; `align-items: flex-start` verhindert zusaetzlich, dass die Karten
   auf eine fremde Hoehe gestreckt werden. Gefunden 2026-08-13. */
.sp-projects { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.sp-projects > * { flex: 0 0 calc((100% - 32px) / 3); }

.sp-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
/* Bild IM TEXTFLUSS - gibt der Karte ihre Hoehe. Begruendung s. .sp-tile img. */
.sp-card .sp-card-img,
.sp-card .sp-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard);
}
.sp-card:hover .sp-card-img img { transform: scale(1.05); }
.sp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,9,51,0.1) 30%, rgba(0,9,51,0.85) 100%);
  transition: background 220ms;
  pointer-events: none;
}
.sp-card:hover::after { background: linear-gradient(180deg, rgba(0,9,51,0.35) 0%, rgba(0,9,51,0.85) 100%); }

.sp-card-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sp-card-cat {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  background: rgba(0, 9, 51, 0.6);
  padding: 5px 10px;
  backdrop-filter: blur(6px);
}
.sp-card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; margin: 0; letter-spacing: -0.005em; color: #FFFFFF; }
.sp-card-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  opacity: 0;
  transform: translateY(8px);
  transition: all 220ms;
}
.sp-card:hover .sp-card-cta { opacity: 1; transform: translateY(0); }

/* ---------- Marktsegmente ---------- */

/* Flexbox statt Grid - gleiche Ursache wie bei .sp-projects, s. dort. */
.sp-tiles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.sp-tiles > * { flex: 0 0 calc((100% - 32px) / 3); }

/* WICHTIG - das Bild steht IM TEXTFLUSS und gibt der Kachel ihre Hoehe.
   Frueher war es `position: absolute` und die Kachel bezog ihre Hoehe aus
   `aspect-ratio`. Das ging schief: Beide Kinder der Kachel (Bild und
   Textblock) waren absolut positioniert, die Kachel hatte also KEINE
   Inhaltshoehe. Weder `aspect-ratio` noch `padding-bottom: 80%` helfen dort,
   denn bei der INTRINSISCHEN Groessenberechnung zaehlen prozentuale
   Innenabstaende als null - die Grid-Zeile bekam Mindesthoehe 0, der
   Container nur die Abstaende (80px = 5 x 16), und die Kacheln ragten
   unterhalb 991px in die naechste Sektion.
   Ein `<img>` ist dagegen ein ERSETZTES Element mit intrinsischen Massen und
   traegt seine Hoehe zur Zeilenberechnung bei. Gleiches Muster wie das
   bereits funktionierende `img.sp-uueber-img`.
   Gefunden 2026-08-13 durch User-Meldung. */
/* `cursor: pointer` ist am 2026-08-21 entfallen (User: „es sieht aus, als
   wuerden die Bilder verlinken, das tun sie aber nicht“). Zusammen mit dem
   Pfeil-Icon, das aus den sechs Kacheln entfernt wurde, versprach die Kachel
   ein Ziel, das es nie gab. Geblieben ist der Bildzoom — er liest sich jetzt
   als Aufforderung zum Verweilen, nicht zum Klicken, weil er den
   Beschreibungstext aufdeckt (s. .sp-tile-text). */
.sp-tile { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--sp-navy-700); }
.sp-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard);
}
.sp-tile:hover img { transform: scale(1.06); }
/* Seit 2026-08-10 3D-Drahtmodelle statt Fotos: die Motive sind selbst schon
   fast schwarz, das alte Foto-Dimming (img opacity .85 + Verlauf ab 30% bis
   .88) hat die Modelle auf halber Kachelhöhe um ~39% abgedunkelt (User:
   „zu dunkel"). Verlauf startet jetzt erst bei 45% und bleibt flacher; im
   Titelband bleibt Weiß bei Kontrast >15:1 — Reserve, falls dort je wieder
   ein helles Foto liegt. */
.sp-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,9,51,0) 45%, rgba(0,9,51,0.55) 100%);
  pointer-events: none;
  transition: background 420ms var(--ease-standard);
}
.sp-tile-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFFFFF;
}
/* UNGENUTZT seit 2026-08-21 — die sechs Icon-SVGs sind aus den Kacheln
   entfernt (User-Wunsch, zusammen mit den Pfeilen). `margin-bottom: auto`
   hielt das Icon oben, als der Container von `space-between` auf `flex-end`
   wechselte; ohne Icon traegt `flex-end` allein. Regel bleibt stehen wie
   .sp-strow-cat, falls je wieder ein Icon kommt. */
.sp-tile-content > .sp-icon { width: 36px; height: 36px; color: var(--sp-cyan-400); margin-bottom: auto; }
.sp-tile-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-tile-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 0; letter-spacing: -0.005em; line-height: 1.1; color: #FFFFFF; }
/* UNGENUTZT seit 2026-08-21 — die sechs Pfeil-Elemente sind aus der Seite
   entfernt. Bleibt stehen wie .sp-strow-cat, falls je wieder eines kommt. */
.sp-tile-bottom .sp-icon--arrow { width: 22px; height: 22px; color: var(--sp-cyan-400); flex-shrink: 0; }

/* Beschreibung, die beim Ueberfahren aufgedeckt wird (User-Wunsch 2026-08-21,
   Vorbild ist die Altseite — dort als Flip-Karte, hier bewusst OHNE Drehung).
   Die Texte stammen woertlich von den Rueckseiten der alten Flip-Karten.
   `max-height` statt `height`, weil die Zeilenzahl je nach Breite schwankt;
   9em traegt auch den laengsten der sechs Texte. `:focus-within` nimmt die
   Tastaturbedienung mit. */
.sp-tile-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 420ms var(--ease-standard),
              opacity 260ms var(--ease-standard),
              transform 420ms var(--ease-standard);
}
.sp-tile:hover .sp-tile-text,
.sp-tile:focus-within .sp-tile-text { max-height: 9em; opacity: 1; transform: none; }
/* Der Verlauf zieht beim Aufdecken nach, sonst stuende der Text auf dem
   hellen Teil des Drahtmodells. */
.sp-tile:hover::after,
.sp-tile:focus-within::after { background: linear-gradient(180deg, rgba(0,9,51,0.10) 0%, rgba(0,9,51,0.86) 100%); }

/* Ohne Zeigergeraet gibt es kein Ueberfahren — dort steht der Text dauerhaft,
   sonst waere er auf Tablet und Telefon unerreichbar. */
@media (hover: none) {
  .sp-tile-text { max-height: none; opacity: 1; transform: none; }
  .sp-tile::after { background: linear-gradient(180deg, rgba(0,9,51,0.10) 0%, rgba(0,9,51,0.86) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tile-text, .sp-tile::after, .sp-tile img { transition: none; }
}

/* ---------- Gewerke (dunkel, 1px-Grid) ---------- */

.sp-section--dark2 { background: var(--sp-navy-800); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-section--dark2::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle at top right, rgba(19, 177, 255, 0.20), transparent 60%);
  pointer-events: none;
}
/* Container ist Bricks-Flex-Column — Zentrierung via align-items, nicht text-align */
.sp-gewerke-head { text-align: center; align-items: center; }
.sp-gewerke-head .sp-eyebrow { display: inline-flex; color: var(--sp-cyan-400); }
.sp-gewerke-head .sp-head-sub { color: rgba(255, 255, 255, 0.72); font-size: 17px; margin: 20px auto 0; max-width: 680px; }

.sp-gewerke {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 64px auto 0;
  width: 100%;
  max-width: 1080px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
a.sp-gewerk {
  background: var(--sp-navy-800);
  padding: 32px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #FFFFFF;
  transition: background 200ms;
  text-align: left;
}
a.sp-gewerk:hover { background: var(--sp-navy-700); color: #FFFFFF; }

.sp-gewerk-iconbox {
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-gewerk-iconbox .sp-icon { width: 22px; height: 22px; color: var(--sp-cyan-400); }
.sp-gewerk-text { flex: 1; }
.sp-gewerk-nr { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; margin-bottom: 2px; }
.sp-gewerk-titel { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: #FFFFFF; margin: 0; }
.sp-gewerk-arrow { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; }

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

.sp-section--alt { background: var(--bg-alt); }

.sp-karriere { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: var(--bg-page); }
.sp-karriere-content { padding: 64px 56px; }
.sp-karriere-content .sp-eyebrow::before { width: 32px; }
.sp-karriere-text { font-size: 16px; line-height: 1.7; color: var(--fg-2); margin: 20px 0 28px; }

.sp-feature-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 32px; }
.sp-feature { display: flex; gap: 14px; align-items: flex-start; }
.sp-feature .sp-icon { width: 20px; height: 20px; color: var(--sp-blue-500); flex-shrink: 0; margin-top: 4px; }
.sp-feature-titel { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); }
.sp-feature-text { font-size: 13px; color: var(--fg-3); line-height: 1.5; margin-top: 2px; }

.sp-karriere-media { position: relative; min-height: 480px; overflow: hidden; }
.sp-karriere-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-karriere-badge {
  position: absolute;
  bottom: 24px; right: 24px;
  background: rgba(0, 9, 51, 0.78);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.sp-karriere-badge .sp-icon { width: 14px; height: 14px; color: var(--sp-cyan-400); }

/* ---------- Icons allgemein ---------- */

.sp-icon { display: inline-block; }

/* ---------- Header (SPNav/HomeNav-Portierung) ---------- */

#brx-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 220ms var(--ease-standard), border-color 220ms var(--ease-standard);
}
#brx-header.scrolling {
  background: rgba(250, 250, 247, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

/* Fluchtlinie: Nav, Hero, Sektionen, Footer teilen dieselbe 1320px-Content-Linie */
.sp-nav { padding: 0 40px; }

.sp-nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.sp-nav-logo { flex-shrink: 0; }
.sp-nav-logo img { height: 30px; width: auto; max-width: none; display: block; }
#brx-header img.sp-logo-light { display: none; }

/* Menü: Saira 500 15px, aktive Seite mit blauem Unterstrich */
.sp-nav-menu .bricks-nav-menu { gap: 36px; }
.sp-nav-menu .bricks-nav-menu > li > a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  padding: 0 0 4px;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.sp-nav-menu .bricks-nav-menu > li > a:hover { color: var(--sp-blue-600); }
.sp-nav-menu .bricks-nav-menu > li.current-menu-item > a,
.sp-nav-menu .bricks-nav-menu > li.current-menu-ancestor > a {
  color: var(--sp-blue-600);
  border-bottom-color: var(--sp-blue-600);
}

.sp-nav-right { display: flex; gap: 16px; align-items: center; }
a.sp-nav-tel { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
a.sp-nav-tel:hover { color: var(--sp-blue-600); }

a.brxe-button.sp-btn--nav { padding: 12px 22px; font-size: 11px; background: var(--sp-navy-700); color: #FFFFFF; transition: all 220ms; }
a.brxe-button.sp-btn--nav:hover { background: var(--sp-navy-600); }

/* Startseite, ungescrollt: Nav invertiert über dunklem Hero (HomeNav) */
body.home #brx-header:not(.scrolling) img.sp-logo-dark { display: none; }
body.home #brx-header:not(.scrolling) img.sp-logo-light { display: block; }
body.home #brx-header:not(.scrolling) .sp-nav-menu .bricks-nav-menu > li > a { color: #FFFFFF; border-bottom-color: transparent; }
body.home #brx-header:not(.scrolling) .sp-nav-menu .bricks-nav-menu > li > a:hover { color: var(--sp-cyan-400); }
body.home #brx-header:not(.scrolling) a.sp-nav-tel { color: rgba(255, 255, 255, 0.7); }
body.home #brx-header:not(.scrolling) a.brxe-button.sp-btn--nav { background: #FFFFFF; color: var(--sp-navy-700); }

/* Mobile-Menü-Toggle (Bricks-eigen) einfärben */
#brx-header .bricks-mobile-menu-toggle { color: var(--fg-1); }
body.home #brx-header:not(.scrolling) .bricks-mobile-menu-toggle { color: #FFFFFF; }

/* Off-Canvas-Panel: Navy-Fläche, Saira-Links (Bricks-Default ist transparent) */
.bricks-mobile-menu-wrapper {
  background: var(--sp-navy-700);
  padding: 110px 36px 36px;
}
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  padding: 12px 0;
  border-bottom: none;
}
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a:hover,
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li.current-menu-item > a { color: var(--sp-cyan-400); }
.bricks-mobile-menu-overlay { background: rgba(0, 6, 31, 0.6); }
#brx-header .brx-nav-mobile-toggle-close { color: #FFFFFF; }

/* Tablet-Querformat 992-1279px (User-Meldung 2026-08-19: auf dem iPad im
   Querformat war die Navigation rechts abgeschnitten). Unterhalb 992px
   uebernimmt der Hamburger, oberhalb 1279px passt die Desktop-Leiste. Genau
   dazwischen zeigt Bricks die volle Leiste, obwohl sie nicht hineinpasst:
   gemessen bei 1024px brauchte sie 1152px bei 929px Platz, der Kontakt-Knopf
   stand komplett ausserhalb des Viewports und war nicht erreichbar (kein
   Scrollbalken, der Ueberstand wird geklippt).

   Groesster Hebel ist der erste Block: Bricks gibt jedem <li> zusaetzlich
   `margin-left: 30px`, obendrauf auf das `gap: 36px` dieser Datei. Der
   sichtbare Abstand betraegt dadurch 66px statt der vorgesehenen 36px, und
   das erste Element bekommt einen Vorlauf von 30px. Das Neutralisieren holt
   5x30 = 150px zurueck und stellt zugleich den entworfenen Abstand her.
   Dazu entfaellt in diesem Band die Telefonnummer - sie steht im Footer und
   auf der Kontaktseite, der Kontakt-Knopf daneben bleibt. Unterhalb 992px
   ist .sp-nav-right ohnehin komplett ausgeblendet.

   Gemessen nach der Aenderung, Ueberstand 0 bei allen Breiten; Restluft:
   992px -> 50px, 1024px (iPad 10,2") -> 89px, 1080px (iPad 10,9") -> 138px,
   1194px (iPad Pro 11") -> 252px, 1280px (Desktop-Leiste greift wieder,
   Telefonnummer zurueck) -> 33px.

   NICHT `.sp-nav { padding }` verkleinern, um Platz zu schaffen - die 40px
   halten die Fluchtlinie mit Hero, Sektionen und Footer. */
@media (min-width: 992px) and (max-width: 1279px) {
  .sp-nav-menu .bricks-nav-menu > li { margin-left: 0; }
  .sp-nav-inner { gap: 16px; }
  a.sp-nav-tel { display: none; }
  a.brxe-button.sp-btn--nav { padding: 10px 18px; }
}

/* ---------- Footer (SPFooter-Portierung) ---------- */

.sp-footer {
  background: var(--sp-navy-800);
  color: #FFFFFF;
  padding: 88px 40px 36px;
  position: relative;
  overflow: hidden;
}
/* UNERREICHBAR seit 2026-08-21: der Footer traegt `sp-raster--v` nicht mehr.
   Bleibt fuer einen Rueckbau stehen, wie .sp-strow-cat und .sp-hero-stats. */
.sp-footer.sp-raster--v::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px);
}

.sp-footer-container { max-width: 1320px; margin: 0 auto; width: 100%; position: relative; z-index: 1; align-items: stretch; }

.sp-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 56px;
}

/* Klasse sitzt direkt auf dem <img> (Bricks legt _cssClasses aufs Bild) */
img.sp-footer-logo { height: 35px; width: auto; max-width: none; display: block; margin-bottom: 22px; }
.sp-footer-text { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 340px; margin: 0; }

.sp-footer-social { display: flex; gap: 12px; margin-top: 24px; }
a.sp-social {
  width: 36px; height: 36px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  transition: all 150ms;
}
a.sp-social:hover { border-color: var(--sp-cyan-500); color: #FFFFFF; }

.sp-footer-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 18px;
}

.sp-footer-list { display: flex; flex-direction: column; gap: 10px; }
a.sp-footer-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: color 150ms, border-color 150ms;
}
a.sp-footer-link:hover { color: #FFFFFF; border-bottom-color: var(--sp-cyan-500); }

.sp-footer-zeile { font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.sp-mt { margin-top: 16px; }

.sp-footer-firma { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.4; }
.sp-footer-adresse { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.7; margin-top: 6px; }
.sp-footer-kontaktlink { margin-top: 6px; font-family: var(--font-mono); font-size: 13px; }
.sp-footer-kontaktlink:first-of-type { margin-top: 16px; }
a.sp-footer-tel {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: var(--sp-cyan-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a.sp-footer-tel:hover { color: var(--sp-cyan-400); }

.sp-footer-bottom {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.sp-footer-legal { display: flex; gap: 24px; }
a.sp-footer-legal-link { color: rgba(255, 255, 255, 0.55); transition: color 150ms; }
a.sp-footer-legal-link:hover { color: #FFFFFF; }

/* ---------- Projekt-Detail (Single-Template CPT projekt) ---------- */

.sp-psec { padding: 96px 40px; }
.sp-phero-sec { padding: 118px 40px 0; }
.sp-overview-sec { padding-bottom: 0; }
.sp-pgewerke-sec { padding-top: 96px; } /* Feinabgleich 2026-08-09: Vorlagen-Abstand Overview→Gewerke = 96px */
.sp-h2--md { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }

.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 24px;
}
.sp-breadcrumb a { color: var(--fg-3); }
.sp-breadcrumb a:hover { color: var(--sp-blue-600); }
.sp-bc-aktiv { color: var(--fg-1); }
.sp-bc-chev { flex-shrink: 0; }

.sp-phero {
  position: relative;
  color: #FFFFFF;
  overflow: hidden;
  min-height: min(72vh, 680px);
  display: flex;
  flex-direction: column;
}
.sp-phero img.sp-phero-img,
.sp-phero .sp-phero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Oberer Stopp 2026-08-19 von 0.35 auf 0.15 gesenkt (User: obere Hälfte zu
   dunkel). Über dem Badge steht kein Text — gemessen beginnt es bei 35 %,
   der Titel bei 43 % der Hero-Höhe —, die oberen 40 % sind also reine
   Dekoration und ohne Kontrastfunktion. 0.15 ist derselbe Wert, den die
   Related-Kacheln (.sp-rtile::after) und die Projektkacheln (0.1) tragen;
   mit 0.35 war das Hero der Ausreißer im Haus-Muster. Der Fuß bleibt bei
   0.92 — dort hängt die Lesbarkeit von Titel, Unterzeile und Meta-Zeile,
   und bei 43 % liegt die Deckung mit ~0.19 ohnehin schon am Dünnsten. */
.sp-phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,9,51,0.15) 0%, rgba(0,9,51,0.15) 40%, rgba(0,9,51,0.92) 100%);
  pointer-events: none;
}
.sp-phero-content {
  position: relative;
  z-index: 1;
  padding: 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 1000px;
}
.sp-phero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-bottom: 24px;
  padding: 6px 14px;
  background: var(--sp-blue-600);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.sp-phero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
.sp-phero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 20px;
  max-width: 720px;
}
.sp-phero-meta {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.sp-phero-meta-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 6px;
}
.sp-phero-meta-wert { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #FFFFFF; }

.sp-overview { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; }
.sp-overview .sp-h2 { margin-bottom: 28px; }
.sp-ov-text p { font-size: 16px; line-height: 1.75; color: var(--fg-2); margin: 0 0 18px; }
.sp-bildquelle {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--bg-alt);
  border-left: 3px solid var(--sp-blue-500);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}

.sp-dl { margin: 0; border: 1px solid var(--border-soft); background: #FFFFFF; }
.sp-dl-row { display: grid; grid-template-columns: 1fr 1.4fr; border-bottom: 1px solid var(--border-soft); }
.sp-dl-row:last-child { border-bottom: none; }
.sp-dl-row dt {
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-alt);
}
.sp-dl-row dd { margin: 0; padding: 16px 20px; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--fg-1); }

.sp-stand { margin-top: 32px; padding: 24px 28px; background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-stand::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle at top right, rgba(19, 177, 255, 0.35), transparent 70%);
  pointer-events: none;
}
.sp-stand-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sp-stand-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-cyan-400); }
.sp-stand-zahl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  background: var(--sp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-stand-bar { position: relative; height: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; display: block; }
.sp-stand-bar span { position: absolute; left: 0; top: 0; height: 100%; background: var(--sp-gradient-brand); display: block; }
.sp-stand-sub { position: relative; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.65); }

.sp-pgewerke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); }
.sp-pgewerk { background: #FFFFFF; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.sp-pgewerk-top { display: flex; justify-content: space-between; align-items: flex-start; color: var(--sp-blue-500); }
.sp-pgewerk-kg { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.sp-pgewerk-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); }

.sp-highlights-sec { background: var(--bg-alt); }
.sp-highlights { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
.sp-hl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); }
.sp-hl-list li { background: #FFFFFF; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.sp-hl-nr { font-family: var(--font-mono); font-size: 13px; color: var(--sp-blue-600); font-weight: 500; }
.sp-hl-text { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--fg-1); line-height: 1.4; }

.sp-pcta { background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-pcta::before {
  content: "";
  position: absolute;
  top: -100px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.sp-pcta-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.sp-pcta-grid .sp-h2 { margin-bottom: 20px; }
.sp-pcta-text { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); max-width: 560px; }
.sp-pcta-buttons { display: flex; flex-direction: column; gap: 16px; }
a.brxe-button.sp-btn--between { justify-content: space-between; width: 100%; }

.sp-related-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px; margin-bottom: 48px; }
/* Flexbox statt Grid - gleiche Ursache wie bei .sp-projects, s. dort.
   Die Kacheln haben nur absolut positionierte Kinder, die Grid-Zeile bekam
   dadurch Mindesthoehe 0 und die Kacheln ragten 363px in die naechste
   Sektion. Gefunden 2026-08-13. */
.sp-related-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.sp-related-grid > * { flex: 0 0 calc((100% - 48px) / 4); }
.sp-rtile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; cursor: pointer; }
/* Bild IM TEXTFLUSS - gibt der Kachel echte Hoehe. Begruendung s. .sp-tile img. */
.sp-rtile img.sp-rtile-img, .sp-rtile .sp-rtile-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 500ms var(--ease-standard);
}
.sp-rtile:hover .sp-rtile-img img, .sp-rtile:hover img.sp-rtile-img { transform: scale(1.06); }
.sp-rtile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,9,51,0.15) 30%, rgba(0,9,51,0.88) 100%);
  pointer-events: none;
}
.sp-rtile-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
}
.sp-rtile-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; color: #FFFFFF; margin: 0 0 4px; }
.sp-rtile-loc { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; gap: 5px; }

.sp-icon-11, .sp-icon-12, .sp-icon-14, .sp-icon-24 { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------- Projekte-Übersicht ---------- */

.sp-eyebrow--sm::before { width: 32px; }
.sp-head-center { align-items: center; text-align: center; }

.sp-pjhero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: stretch; }

.sp-pjhero-panel {
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 72px 64px 64px;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sp-pjhero-panel::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at top right, rgba(19, 177, 255, 0.45), transparent 70%);
  pointer-events: none;
}
.sp-pjhero-top { position: relative; z-index: 1; }
.sp-pjhero-panel .sp-eyebrow { margin-bottom: 28px; }

.sp-pjhero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
.sp-pjhero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 20px;
  max-width: 480px;
}

.sp-pjhero-stats { position: relative; z-index: 1; display: flex; gap: 24px; margin-top: 48px; }
.sp-pjhero-stat { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.sp-pjhero-stat:first-child { padding-left: 0; border-left: none; }
.sp-pjhero-stat-zahl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  background: var(--sp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-pjhero-stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
}

.sp-pjhero-media { position: relative; min-height: 460px; overflow: hidden; }
.sp-pjhero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-pjhero-caption {
  position: absolute;
  bottom: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 9, 51, 0.6);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  z-index: 1;
}

/* Filter-Kopf: Headline links, Suche rechts */
.sp-pj-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}
/* Filter-Element nicht strecken — kompakt rechts neben der Headline */
.brxe-filter-search.sp-pj-search { width: auto; flex: 0 0 auto; }
.sp-pj-search input[type="search"],
.sp-pj-search input[type="text"] {
  font-family: var(--font-body);
  font-size: 14px;
  width: 260px;
  padding: 10px 16px 10px 38px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background-color: #FFFFFF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238A8984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px;
  color: var(--fg-1);
  outline: none;
}
.sp-pj-search input:focus { border-color: var(--sp-blue-500); }
.sp-pj-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Kategorie-Pills (Bricks filter-radio — _cssClasses sitzt direkt auf dem <ul>) */
ul.brxe-filter-radio.sp-pj-pills {
  list-style: none;
  padding: 0 0 24px;
  margin: 0 0 40px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
}
ul.sp-pj-pills li { margin: 0; }
ul.sp-pj-pills li label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--fg-1);
  transition: all 180ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
ul.sp-pj-pills li label:hover { border-color: var(--sp-navy-700); }
ul.sp-pj-pills .brx-input-indicator { display: none; }
ul.sp-pj-pills li.brx-option-active label,
ul.sp-pj-pills li label.brx-option-active {
  background: var(--sp-navy-700);
  color: #FFFFFF;
  border-color: var(--sp-navy-700);
}
ul.sp-pj-pills .brx-filter-count { font-family: var(--font-mono); font-size: 10px; opacity: 0.65; }

/* Karten-Grid */
.sp-pj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.sp-pjcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition: all 220ms var(--ease-standard);
  cursor: pointer;
}
/* Code-Element-Wrapper + Body durchstrecken, damit die Fußzeile
   in allen Karten einer Reihe auf gleicher Höhe unten sitzt */
.sp-pjcard > .brxe-code { flex: 1; display: flex; flex-direction: column; }
.sp-pjcard-imgwrap { flex-shrink: 0; }
.sp-pjcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15, 27, 40, 0.10); }

/* `width: 100%` ist hier PFLICHT. Ohne explizite Breite ist die Breite dieses
   Flex-Kindes nicht "definit" - die durch `align-items: stretch` entstandene
   Breite zaehlt fuer `aspect-ratio` nicht. Der Wrapper kollabiert dann auf
   Hoehe 0 und die Projektbilder verschwinden (auf /projekte/ waren mobil nur
   3 von 24 Bildern sichtbar). Gefunden 2026-08-13 durch User-Meldung. */
.sp-pjcard-imgwrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; width: 100%; }
.sp-pjcard-imgwrap img.sp-pjcard-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard);
}
.sp-pjcard:hover img.sp-pjcard-img { transform: scale(1.06); }

.sp-pjcard-chips { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; z-index: 1; }
.sp-pjcard-chips span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(0, 9, 51, 0.78);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
}
.sp-pjcard-jahr {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FFFFFF;
  background: rgba(0, 9, 51, 0.5);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  z-index: 1;
}

.sp-pjcard-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.sp-pjcard-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin: 0; line-height: 1.25; letter-spacing: -0.005em; }
.sp-pjcard-meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.sp-pjcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sp-pjcard-tags { margin-top: 14px; margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.sp-pjcard-tags span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-graphite);
  padding: 3px 8px;
  background: var(--bg-alt);
  border-radius: 2px;
}
.sp-pjcard-tags .sp-pjcard-mehr { font-family: var(--font-mono); color: var(--fg-3); background: none; padding: 3px 0; align-self: center; }
.sp-pjcard-fuss {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-1);
  transition: color 200ms;
}
.sp-pjcard:hover .sp-pjcard-fuss { color: var(--sp-blue-600); }

.sp-pj-cta { max-width: 1100px; }
.sp-pj-cta-text { font-size: 17px; line-height: 1.7; color: var(--fg-3); max-width: 640px; margin: 20px 0 32px; }

/* ---------- Mobile (neu — die Vorlage hatte keine Breakpoints) ---------- */

@media (max-width: 991px) {
  .sp-nav { padding: 0 24px; }
  .sp-nav-inner { padding: 16px 0; }
  .sp-nav-right { display: none; }
  .sp-footer { padding: 64px 24px 32px; }
  .sp-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sp-section { padding: 88px 24px; }
  .sp-about { padding: 48px 24px 88px; }
  .sp-hero { padding: 0 24px; }
  .sp-hero-inner { padding: 110px 0; }
  .sp-section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .sp-pillars { grid-template-columns: repeat(2, 1fr); }
  /* Flex-Basis statt Spaltenzahl - .sp-projects/.sp-tiles sind Flexboxen */
  .sp-projects > *, .sp-tiles > * { flex-basis: calc((100% - 16px) / 2); }
  .sp-gewerke { grid-template-columns: repeat(2, 1fr); }
  .sp-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .sp-karriere { grid-template-columns: 1fr; }
  /* Gestapelt: gleiches Seitenverhältnis wie am Desktop (gemessen 691/637) */
  .sp-karriere-media { min-height: 0; height: auto; aspect-ratio: 691 / 637; }
  .sp-psec { padding: 72px 24px; }
  .sp-phero-sec { padding: 96px 24px 0; }
  .sp-phero-content { padding: 32px; }
  .sp-overview, .sp-highlights, .sp-pcta-grid { grid-template-columns: 1fr; gap: 40px; }
  .sp-pgewerke { grid-template-columns: repeat(2, 1fr); }
  .sp-related-grid > * { flex-basis: calc((100% - 16px) / 2); }
  .sp-pjhero { grid-template-columns: 1fr; }
  .sp-pjhero-panel { padding: 48px 32px; min-height: 0; }
  /* KPI-Zeile bricht mobil auf zwei Spalten um. Nebeneinander brauchen die
     drei Kennzahlen 377px, im Panel stehen aber nur 271px zur Verfuegung -
     die dritte Beschriftung („Marktsegmente", „Ansprechpartner") wurde vom
     `overflow: hidden` des Panels abgeschnitten. Schrumpfen hilft nicht, das
     sind einzelne lange Woerter ohne Umbruchstelle.
     Der Trennstrich entfaellt bei jedem Zeilenanfang (ungerade Kinder),
     sonst haengt er am Zeilenbeginn in der Luft. Gefunden 2026-08-13. */
  .sp-pjhero-stats { flex-wrap: wrap; gap: 16px; }
  /* `flex-grow: 1` statt fester Basis: Steht die dritte Kennzahl allein in
     der zweiten Zeile, nutzt sie die volle Breite. Sonst laeuft ein langes
     Wort wie „Ansprechpartner" (140px) ueber seine 128px-Spalte hinaus. */
  .sp-pjhero-stat { flex: 1 1 calc((100% - 16px) / 2); min-width: 0; }
  .sp-pjhero-stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .sp-pjhero-media { min-height: 320px; }
  .sp-pj-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .sp-stat:nth-child(3) { padding-left: 0; border-left: none; }
}

@media (max-width: 478px) {
  .sp-nav { padding: 0 20px; }
  .sp-footer { padding: 48px 20px 28px; }
  .sp-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .sp-footer-bottom { flex-direction: column; }
  .sp-section { padding: 64px 20px; }
  .sp-about { padding: 40px 20px 64px; }
  .sp-hero { padding: 0 20px; }
  .sp-hero-inner { padding: 100px 0; }
  .sp-pillars, .sp-gewerke { grid-template-columns: 1fr; }
  .sp-projects > *, .sp-tiles > * { flex-basis: 100%; }
  .sp-karriere-content { padding: 40px 24px; }
  .sp-psec { padding: 56px 20px; }
  .sp-phero-sec { padding: 88px 20px 0; }
  .sp-phero-content { padding: 24px 20px; }
  .sp-pgewerke { grid-template-columns: 1fr; }
  .sp-related-grid > * { flex-basis: 100%; }
  .sp-pj-grid { grid-template-columns: 1fr; }
  .sp-pj-head { align-items: stretch; flex-direction: column; }
  .brxe-filter-search.sp-pj-search { width: 100%; }
  .sp-pj-search input[type="search"], .sp-pj-search input[type="text"] { width: 100%; }
  .sp-hero-cta a.brxe-button.sp-btn { width: 100%; justify-content: center; }
  .sp-pillar-title { font-size: 32px; }
}

/* ================== Stelle-Detail (Template sp-stelle-single) ================== */

/* Headline-Größen des Originals (SectionList/Benefits/Bewerben 52, Process 44) */
.sp-h2--52 { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.02em; }
.sp-h2--44 { font-size: clamp(32px, 3.4vw, 44px); }

/* Arrow-Left-Variante (Hero „Alle Stellen") — Gegenstück zu .sp-btn--arrow */
.sp-btn--arrow-l::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>') no-repeat center / contain;
}

/* Hero-Karte: Navy, Linienraster (via .sp-raster) + Radial-Glow oben rechts */
.sp-sthero {
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 64px 64px 56px;
  min-height: 380px;
  overflow: hidden;
  align-items: stretch;
  /* 2026-08-21 nachgetragen: stand vorher NICHT hier, sondern kam ueber
     `.sp-raster { position: relative }` mit. Als die Klasse entfiel, verlor
     das ::after-Glow seinen Bezugsrahmen, positionierte sich gegen den
     Viewport und stand als hellblauer Block oben rechts AUSSERHALB des Heros
     — `overflow: hidden` greift dort nicht, weil ein unpositioniertes
     Element gar nicht der umschliessende Block des Glows ist. Die anderen
     Rasterflaechen (.sp-hero, .sp-pjhero-panel, .sp-footer,
     .sp-section--dark) setzen `position` selbst und waren nie betroffen. */
  position: relative;
}
.sp-sthero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at top right, rgba(19, 177, 255, 0.4), transparent 70%);
  pointer-events: none;
}
.sp-sthero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.sp-sthero-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.sp-sthero-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
.sp-sthero-badge--neu { background: var(--sp-blue-600); border: none; color: #FFFFFF; }
.sp-sthero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
.sp-sthero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 14px;
}
.sp-sthero-gender { color: var(--sp-cyan-400); }
.sp-sthero-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.sp-sthero-actions a.brxe-button.sp-btn--white { padding: 16px 26px; }
.sp-sthero-actions a.brxe-button.sp-btn--ghost-light { padding: 14.5px 24.5px; border-color: rgba(255, 255, 255, 0.35); gap: 8px; }

/* MetaBar: 4 Zellen mit 1px-Fugen (Original: grid gap 1 auf border-soft) */
.sp-stmeta-sec { padding: 40px 40px 0; }
.sp-stmeta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.sp-stmeta-cell { background: #FFFFFF; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sp-stmeta-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sp-stmeta-label svg { color: var(--sp-blue-500); flex-shrink: 0; }
.sp-stmeta-wert { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); line-height: 1.3; }

/* Intro: schmale 920px-Spalte, große Saira-300-Zeile */
.sp-stintro-sec { padding: 96px 40px 40px; }
.sp-stintro-text {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* SectionList (Aufgaben/Profil): Sticky-Label links, nummerierte Liste rechts.
   Sticky-Top 96 statt 32 (Original) — der fixe WP-Header läge sonst drüber. */
.sp-stlist-sec { padding: 64px 40px; }
.sp-stlist { display: grid; grid-template-columns: 1fr 1.8fr; gap: 80px; align-items: start; }
.sp-stlist-sticky { position: sticky; top: 96px; align-items: flex-start; }
.sp-stlist-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sp-stlist-items li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sp-stlist-items li:last-child { border-bottom: none; }
.sp-stlist-nr { font-family: var(--font-mono); font-size: 13px; color: var(--sp-blue-500); font-weight: 500; padding-top: 4px; }
.sp-stlist-titel { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg-1); margin-bottom: 6px; letter-spacing: -0.005em; }
.sp-stlist-text { font-size: 15px; line-height: 1.65; color: var(--fg-2); }

/* Benefits: Kopf wie SectionList, 4er-Grid mit 1px-Fugen */
.sp-stbenefits-sec { padding: 96px 40px; background: var(--bg-alt); }
.sp-stbenefits-head { display: grid; grid-template-columns: 1fr 1.8fr; gap: 80px; align-items: start; margin-bottom: 56px; }
.sp-stbenefits-sub { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 0; padding-top: 8px; }
.sp-stbenefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.sp-stbenefit { background: #FFFFFF; padding: 32px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.sp-stbenefit-icon { color: var(--sp-blue-500); display: flex; }
.sp-stbenefit-titel { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg-1); margin-top: 18px; margin-bottom: 6px; line-height: 1.25; }
.sp-stbenefit-text { font-size: 13px; color: var(--fg-3); line-height: 1.6; }

/* Process: 4 Schritte, Verbindungslinie auf Icon-Höhe */
.sp-stprocess-sec { padding: 96px 40px; }
.sp-stprocess-h2 { margin-bottom: 56px; }
.sp-stprocess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.sp-stprocess-line {
  position: absolute;
  top: 32px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 1px;
  background: var(--border-soft);
  z-index: 0;
}
.sp-ststep { padding: 0 12px; position: relative; z-index: 1; align-items: flex-start; }
.sp-ststep-box {
  width: 64px;
  height: 64px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  color: var(--sp-blue-500);
}
.sp-ststep-nr {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background: var(--sp-blue-600);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-ststep-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin-bottom: 6px; }
.sp-ststep-text { font-size: 14px; color: var(--fg-3); line-height: 1.55; max-width: 220px; }

/* Bewerben: Navy mit Radial-Glow oben links, Glas-Karte rechts */
.sp-stbewerben { padding: 96px 40px; background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-stbewerben::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.sp-stbew-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.sp-stbew-h2 { margin-bottom: 20px; }
.sp-stbew-text { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); margin: 0 0 32px; max-width: 560px; }
.sp-stbew-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Code-Element-Buttons (mailto braucht rawurlencode) — Werte wie a.brxe-button.sp-btn */
a.sp-stbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border-radius: 2px;
  transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
a.sp-stbtn--white { background: #FFFFFF; color: var(--sp-navy-700); padding: 16px 28px; }
a.sp-stbtn--white:hover { background: var(--sp-cyan-400); color: #FFFFFF; }
a.sp-stbtn--ghost { background: transparent; color: #FFFFFF; padding: 14.5px 26.5px; border: 1.5px solid rgba(255, 255, 255, 0.4); }
a.sp-stbtn--ghost:hover { border-color: var(--sp-cyan-400); color: var(--sp-cyan-400); }
.sp-stkontakt { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 32px; backdrop-filter: blur(8px); align-items: stretch; }
.sp-stkontakt-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 20px;
}
.sp-stkontakt-row { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
img.sp-stkontakt-img { width: 72px; height: 72px; object-fit: cover; flex-shrink: 0; filter: grayscale(0.2); }
.sp-stkontakt-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #FFFFFF; line-height: 1.2; letter-spacing: -0.005em; }
.sp-stkontakt-rolle { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; letter-spacing: 0.04em; }
.sp-stkontakt-links { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); align-items: stretch; }
a.sp-stkontakt-link { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-family: var(--font-mono); font-size: 14px; }
a.sp-stkontakt-link:hover { color: var(--sp-cyan-400); }
.sp-stkontakt-link svg { color: var(--sp-cyan-400); flex-shrink: 0; }

/* Related: weiße Zeilen-Liste mit Hover, Kopf wie Projekt-Related */
.sp-strelated-sec { padding: 96px 40px; }
a.sp-link-arrow { display: inline-flex; align-items: center; gap: 8px; }
.sp-strelated { background: #FFFFFF; border: 1px solid var(--border-soft); align-items: stretch; }
/* Seit 2026-08-20 von ZWEI Stellen benutzt: der Bricks-Schleife in Vorlage
   #164 („Weitere Stellen") und dem Code-Element ka001g auf /karriere/. Der
   Selektor hiess vorher `a.brxe-block.sp-strow` — die Karriere-Zeilen sind
   handgerendert und tragen kein `brxe-block`, deshalb nur noch `a.sp-strow`.
   Spezifitaet faellt damit von (0,3,1) auf (0,1,1); das genuegt weiterhin
   gegen Bricks' eigene `.brxe-block`-Regeln (0,1,0). */
a.sp-strow {
  display: grid;
  /* 3 Spalten seit 2026-08-12: Titelblock, „Ansehen", Pfeil. Vorher waren es
     vier (auto 1fr auto auto) mit dem Kategorie-Etikett vorne — das wurde auf
     User-Wunsch entfernt (wie auf der Karriereseite, die nie eins hatte).
     Die vierte Spalte stehen zu lassen war messbar falsch: der Titelblock
     schrumpfte auf die auto-Spalte (188px), „Ansehen" bekam das 1fr (587px). */
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: background 150ms var(--ease-standard);
}
a.sp-strow:last-child { border-bottom: none; }
a.sp-strow:hover { background: var(--bg-alt); }
/* Ungenutzt seit 2026-08-12 — das Element sd003h wurde aus Template #164
   entfernt. Bewusst stehen gelassen wie .sp-hero-stats, damit ein Zurueckbauen
   ohne Neuschreiben der CSS moeglich ist. Dann aber auch die Spaltenzahl von
   a.sp-strow wieder auf 4 setzen. */
.sp-strow-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-navy-700);
  padding: 6px 12px;
  background: var(--bg-alt);
}
.sp-strow-titelzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.sp-strow-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); }
.sp-strow-gender { font-weight: 300; color: var(--fg-3); }
.sp-strow-neu {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--sp-blue-600);
  padding: 3px 7px;
}
/* `flex-wrap` seit 2026-08-20: auf der Detailseite stehen zwei Angaben, auf
   /karriere/ bis zu drei (Art, Ort, Befristung) — ohne Umbruch lief die
   dritte auf schmalen Fenstern aus der Zeile. */
.sp-strow-meta { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.sp-strow-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sp-strow-action { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-blue-500); }
.sp-strow-arrowbox { display: flex; color: var(--fg-3); }

@media (max-width: 991px) {
  .sp-sthero { padding: 48px 32px 44px; min-height: 0; }
  .sp-sthero-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .sp-stmeta-sec { padding: 32px 24px 0; }
  .sp-stmeta { grid-template-columns: repeat(2, 1fr); }
  .sp-stintro-sec { padding: 72px 24px 32px; }
  .sp-stlist-sec { padding: 48px 24px; }
  .sp-stlist { grid-template-columns: 1fr; gap: 32px; }
  .sp-stlist-sticky { position: static; }
  .sp-stbenefits-sec, .sp-stprocess-sec, .sp-stbewerben, .sp-strelated-sec { padding: 72px 24px; }
  .sp-stbenefits-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .sp-stbenefits { grid-template-columns: repeat(2, 1fr); }
  .sp-stprocess { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .sp-stprocess-line { display: none; }
  .sp-stbew-grid { grid-template-columns: 1fr; gap: 40px; }
  a.sp-strow { gap: 20px; padding: 20px 24px; }
}

@media (max-width: 478px) {
  .sp-sthero { padding: 32px 20px 36px; }
  .sp-stmeta-sec { padding: 24px 20px 0; }
  .sp-stmeta { grid-template-columns: 1fr; }
  .sp-stintro-sec { padding: 56px 20px 24px; }
  .sp-stlist-sec { padding: 40px 20px; }
  .sp-stbenefits-sec, .sp-stprocess-sec, .sp-stbewerben, .sp-strelated-sec { padding: 56px 20px; }
  .sp-stbenefits, .sp-stprocess { grid-template-columns: 1fr; }
  /* Einspaltig werden die Schritte zentriert. Die Linksbuendigkeit am Desktop
     hat nur einen Zweck: Die Verbindungslinie soll durch alle vier Icon-Mitten
     laufen, die dafuer denselben Abstand vom linken Spaltenrand brauchen.
     Unterhalb 991px ist die Linie ausgeblendet (.sp-stprocess-line), damit
     entfaellt der Grund - und das Icon stand einsam links neben viel
     Leerraum. Gefunden 2026-08-13 durch User-Meldung. */
  .sp-ststep { padding: 0; text-align: center; }
  /* `.sp-ststep` ist display:block - `align-items` waere dort wirkungslos.
     Die 64px-Icon-Box ist ein Block und wird ueber automatische Seitenraender
     zentriert; Titel und Text folgen dem `text-align`. */
  .sp-ststep-box { margin-left: auto; margin-right: auto; }
  .sp-ststep-text { margin-left: auto; margin-right: auto; }
  .sp-stkontakt { padding: 24px 20px; }
  a.sp-strow { grid-template-columns: 1fr auto; row-gap: 12px; }
  .sp-strow-cat, .sp-strow-action { display: none; }
  .sp-stbew-cta a.sp-stbtn { width: 100%; justify-content: center; }
}

/* ================== Karriere-Seite (#152) ================== */

.sp-w500 { font-weight: 500; }
.sp-it--400 { font-weight: 400; }
.sp-eyebrow--mb32 { margin-bottom: 32px; }

/* Arrow-Down-Variante (Hero „Offene Stellen ansehen") */
.sp-btn--arrow-d::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center / contain;
}

/* Hero: Panel/Media/Caption kommen von sp-pjhero-*, hier nur die Karriere-Maße */
.sp-khero-eyebrow::before { width: 32px; }
.sp-khero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(52px, 6.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
.sp-khero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 22px;
  max-width: 520px;
}
.sp-khero-cta { display: flex; flex-direction: row; gap: 16px; margin-top: 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.sp-khero-cta a.brxe-button.sp-btn--white { padding: 16px 26px; }
.sp-khero-cta a.brxe-button.sp-btn--ghost-light { padding: 14.5px 24.5px; }

/* Benefits: Kopf 2-spaltig, 3er-Grid mit 1px-Fugen */
.sp-kbenefits-sec { padding: 96px 40px; }
.sp-kbenefits-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-bottom: 64px; }
.sp-kbenefits-h2 { line-height: 1.1; }
.sp-kbenefits-sub { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin: 0; padding-top: 8px; }
.sp-kbenefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.sp-kbenefit { background: #FFFFFF; padding: 36px 32px; align-items: flex-start; }
.sp-kbenefit-icon { color: var(--sp-blue-500); display: flex; }
.sp-kbenefit-titel { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg-1); margin-top: 18px; margin-bottom: 6px; }
.sp-kbenefit-text { font-size: 14px; color: var(--fg-3); line-height: 1.6; }

/* Offene Stellen: Kopf + Akkordeon (Code-Element, Vanilla-Toggle) */
.sp-kstellen-sec { padding: 96px 40px; }
.sp-kstellen-head { max-width: 720px; margin-bottom: 48px; align-items: flex-start; }
.sp-kstellen-sub { font-size: 17px; line-height: 1.7; color: var(--fg-3); margin: 20px 0 0; max-width: 620px; }
.sp-kstellen-liste { border: 1px solid var(--border-soft); background: #FFFFFF; }

/* UNGENUTZT seit 2026-08-20: die offenen Stellen sind kein Akkordeon mehr,
   sondern verlinkte Zeilen im Muster .sp-strow (Code-Element ka001g). Der
   Block bleibt stehen wie .sp-strow-cat und .sp-hero-stats, damit ein
   Zurueckbauen ohne Neuschreiben der CSS moeglich ist. Wer ihn entfernt:
   .sp-kstellen-liste daruber wird weiter gebraucht, das ist der Rahmen um
   die Zeilen. */
.sp-kjob { border-bottom: 1px solid var(--border-soft); }
.sp-kjob:last-child { border-bottom: none; }
/* Kategorie-Box der Vorlage bewusst entfernt (User-Entscheid) → 2 Spalten */
.sp-kjob-kopf {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 24px 32px;
  font-family: inherit;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.sp-kjob-titelzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.sp-kjob-titel { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--fg-1); margin: 0; line-height: 1.2; }
.sp-kjob-gender { font-weight: 300; color: var(--fg-3); }
.sp-kjob-neu {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--sp-blue-600);
  padding: 3px 8px;
}
.sp-kjob-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.sp-kjob-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sp-kjob-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  flex-shrink: 0;
  color: var(--fg-1);
}
.sp-kjob .sp-kjob-icon-minus { display: none; }
.sp-kjob.offen .sp-kjob-icon-minus { display: block; }
.sp-kjob.offen .sp-kjob-icon-plus { display: none; }
.sp-kjob-body { display: none; }
.sp-kjob.offen .sp-kjob-body { display: block; }
.sp-kjob-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 8px 32px 40px; }
.sp-kjob-summary {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.sp-kjob-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-blue-600);
  margin-bottom: 14px;
}
.sp-kjob-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-kjob-liste li { font-size: 14px; line-height: 1.6; color: var(--fg-2); padding-left: 18px; position: relative; }
.sp-kjob-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--sp-blue-500);
}
.sp-kjob-fuss {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.sp-kjob-mailhinweis { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); }
.sp-kjob-mailhinweis a { color: var(--sp-navy-700); }
a.sp-kjob-detailbtn {
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  transition: background-color 200ms var(--ease-standard);
}
a.sp-kjob-detailbtn:hover { background: var(--sp-navy-600); }

/* Team-Foto-Band */
.sp-kteam-sec { padding: 0 40px 96px; }
.sp-kteam-band { position: relative; aspect-ratio: 21 / 8; overflow: hidden; align-items: stretch; }
img.sp-kteam-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-kteam-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 12px 20px;
  background: rgba(0, 9, 51, 0.78);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  z-index: 1;
}
.sp-kteam-badge-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 4px;
}
.sp-kteam-badge-titel { font-family: var(--font-display); font-size: 18px; font-weight: 600; }

/* Process: 4 weiße Karten mit blauer Oberkante */
.sp-kprocess-sec { padding: 96px 40px; background: var(--bg-alt); }
.sp-kprocess-h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.1; margin-bottom: 56px; }
.sp-kprocess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.sp-kstep { background: #FFFFFF; padding: 32px 28px; border-top: 3px solid var(--sp-blue-500); position: relative; align-items: flex-start; }
.sp-kstep-icon { color: var(--sp-blue-500); display: flex; }
.sp-kstep-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin-top: 16px; margin-bottom: 6px; }
.sp-kstep-text { font-size: 14px; color: var(--fg-3); line-height: 1.55; }

/* Initiativ-CTA: Navy, zentriert, Radial-Glow oben rechts */
.sp-kinit-sec { padding: 96px 40px; background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-kinit-sec::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.3), transparent 70%);
  pointer-events: none;
}
.sp-kinit { max-width: 1100px; margin: 0 auto; width: 100%; text-align: center; align-items: center; position: relative; z-index: 1; }
.sp-kinit-h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; }
.sp-kinit-text { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); max-width: 640px; margin: 20px auto 32px; }
.sp-kinit a.brxe-button { align-self: center; }
.sp-kinit-kontakt { margin-top: 32px; font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.65); }

@media (max-width: 991px) {
  .sp-kbenefits-sec, .sp-kstellen-sec, .sp-kprocess-sec, .sp-kinit-sec { padding: 72px 24px; }
  .sp-kteam-sec { padding: 0 24px 72px; }
  .sp-kbenefits-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .sp-kbenefits { grid-template-columns: repeat(2, 1fr); }
  .sp-kprocess { grid-template-columns: repeat(2, 1fr); }
  .sp-kjob-kopf { padding: 20px 20px; gap: 16px; }
  .sp-kjob-inner { grid-template-columns: 1fr; gap: 32px; padding: 4px 20px 32px; }
}

@media (max-width: 478px) {
  .sp-kbenefits-sec, .sp-kstellen-sec, .sp-kprocess-sec, .sp-kinit-sec { padding: 56px 20px; }
  .sp-kteam-sec { padding: 0 20px 56px; }
  .sp-kbenefits, .sp-kprocess { grid-template-columns: 1fr; }
  .sp-khero-cta a.brxe-button.sp-btn { width: 100%; justify-content: center; }
}

/* ================== Leistungen-Seite (#150) ================== */

.sp-lhero-weiss { color: #FFFFFF; }

/* Philosophie: 2-Spalten-Kopf + 4 Säulen über Trennlinie */
.sp-lphil-sec { padding: 96px 40px 24px; }
.sp-lphil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.sp-lphil-h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; }
.sp-lphil-texte { padding-top: 8px; align-items: stretch; }
.sp-lphil-text { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin-bottom: 20px; }
.sp-lphil-text:last-child { margin-bottom: 0; }
.sp-lphil-text strong { color: var(--fg-1); }
.sp-lphil-pillars {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.sp-lpillar { align-items: flex-start; }
.sp-lpillar-icon { color: var(--sp-blue-500); display: flex; }
.sp-lpillar-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin-top: 16px; margin-bottom: 6px; }
.sp-lpillar-text { font-size: 14px; color: var(--fg-3); line-height: 1.55; }

/* Services-Akkordeon (Variante C der Vorlage, erstes Element offen) */
.sp-lserv-sec { padding: 96px 40px; }
.sp-lserv-head { max-width: 720px; margin-bottom: 56px; align-items: flex-start; }
.sp-lserv-sub { font-size: 17px; line-height: 1.7; color: var(--fg-3); margin: 20px 0 0; max-width: 620px; }
.sp-lserv-liste { border: 1px solid var(--border-soft); background: #FFFFFF; }
.sp-lakk { border-bottom: 1px solid var(--border-soft); }
.sp-lakk:last-child { border-bottom: none; }
.sp-lakk-kopf {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 28px 40px;
  font-family: inherit;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 32px;
  align-items: center;
}
.sp-lakk-nr { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fg-3); letter-spacing: 0.08em; }
.sp-lakk.offen .sp-lakk-nr { color: var(--sp-blue-600); }
.sp-lakk-titel { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--fg-1); line-height: 1.1; }
.sp-lakk-tagline { font-family: var(--font-display); font-weight: 300; font-size: 15px; color: var(--sp-graphite); margin-top: 4px; }
.sp-lakk-gicon { color: var(--fg-3); display: flex; }
.sp-lakk.offen .sp-lakk-gicon { color: var(--sp-blue-500); }
.sp-lakk-toggle { color: var(--fg-1); display: flex; }
.sp-lakk .sp-lakk-icon-minus { display: none; }
.sp-lakk.offen .sp-lakk-icon-minus { display: block; }
.sp-lakk.offen .sp-lakk-icon-plus { display: none; }
.sp-lakk-body { display: none; }
.sp-lakk.offen .sp-lakk-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--bg-alt); }
.sp-lakk-media { position: relative; min-height: 320px; overflow: hidden; }
img.sp-lakk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-lakk-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 9, 51, 0.6);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.sp-lakk-content { padding: 40px 48px; }
.sp-lakk-intro { font-size: 15px; line-height: 1.7; color: var(--fg-2); margin: 0 0 20px; }
.sp-lakk-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-blue-600);
  margin-bottom: 12px;
}
.sp-lakk-bullets { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.sp-lakk-bullets li { font-size: 14px; line-height: 1.5; color: var(--fg-2); padding-left: 16px; position: relative; }
.sp-lakk-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 2px;
  background: var(--sp-blue-500);
}
.sp-lakk-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Tag-Pille: bewusste Original-Ausnahme von der Eckig-Regel (radius 999) */
.sp-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-navy-700);
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #FFFFFF;
}

/* CTA: Punkteliste links, Navy-Karte mit Radial-Glow rechts */
.sp-lcta-sec { padding: 96px 40px; background: var(--bg-alt); }
.sp-lcta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.sp-lcta-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 24px;
}
.sp-lcta-text { font-size: 16px; line-height: 1.75; color: var(--fg-2); margin: 0 0 16px; }
.sp-lcta-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; align-items: stretch; }
.sp-lcta-punkt { display: flex; gap: 16px; align-items: flex-start; }
.sp-lcta-punkt svg.sp-lcta-punkt-icon { color: var(--sp-blue-500); flex-shrink: 0; margin-top: 2px; }
.sp-lcta-punkt-titel { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-1); }
.sp-lcta-punkt-text { font-size: 14px; color: var(--fg-3); line-height: 1.55; }
.sp-lcta-karte { background: var(--sp-navy-700); color: #FFFFFF; padding: 56px 48px; position: relative; overflow: hidden; align-items: flex-start; }
.sp-lcta-karte::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.5), transparent 70%);
  pointer-events: none;
}
.sp-lcta-karte-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 20px;
  position: relative;
}
.sp-lcta-karte-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 20px;
  position: relative;
}
.sp-lcta-karte-text { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); margin: 0 0 32px; position: relative; }
.sp-lcta-karte a.brxe-button { position: relative; align-self: flex-start; }
.sp-lcta-kontakt { display: flex; flex-direction: row; gap: 32px; margin-top: 32px; position: relative; }
.sp-lcta-kontakt-block { font-family: var(--font-mono); font-size: 13px; }
.sp-lcta-kontakt-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-cyan-400); margin-bottom: 6px; }
.sp-lcta-kontakt-block a { color: #FFFFFF; text-decoration: none; }
.sp-lcta-kontakt-block a:hover { color: var(--sp-cyan-400); }

@media (max-width: 991px) {
  .sp-lphil-sec { padding: 72px 24px 16px; }
  .sp-lphil-grid { grid-template-columns: 1fr; gap: 32px; }
  .sp-lphil-pillars { grid-template-columns: repeat(2, 1fr); margin-top: 56px; padding-top: 40px; }
  .sp-lserv-sec, .sp-lcta-sec { padding: 72px 24px; }
  .sp-lakk-kopf { padding: 20px; gap: 16px; }
  .sp-lakk.offen .sp-lakk-body { grid-template-columns: 1fr; }
  .sp-lakk-media { min-height: 240px; }
  .sp-lakk-content { padding: 28px 24px; }
  .sp-lcta-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 478px) {
  .sp-lphil-sec { padding: 56px 20px 8px; }
  .sp-lserv-sec, .sp-lcta-sec { padding: 56px 20px; }
  .sp-lphil-pillars { grid-template-columns: 1fr; }
  .sp-lakk-gicon { display: none; }
  .sp-lakk-bullets { grid-template-columns: 1fr; }
  .sp-lakk-content { padding: 24px 20px; }
  .sp-lcta-karte { padding: 32px 24px; }
  .sp-lcta-kontakt { flex-direction: column; gap: 16px; }
}

/* ================== Unternehmen-Seite (#151) ================== */

.sp-h2--lh11 { line-height: 1.1; }

/* Blaue Button-Variante (Fokus-CTA der Vorlage) */
a.brxe-button.sp-btn--blue { background: var(--sp-blue-600); color: #FFFFFF; }
a.brxe-button.sp-btn--blue:hover { background: var(--sp-navy-700); }

/* Hero-Facts: wie sp-pjhero-stats, aber 36px-Zahlen und engerer Abstand */
.sp-uhero-facts { display: flex; flex-direction: row; gap: 20px; margin-top: 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.sp-uhero-fact { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.sp-uhero-fact:first-child { padding-left: 0; border-left: none; }
.sp-uhero-fact-zahl { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1; }
.sp-uhero-fact-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
}

/* SubNav: klebt unter dem fixen Header (top wird je Breakpoint gesetzt),
   Scroll-Spy via .aktiv (JS im Code-Element). Anker-Sektionen bekommen
   scroll-margin, damit Ziele nicht unter Header+SubNav verschwinden. */
.sp-usubnav {
  padding: 0 40px;
  background: var(--bg-page);
  position: sticky;
  top: 78px;
  z-index: 40;
  transition: box-shadow 200ms var(--ease-standard);
}
.sp-usubnav.gescrollt { box-shadow: 0 8px 24px -16px rgba(0, 9, 51, 0.18); }
/* Linien nur auf Inhaltsbreite (User-Wunsch 2026-08-09), nicht über die
   volle Bildschirmbreite — die Nav liegt im 1320px-.sp-container */
.sp-usubnav-nav {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
a.sp-usubnav-link {
  flex: 1 1 0;
  min-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: color 150ms, background 150ms, border-color 150ms;
  white-space: nowrap;
}
a.sp-usubnav-link:hover { color: var(--sp-navy-700); }
a.sp-usubnav-link.aktiv { color: var(--sp-navy-700); background: var(--bg-alt); border-bottom-color: var(--sp-blue-500); }
.sp-usubnav-nr { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fg-3); }
a.sp-usubnav-link.aktiv .sp-usubnav-nr { color: var(--sp-blue-500); }
#ueber-uns, #werte, #fokus, #staerken, #geschichte, #kontakt { scroll-margin-top: 145px; }

/* Die neun Gewerke-Akkordeons der Leistungsseite sind seit 2026-08-21
   Sprungziele: die Kacheln unter „Perfekt abgestimmt“ auf der Startseite
   verlinken auf /leistungen/#slug statt pauschal auf die Seite. Ohne
   scroll-margin verschwindet das Ziel unter dem festen Kopfbereich — gemessen
   79px am Desktop, 63px mobil, deshalb 100 bzw. 84 (Kopf + 21 Luft). Die
   Leistungsseite hat KEINE SubNav, daher weniger als die 145px oben. */
#heizung, #lueftung, #kaelte, #sanitaer, #elektro,
#beleuchtung, #msr, #sicherheit, #aufzug { scroll-margin-top: 100px; }

/* UeberUns: Text links, 4/5-Bild mit Navy-Badge rechts */
.sp-uueber-sec { padding: 120px 40px 96px; }
.sp-uueber { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.sp-uueber-h2 { margin-bottom: 28px; }
.sp-uueber-text { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin-bottom: 24px; }
.sp-uueber-zitat {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-3);
  font-style: italic;
  padding-left: 16px;
  border-left: 2px solid var(--sp-blue-500);
  margin-bottom: 32px;
}
.sp-uueber-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.sp-uueber-stat-zahl { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1; }
.sp-uueber-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 10px;
}
.sp-uueber-media { position: relative; align-items: stretch; }
img.sp-uueber-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sp-uueber-badge {
  position: absolute;
  bottom: -32px;
  left: -32px;
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 24px 28px;
  max-width: 280px;
}
.sp-uueber-badge-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 10px;
}
.sp-uueber-badge-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.sp-uueber-badge-sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* Werte + Stärken: geteilte Karten (Nr, Icon 32, Titel 22) im 1px-Fugen-Grid */
.sp-uwerte-sec { padding: 96px 40px; border-top: 1px solid var(--border-soft); }
.sp-uwerte-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; margin-bottom: 56px; }
.sp-uwerte-sub { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin: 0; padding-top: 8px; }
.sp-uwerte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); }
.sp-ukarte { background: #FFFFFF; padding: 40px 32px; align-items: flex-start; }
.sp-ukarte-nr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-bottom: 18px; }
.sp-ukarte-icon { color: var(--sp-blue-500); display: flex; }
.sp-ukarte-titel { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--fg-1); margin-top: 24px; margin-bottom: 10px; letter-spacing: -0.005em; }
.sp-ukarte-text { font-size: 14px; color: var(--fg-3); line-height: 1.65; }

/* Fokus: 6 Zeilen-Kacheln mit Icon-Box */
.sp-ufokus-sec { padding: 96px 40px; background: var(--bg-alt); }
.sp-ufokus-h2 { margin-bottom: 16px; }
.sp-ufokus-sub { font-size: 17px; line-height: 1.7; color: var(--fg-3); margin: 0 0 56px; max-width: 720px; }
.sp-ufokus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); margin-bottom: 48px; }
.sp-ufokus-zelle { background: #FFFFFF; padding: 32px 28px; display: flex; flex-direction: row; align-items: center; gap: 18px; }
.sp-ufokus-iconbox {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-blue-500);
}
.sp-ufokus-label { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg-1); line-height: 1.3; letter-spacing: -0.005em; }

/* Stärken: Kopf 2-spaltig, 21/8-Bildband mit Navy-Verlauf, 3 Karten */
.sp-ustaerken-sec { padding: 120px 40px; }
.sp-ustaerken-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; margin-bottom: 64px; }
.sp-ustaerken-texte { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; align-items: stretch; }
.sp-ustaerken-text { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin: 0; }
.sp-ustaerken-band { position: relative; aspect-ratio: 21 / 8; overflow: hidden; margin-bottom: 64px; align-items: stretch; }
img.sp-ustaerken-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ustaerken-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 9, 51, 0.55), rgba(0, 9, 51, 0.15));
  pointer-events: none;
}
.sp-ustaerken-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); }

/* Geschichte: Timeline mit Punkten auf durchgehender Linie */
.sp-ugeschichte-sec { padding: 120px 40px; background: var(--bg-alt); }
.sp-ugesch-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px; margin-bottom: 64px; }
.sp-ugesch-zeitraum { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); text-align: right; }
.sp-ugesch-zeitstrahl { position: relative; align-items: stretch; }
/* top = Jahr 32px + Abstand 18px + halber Punkt 7px → Linie durch Punktmitte
   (Vorlage hatte hartkodiert 38px und verfehlte die Punkte ebenfalls) */
.sp-ugesch-linie { position: absolute; left: 0; right: 0; top: 57px; height: 1px; background: var(--border-soft); }
/* auto-fit statt fixer 5 — Anzahl Meilensteine kommt aus options.json (aktuell 6) */
.sp-ugesch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 24px; }
.sp-umeilenstein { position: relative; align-items: flex-start; }
.sp-umeilenstein-jahr { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1; margin-bottom: 18px; }
.sp-umeilenstein-punkt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sp-blue-500);
  box-shadow: 0 0 0 4px var(--bg-alt);
  position: relative;
  z-index: 1;
}
.sp-umeilenstein-titel { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg-1); margin-top: 24px; margin-bottom: 8px; line-height: 1.25; }
.sp-umeilenstein-text { font-size: 13px; color: var(--fg-3); line-height: 1.6; }

/* Standort: Navy mit Radial-Glow, Karte mit Pin + Koordinaten */
.sp-ustandort-sec { padding: 96px 40px; background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-ustandort-sec::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.25), transparent 70%);
  pointer-events: none;
}
.sp-ustandort { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sp-ustandort-h2 { margin-bottom: 32px; }
.sp-ustandort-info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.sp-ustandort-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-cyan-400);
  margin-bottom: 10px;
}
.sp-ustandort-adresse { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.sp-ustandort-links a { color: inherit; text-decoration: none; display: block; }
.sp-ustandort-links a:hover { color: var(--sp-cyan-400); }
.sp-ustandort-cta { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; }
.sp-ustandort-cta a.brxe-button.sp-btn--white { padding: 14px 24px; }
.sp-ustandort-cta a.brxe-button.sp-btn--ghost-light { padding: 12.5px 22.5px; }
.sp-ustandort-karte { position: relative; aspect-ratio: 4 / 3; overflow: hidden; align-items: stretch; }
img.sp-ustandort-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ustandort-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 9, 51, 0.5), rgba(0, 9, 51, 0.1));
  pointer-events: none;
}
.sp-ustandort-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.sp-ustandort-pin-kreis {
  width: 56px;
  height: 56px;
  background: var(--sp-blue-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 0 0 8px rgba(19, 177, 255, 0.25);
}
.sp-ustandort-koord {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 9, 51, 0.7);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  z-index: 1;
}

@media (max-width: 991px) {
  .sp-usubnav { top: 62px; padding: 0 24px; }
  /* Beschriftung verkleinern. Gemessen 2026-08-13: bei 12px/0.16em/18px-Padding
     brauchen die sechs Punkte 796px; ab etwa 830px Viewport passt das nicht
     mehr in den Container und die letzten Punkte laufen aus der Ansicht. */
  a.sp-usubnav-link { font-size: 11px; letter-spacing: 0.08em; gap: 6px; padding: 16px 10px; }
  .sp-usubnav-nr { font-size: 10px; }
  .sp-uueber-sec { padding: 88px 24px 72px; }
  .sp-uueber { grid-template-columns: 1fr; gap: 48px; }
  .sp-uwerte-sec, .sp-ufokus-sec, .sp-ustandort-sec { padding: 72px 24px; }
  .sp-ustaerken-sec, .sp-ugeschichte-sec { padding: 88px 24px; }
  .sp-uwerte-head, .sp-ustaerken-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .sp-uwerte, .sp-ufokus { grid-template-columns: repeat(2, 1fr); }
  .sp-ustaerken-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-ugesch-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .sp-ugesch-linie { display: none; }
  .sp-ustandort { grid-template-columns: 1fr; gap: 40px; }
}

/* SubNav unterhalb Tablet-Hochformat ausblenden (User-Wunsch 2026-08-13).
   Sechs Punkte nebeneinander sind unterhalb dieser Breite nicht mehr
   unterzubringen: Auch in der verkleinerten Fassung braucht die Leiste
   584px, es passt also nur bis etwa 632px Viewport (gemessen bei 600px:
   584px Inhalt auf 552px Platz = 32px Ueberstand). 767px statt eines
   knapperen Wertes, damit Schriftgroessen-Einstellungen und Zoom Luft haben;
   bei 768px bleiben 136px Reserve.
   Der Scroll-Abstand der Ankersektionen faellt entsprechend auf die reine
   Header-Hoehe zurueck - sonst klaffte ueber jedem Sprungziel die Luecke
   einer Leiste, die gar nicht da ist. */
@media (max-width: 767px) {
  .sp-usubnav { display: none; }
  #ueber-uns, #werte, #fokus, #staerken, #geschichte, #kontakt { scroll-margin-top: 78px; }
  #heizung, #lueftung, #kaelte, #sanitaer, #elektro,
  #beleuchtung, #msr, #sicherheit, #aufzug { scroll-margin-top: 84px; }
}

@media (max-width: 478px) {
  /* Die beiden folgenden Regeln sind derzeit wirkungslos - die Leiste ist
     hier ausgeblendet (s. o.). Sie bleiben wie .sp-hero-stats stehen, damit
     die Mobilfassung nicht neu erfunden werden muss, falls sie zurueckkommt. */
  .sp-usubnav { top: 62px; padding: 0 20px; }
  a.sp-usubnav-link { padding: 14px 12px; }
  .sp-uueber-sec { padding: 64px 20px 56px; }
  .sp-uwerte-sec, .sp-ufokus-sec, .sp-ustandort-sec { padding: 56px 20px; }
  .sp-ustaerken-sec, .sp-ugeschichte-sec { padding: 64px 20px; }
  .sp-uwerte, .sp-ufokus, .sp-ustaerken-grid, .sp-ugesch-grid { grid-template-columns: 1fr; }
  .sp-ustandort-info { grid-template-columns: 1fr; gap: 20px; }
  .sp-ustandort-cta a.brxe-button.sp-btn { width: 100%; justify-content: center; }
}

/* ================== Kontakt-Seite (#153) ================== */

/* Arrow-Up-Right-Variante (Anfahrt „Route planen") */
.sp-btn--arrow-ur::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>') no-repeat center / contain;
}

/* Hero: Telefon/Mail-Zeile unten im Panel */
.sp-kthero-links { display: flex; flex-direction: row; gap: 28px; margin-top: 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.sp-kthero-link a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: nowrap;
}
.sp-kthero-link a:hover { color: var(--sp-cyan-400); }
.sp-kthero-link svg { color: var(--sp-cyan-400); flex-shrink: 0; }

/* Formular: Sticky-Intro links, Bricks-Form rechts (Feld-Optik der Vorlage) */
.sp-ktform-sec { padding: 120px 40px; }
.sp-ktform { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.sp-ktform-intro { position: sticky; top: 96px; align-items: flex-start; }
.sp-ktform-h2 { margin-bottom: 24px; }
.sp-ktform-text { font-size: 16px; line-height: 1.7; color: var(--fg-2); margin-bottom: 32px; }
.sp-kttrust { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border-soft); align-self: stretch; }
.sp-kttrust-punkt { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg-2); }
.sp-kttrust-punkt svg { color: var(--sp-blue-500); flex-shrink: 0; }

form.brxe-form.sp-kform { gap: 20px 20px; width: 100%; max-width: 100%; }
/* Grid-Kinder dürfen nicht auf min-content aufweiten (Formular lief sonst über) */
.sp-ktform > * { min-width: 0; }
.sp-kform input, .sp-kform select, .sp-kform textarea { min-width: 0; }
/* Bricks setzt 50 % ohne Gap-Abzug → Paare brächen um. Kinder 2/3 = Vorname/
   Nachname, 5/6 = E-Mail/Telefon (Reihenfolge aus build-kontakt-page.js). */
.sp-kform > .form-group:nth-child(2),
.sp-kform > .form-group:nth-child(3),
.sp-kform > .form-group:nth-child(5),
.sp-kform > .form-group:nth-child(6) { width: calc(50% - 10px) !important; }
/* Bricks rendert Feld-Labels ohne eigene Klasse (nur .required) → direkter
   Kind-Selektor; .choose-files (Datei-Button) und Checkbox-Labels ausnehmen */
.sp-kform .form-group > label:not(.choose-files) {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.sp-kform .form-group > label.required::after { content: " *"; color: var(--sp-blue-500); }
.sp-kform input:not([type="checkbox"]):not([type="file"]):not([type="submit"]),
.sp-kform textarea,
.sp-kform select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.sp-kform input:not([type="checkbox"]):focus,
.sp-kform textarea:focus,
.sp-kform select:focus {
  border-color: var(--sp-blue-500);
  box-shadow: 0 0 0 3px rgba(19, 177, 255, 0.12);
}
.sp-kform textarea { min-height: 160px; resize: vertical; }
/* Datei-Anhang: Bone-Zeile mit Büroklammer (Vorlagen-Optik).
   DERZEIT WIRKUNGSLOS — das Upload-Feld wurde am 2026-08-13 auf User-Entscheid
   aus dem Formular entfernt, es gibt kein .choose-files mehr im Markup.
   Bleibt stehen wie .sp-hero-stats und .sp-strow-cat, damit die Optik nicht
   neu erfunden werden muss, falls der Upload je zurückkommt. Dann zusätzlich
   SP_FORM_DATEIEN_ERLAUBT in solidplan-formschutz.php auf true setzen. */
.sp-kform .choose-files {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-alt);
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
}
.sp-kform .choose-files::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--sp-blue-500);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.234 20.252 21 12.3"/><path d="m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.234 20.252 21 12.3"/><path d="m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/></svg>') no-repeat center / contain;
}
/* DSGVO-Checkbox */
.sp-kform .options-wrapper { list-style: none; padding: 0; margin: 0; }
.sp-kform .options-wrapper li { display: flex; align-items: flex-start; gap: 12px; }
.sp-kform .options-wrapper input[type="checkbox"] { width: auto; margin-top: 4px; }
.sp-kform .options-wrapper label { font-size: 13px; line-height: 1.6; color: var(--fg-3); cursor: pointer; }
.sp-kform .options-wrapper label a { color: var(--sp-blue-600); }
/* Absenden-Button */
.sp-kform button[type="submit"] {
  background: var(--sp-navy-700);
  color: #FFFFFF;
  padding: 18px 32px;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background-color 200ms var(--ease-standard);
}
.sp-kform button[type="submit"]:hover { background: var(--sp-navy-600); }
.sp-kform button[type="submit"]::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') no-repeat center / contain;
}

/* Anfahrt: wie Unternehmen-Standort, Glow oben rechts, eigene Info-Blöcke */
.sp-ktanfahrt-sec { padding: 96px 40px; background: var(--sp-navy-700); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-ktanfahrt-sec::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 177, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.sp-ktanfahrt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.sp-ktanfahrt-bloecke { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; align-items: stretch; }
.sp-ktanfahrt-adresse { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.9); }
.sp-ktanfahrt-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sp-ktanfahrt-detail { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); }
a.brxe-button.sp-ktanfahrt-btn { padding: 14px 24px; align-self: flex-start; }

/* FAQ: schmale 920px-Spalte, Akkordeon mit Linien (erste Frage offen) */
.sp-ktfaq-sec { padding: 120px 40px; }
.sp-ktfaq { max-width: 920px; margin: 0 auto; width: 100%; align-items: stretch; }
.sp-ktfaq-h2 { margin-bottom: 48px; }
.sp-ktfrage { border-bottom: 1px solid var(--border-soft); }
.sp-ktfrage:first-child { border-top: 1px solid var(--border-soft); }
.sp-ktfrage-kopf {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.sp-ktfrage-toggle { color: var(--sp-blue-500); display: flex; flex-shrink: 0; }
.sp-ktfrage .sp-ktfrage-icon-minus { display: none; }
.sp-ktfrage.offen .sp-ktfrage-icon-minus { display: block; }
.sp-ktfrage.offen .sp-ktfrage-icon-plus { display: none; }
.sp-ktfrage-antwort { display: none; padding-bottom: 24px; font-size: 15px; line-height: 1.7; color: var(--fg-2); max-width: 760px; }
.sp-ktfrage.offen .sp-ktfrage-antwort { display: block; }

@media (max-width: 991px) {
  .sp-ktform-sec, .sp-ktfaq-sec { padding: 88px 24px; }
  .sp-ktanfahrt-sec { padding: 72px 24px; }
  .sp-ktform { grid-template-columns: 1fr; gap: 40px; }
  .sp-ktform-intro { position: static; }
  .sp-ktanfahrt { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 478px) {
  .sp-ktform-sec, .sp-ktfaq-sec { padding: 64px 20px; }
  .sp-ktanfahrt-sec { padding: 56px 20px; }
  .sp-ktanfahrt-details { grid-template-columns: 1fr; }
  .sp-kthero-links { flex-direction: column; gap: 14px; }
  /* Mobil stapeln die 50%-Feldpaare (User-Entscheid) */
  .sp-kform > .form-group:nth-child(2),
  .sp-kform > .form-group:nth-child(3),
  .sp-kform > .form-group:nth-child(5),
  .sp-kform > .form-group:nth-child(6) { width: 100% !important; }
  .sp-kform button[type="submit"] { width: 100%; justify-content: center; }
  a.brxe-button.sp-ktanfahrt-btn { width: 100%; justify-content: center; }
}

/* ============ Rechtsseiten Impressum/Datenschutz (#154/#155, WP-Mode) ============ */

/* Schmale 760px-Textspalte im Site-Design (Vorlage war eine ungestylte
   Standalone-Seite mit System-Font — hier bewusst ins Design-System geholt).
   Top-Padding = fixer Header (79px) + ~88px Abstand der Vorlage. */
.sp-recht {
  max-width: 760px;
  margin: 0 auto;
  padding: 168px 40px 120px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
}
.sp-recht-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-blue-600);
  margin-bottom: 16px;
}
.sp-recht h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 48px;
}
.sp-recht h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--fg-1); margin: 40px 0 16px; }
/* Tiefere Gliederung der ausführlichen Datenschutzerklärung (alte Site) */
.sp-recht h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); margin: 32px 0 12px; }
.sp-recht h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--fg-1); margin: 24px 0 10px; }
.sp-recht a { overflow-wrap: anywhere; }
.sp-recht p, .sp-recht address { margin: 0 0 14px; font-style: normal; }
.sp-recht a { color: var(--sp-blue-600); text-decoration: underline; text-underline-offset: 4px; }
.sp-recht a:hover { color: var(--sp-navy-700); }
.sp-recht ul { margin: 0 0 14px; padding-left: 22px; }
.sp-recht li { margin-bottom: 6px; }

@media (max-width: 991px) {
  .sp-recht { padding: 150px 24px 88px; }
}

@media (max-width: 478px) {
  .sp-recht { padding: 140px 20px 64px; }
}

/* ============ Navigation: „Kontakt" nur im Hamburger-Panel ============ */
/* Desktop zeigt rechts den Kontakt-Button — der Menüpunkt (WP-Menü-Klasse
   nur-mobil) bleibt der Desktop-Liste fern, im Mobile-Panel sichtbar. */
#brx-header ul.bricks-nav-menu > li.nur-mobil { display: none; }

/* ---------- Projekt-Detail: Galerie (Vorlage Gallery, zwischen Gewerke
   und Highlights; rendert nur bei angehängten Bildern — Code-Element) --- */

/* Oben (User 2026-08-09): Gewerke→Galerie = 96px @Desktop, gebaut aus
   gekürztem Gewerke-padding-bottom (nur wenn Galerie folgt, :has) + 24px
   Galerie-padding-top. Dort wechselt die Hintergrundfarbe nicht, ein reiner
   Weißraum von 96px ist also richtig.

   Unten (Korrektur 2026-08-19): stand vorher auf 0, weil die 96px aus dem
   padding-top der Highlights kommen sollten. Die Highlights liegen aber auf
   --bg-alt, der Farbwechsel setzte damit unmittelbar an der Unterkante der
   letzten Kachelreihe an — die Galerie klebte sichtbar an der Folgesektion.
   An jeder anderen Farbkante der Seite (Highlights→CTA→Related) stehen 96px
   auf beiden Seiten der Kante; die Galerie folgt jetzt derselben Regel,
   indem das padding-bottom von .sp-psec wieder greift (96/72/56). */
.sp-pgal-sec { background: var(--bg-page); padding-top: 24px; }
.sp-pgewerke-sec:has(+ .sp-pgal-sec) { padding-bottom: 72px; }
@media (max-width: 991px) {
  .sp-pgewerke-sec:has(+ .sp-pgal-sec) { padding-bottom: 48px; }
}
@media (max-width: 478px) {
  .sp-pgewerke-sec:has(+ .sp-pgal-sec) { padding-bottom: 32px; }
}
.sp-pgal-inner { max-width: 1320px; margin: 0 auto; }
.sp-pgal-head { margin-bottom: 48px; }
.sp-pgal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sp-pgal-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  background: var(--sp-navy-700);
}
.sp-pgal-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 500ms var(--ease-standard);
}
.sp-pgal-tile:hover .sp-pgal-img { transform: scale(1.05); }
.sp-pgal-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 9, 51, 0.7) 100%);
  pointer-events: none;
}
.sp-pgal-meta {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
/* .sp-pgal-cap wird seit 2026-08-12 NICHT mehr gerendert (User-Entscheid: die
   Kachel-Beschriftung war auf jeder Kachel der Projekttitel und damit ohne
   Informationswert). Regel bleibt stehen wie .sp-hero-stats und .sp-strow-cat,
   falls je echte Bildunterschriften kommen. In der Lightbox laeuft die
   Beschriftung weiter (.sp-pgal-lb-cap). */
.sp-pgal-cap { font-family: var(--font-mono); font-size: 11px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
/* Steht jetzt allein auf der Kachel und traegt die Lesbarkeit ueber dem Foto,
   deshalb volles Weiss + Schatten statt vorher 0.7 ohne. Durch das
   space-between des Elternteils rutscht der Zaehler auf die linke Seite -
   passt zum Haus-Muster, wo Mono-Zahlen Index-Marker am Anfang sind. */
.sp-pgal-nr { font-family: var(--font-mono); font-size: 10px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

/* Lightbox (Overlay wie Vorlage: navy 0.92 + blur, Pfeile/Schließen 44px) */
.sp-pgal-lb {
  position: fixed;
  inset: 0;
  background: rgba(0, 9, 51, 0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  backdrop-filter: blur(8px);
}
.sp-pgal-lb[hidden] { display: none; }
.sp-pgal-lb-btn {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-pgal-lb-btn:hover { border-color: rgba(255, 255, 255, 0.7); }
.sp-pgal-lb-close { top: 24px; right: 24px; }
.sp-pgal-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.sp-pgal-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.sp-pgal-lb-wrap { max-width: 1200px; width: 100%; }
.sp-pgal-lb-wrap img { width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.sp-pgal-lb-foot {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 991px) {
  .sp-pgal { grid-template-columns: repeat(2, 1fr); }
  .sp-pgal-lb { padding: 24px; }
  .sp-pgal-lb-prev { left: 12px; }
  .sp-pgal-lb-next { right: 12px; }
}
@media (max-width: 478px) {
  .sp-pgal { grid-template-columns: 1fr; }
}