/* =========================================================================
   MEDIAMO – Stylesheet
   Aufbau:  1 Tokens · 2 Basis · 3 Layout · 4 Header · 5 Hero · 6 Kompetenzen
            7 Prozess · 8 Textblöcke · 9 Kachelraster · 10 Kompetenzseite
            11 Footer · 12 Unterseiten · 13 Responsive
   ========================================================================= */

/* --- 1 Tokens ---------------------------------------------------------- */
:root {
  /* Farben – bitte vom Grafiker gegenprüfen lassen */
  --c-dark:        #134c57;   /* Footer, dunkle Flächen */
  --c-teal:        #1a5c68;   /* Ziffern-Badges */
  --c-head:        #0f5268;   /* Überschriften – Vorgabe Grafiker */
  --c-head-deep:   #0f5268;   /* Überschriften auf hellem Panel – Vorgabe Grafiker */
  --c-ink:         #33525c;   /* Fließtext */
  --c-ink-soft:    #5d7c88;   /* Sekundärtext */
  --c-panel-blue:  #e6f1f5;
  --c-panel-blue2: #d8e9ef;
  --c-panel-green: #eef4e5;
  --c-line:        #cfe0e6;
  --c-accent:      #9aab7e;   /* olivgrüner Akzentstrich */
  --c-paper:       #ffffff;

  /* Typo */
  --f-sans: "Mediamo Sans", "Jost", "Futura", "Century Gothic",
            "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Raster */
  --wrap: 1240px;
  --gut: 24px;
  --gap: 20px;
}

/* Eigene Schrift: Dateien vom Grafiker in assets/fonts/ ablegen und
   die folgenden Blöcke aktivieren. Bis dahin greift der Fallback oben.

@font-face {
  font-family: "Mediamo Sans";
  src: url("../fonts/mediamo-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mediamo Sans";
  src: url("../fonts/mediamo-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mediamo Sans";
  src: url("../fonts/mediamo-medium.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.2; }

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kleine Auszeichner ---------------------------------------------------- */
.eyebrow {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-head);
  margin: 0 0 .9em;
}
/* Steht die Kleinzeile unter der Überschrift, wandert der Abstand nach oben.
   Der Strich sitzt dann an ihr und nicht an der Überschrift, sonst stünde er
   zwischen beiden Zeilen. */
.eyebrow--unten { margin: .7em 0 0; }
.eyebrow--unten.rule::after { margin: 16px 0 20px; }

/* Der kurze Strich unter den Überschriften im Konzept */
.rule::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin: 14px 0 18px;
  background: currentColor;
  opacity: .55;
}
/* Auf den Leistungskacheln setzt der Entwurf ihn olivgrün ab */
.service__title.rule::after {
  width: 22px;
  height: 2px;
  background: var(--c-accent);
  opacity: 1;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.link-arrow::after { content: "\2197"; font-size: 1.05em; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- 3 Layout ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: 84px; }
.section--tight { padding-block: 52px; }

/* --- 4 Header ---------------------------------------------------------- */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-block: 26px;
  color: #fff;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
}
.brand__signet { height: 23px; width: auto; }
.brand__word { height: 30px; width: auto; }

.nav { margin-left: auto; }

/* Kontaktblock, Untermenü, Symbole und Schließen-Kreuz gehören nur
   ins mobile Panel. Die Auswahl ist bewusst spezifisch, damit sie
   nicht von einer genaueren Regel überschrieben wird. */
.nav__meta,
.nav .nav__group-toggle,
.nav .nav__sub,
.nav__list svg,
.nav__lang,
.nav__close { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .84rem;
  letter-spacing: .04em;
}
/* Trennstriche zwischen den Menüpunkten wie im Entwurf */
.nav__list li + li::before {
  content: "|";
  margin-right: 18px;
  opacity: .55;
}
.nav__list a { padding-block: 6px; }
.nav__list a:hover,
.nav__list a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
}

.lang {
  display: flex;
  gap: 8px;
  font-size: .82rem;
  letter-spacing: .08em;
  flex: none;
}
.lang a[aria-current="true"] { border-bottom: 1px solid currentColor; }
.lang span { opacity: .5; }

.burger {
  display: none;
  margin-left: auto;
  width: 40px; height: 34px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1px;
  margin: 8px 0;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* --- 5 Hero (Startseite: Standbild, kein Video mehr) ------------------------------------------------------------ */
.hero {
  position: relative;
  /* Das Titelbild hat ein Verhältnis von etwa 1920:1010, also 53 % der Breite.
     Dadurch wird es auf breiten Bildschirmen vollständig gezeigt statt beschnitten. */
  min-height: clamp(620px, 53vw, 1000px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero--sub { min-height: clamp(360px, 30vw, 560px); }

/* Unterseiten tragen keinen Text im Bild – abgedunkelt wird nur der
   obere Rand, damit Logo und Menü lesbar bleiben. */
.hero--sub .hero__media::after {
  background: linear-gradient(to bottom,
              rgba(10, 44, 53, .55) 0%,
              rgba(10, 44, 53, .18) 26%,
              rgba(10, 44, 53, 0) 46%);
}

/* Motive mit Personen: höherer Bildbereich, damit das Motiv nicht
   überproportional wirkt, und Ausschnitt leicht nach oben gezogen. */
.hero--face { min-height: clamp(360px, 42vw, 760px); }
.hero--face .hero__media img { object-position: center 20%; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture {
  display: block;
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Hält den Text lesbar, ohne das Bild abzudunkeln.
   Bewusst zurückhaltend – die Lesbarkeit trägt zusätzlich der Textschatten. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(10, 44, 53, .48) 0%,
              rgba(10, 44, 53, .22) 46%,
              rgba(10, 44, 53, 0) 76%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 140px 90px;
}

.hero__title {
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  line-height: 1.14;
  max-width: 16ch;
  margin-bottom: 26px;
  text-shadow: 0 1px 22px rgba(8, 38, 46, .55);
}

.hero__quote {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 1px 16px rgba(8, 38, 46, .6);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: 30px;
  padding: 13px 24px;
  background: var(--c-teal);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--c-teal);
  transition: background .2s ease, color .2s ease;
}
.btn::after { content: "\2197"; }
.btn:hover { background: transparent; color: #fff; border-color: #fff; }

/* --- 6 Kompetenzen (Startseite) ---------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-panel-blue);
  padding: 34px 30px 32px;
  height: 100%;
  color: inherit;
  transition: box-shadow .28s ease, transform .28s ease;
}
.pillar--green { background: var(--c-panel-green); }

/* Feine Akzentlinie, die erst bei Kontakt erscheint */
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.pillar:hover, .pillar:focus-visible {
  box-shadow: 0 16px 38px rgba(14, 59, 68, .12);
  transform: translateY(-3px);
}
.pillar:hover::before, .pillar:focus-visible::before { transform: scaleX(1); }

.pillar__title {
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-head);
}
.pillar__title.rule::after {
  width: 26px;
  height: 2px;
  margin: 14px 0 22px;
  background: var(--c-accent);
  opacity: 1;
}

.pillar__lead {
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-head-deep);
  margin-bottom: 26px;
}

/* Bild mit überlappender Ziffer */
.pillar__media {
  position: relative;
  margin-top: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pillar__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pillar:hover .pillar__media img { transform: scale(1.04); }

/* Die Kontaktkachel ist am Rechner sehr breit und am Handy fast quadratisch.
   Ein etwas höher gesetzter Ausschnitt hält in beiden Fällen die Gesichter
   im Bild, statt sie im Querformat oben abzuschneiden. */
.tile--cta .tile__media img { object-position: center 30%; }

/* Zusätzlich ein Verlauf von links: der Text steht sonst unmittelbar auf
   dem Gesicht im Bild. */
.tile--cta .tile__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
              rgba(10, 44, 53, .70) 0%,
              rgba(10, 44, 53, .42) 38%,
              rgba(10, 44, 53, .10) 68%,
              rgba(10, 44, 53, 0) 100%);
}
.tile--cta .tile__media::after { z-index: 1; }

.pillar__num {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 52px;
  background: var(--c-teal);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .06em;
}

.pillar__more {
  margin-top: 22px;
  color: var(--c-head-deep);
}
.pillar:hover .pillar__more { text-decoration: underline; text-underline-offset: 4px; }

/* Die vier Kacheln laufen beim Erreichen nacheinander ein.
   Greift nur, wenn JavaScript aktiv ist – sonst steht alles sofort da. */
.js .pillars .pillar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .28s ease;
}
.js .pillars .pillar.is-visible { opacity: 1; transform: none; }
.js .pillars .pillar:nth-child(2) { transition-delay: .09s; }
.js .pillars .pillar:nth-child(3) { transition-delay: .18s; }
.js .pillars .pillar:nth-child(4) { transition-delay: .27s; }
.js .pillars .pillar.is-visible:hover,
.js .pillars .pillar.is-visible:focus-visible { transform: translateY(-3px); }

/* --- Entwicklungen (Startseite) ----------------------------------------- */
/* Aufbau nach Entwurf: Überschrift, darunter ein breiter Aufmacher
   (Bild links, Textfeld rechts), darunter vier gleichwertige Karten.
   Alle Kästen sind vollflächig anklickbar. */

.devhead { margin-bottom: 34px; }

.devhead__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 300;
  color: var(--c-head);
}

.devhead__claim {
  margin: 8px 0 0;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}

/* Aufmacher – vierspaltiges Raster wie die Kacheln darüber, damit die
   Trennlinien über den ganzen Abschnitt hinweg fluchten. */
.devlead {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
  color: inherit;
  transition: transform .28s ease;
}

.devlead__media {
  position: relative;
  grid-column: span 2;
  min-height: 320px;
  overflow: hidden;
}
.devlead__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.devlead__text {
  position: relative;
  grid-column: span 2;
  background: var(--c-panel-blue);
  padding: 46px 48px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.devlead__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-head);
}

.devlead__claim {
  margin: 8px 0 0;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-head-deep);
}
.devlead__claim.rule::after {
  width: 26px;
  height: 2px;
  margin: 16px 0 22px;
  background: var(--c-accent);
  opacity: 1;
}

.devlead__text p { max-width: 56ch; font-size: .96rem; }
.devlead__more { margin-top: 14px; color: var(--c-head-deep); }

/* Vier Karten */
.devcards {
  margin-top: var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

/* Fünf Kästen nebeneinander. Bei rund 222 px je Kasten wird die
   Überschrift etwas kleiner gesetzt, sonst braucht sie vier Zeilen. */
.devcards--fuenf { grid-template-columns: repeat(5, 1fr); }
.devcards--fuenf .devcard { padding: 30px 24px 28px; }
.devcards--fuenf .devcard__title { font-size: .92rem; letter-spacing: .08em; }
.devcards--fuenf .devcard__lead { font-size: .88rem; }
.devcards--fuenf .devcard__arrow { top: 14px; right: 14px; }
.devcards--fuenf .devcard__title { padding-right: 22px; }

.devcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-panel-blue);
  padding: 34px 30px 32px;
  height: 100%;
  color: inherit;
  transition: transform .28s ease, box-shadow .28s ease;
}

.devcard__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-head);
  hyphens: auto;
  padding-right: 26px;   /* Platz für den Pfeil oben rechts */
}
.devcard__title.rule::after {
  width: 26px;
  height: 2px;
  margin: 14px 0 18px;
  background: var(--c-accent);
  opacity: 1;
}

.devcard__lead {
  margin: 0 0 26px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.devcard__media {
  position: relative;
  margin-top: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.devcard__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Feine Akzentlinie oben, erscheint erst bei Kontakt – wie bei den
   Kompetenzkacheln, damit die Startseite eine Handschrift behält. */
.devlead__text::before,
.devcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}

/* Pfeil als zusätzlicher Hinweis, dass der Kasten ein Link ist */
.devlead__arrow,
.devcard__arrow {
  position: absolute;
  top: 16px; right: 18px;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-teal);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .3s ease, transform .3s ease;
}

/* Verhalten bei Maus und Tastatur */
.devlead__media, .devlead__text { transition: box-shadow .28s ease; }
.devlead:hover, .devlead:focus-visible { transform: translateY(-3px); }
.devlead:hover .devlead__media,
.devlead:hover .devlead__text,
.devlead:focus-visible .devlead__media,
.devlead:focus-visible .devlead__text {
  box-shadow: 0 16px 38px rgba(14, 59, 68, .12);
}
.devcard:hover, .devcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(14, 59, 68, .12);
}

.devlead:hover .devlead__media img,
.devlead:focus-visible .devlead__media img { transform: scale(1.04); }
.devcard:hover .devcard__media img,
.devcard:focus-visible .devcard__media img { transform: scale(1.05); }

.devlead:hover .devlead__text::before,
.devlead:focus-visible .devlead__text::before,
.devcard:hover::before,
.devcard:focus-visible::before { transform: scaleX(1); }

.devlead:hover .devlead__arrow,
.devlead:focus-visible .devlead__arrow,
.devcard:hover .devcard__arrow,
.devcard:focus-visible .devcard__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.devlead:hover .devlead__more { text-decoration: underline; text-underline-offset: 4px; }

/* Einlaufen beim Scrollen, gestaffelt wie bei den Kompetenzkacheln */
.js .devcards .devcard {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .28s ease;
}
.js .devcards .devcard.is-visible { opacity: 1; transform: none; }
.js .devcards .devcard:nth-child(2) { transition-delay: .09s; }
.js .devcards .devcard:nth-child(3) { transition-delay: .18s; }
.js .devcards .devcard:nth-child(4) { transition-delay: .27s; }
.js .devcards .devcard:nth-child(5) { transition-delay: .36s; }
.js .devcards .devcard.is-visible:hover,
.js .devcards .devcard.is-visible:focus-visible { transform: translateY(-4px); }

/* --- 8 Textblock mit Bild --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

.split__text {
  background: var(--c-panel-blue);
  padding: 40px 44px;
}

.split__media { position: relative; min-height: 320px; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--c-teal);
  margin-bottom: 24px;
}
.mark img { width: 24px; }

.block-title {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}

/* --- 9 Kachelraster ---------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 210px;
  padding: 26px;
  background: var(--c-dark);
  color: #fff;
  overflow: hidden;
}
.tile--label { justify-content: flex-start; }
.tile--wide { grid-column: span 2; }
.tile--full { grid-column: span 4; }

.tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(10, 44, 53, .62) 0%,
              rgba(10, 44, 53, .16) 58%,
              rgba(10, 44, 53, 0) 100%);
}
a.tile:hover .tile__media img { transform: scale(1.04); }

/* Der Text steht jetzt oben, deshalb dunkelt der Verlauf von oben ab. */
.tile--cta .tile__media::after {
  background: linear-gradient(to bottom,
              rgba(10, 44, 53, .74) 0%,
              rgba(10, 44, 53, .34) 58%,
              rgba(10, 44, 53, .06) 100%);
}

.tile__body { position: relative; z-index: 1; }

.tile__name {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
a.tile .tile__name,
a.tile .tile__place { text-shadow: 0 1px 14px rgba(8, 38, 46, .7); }
.tile__place {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c2dde2;
}
.tile__text {
  font-size: .88rem;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 0;
}
.tile .link-arrow { margin-top: 18px; }

/* Breite Kachel mit Bild, Text und Schaltfläche */
.tile--cta {
  justify-content: flex-start;
  min-height: 330px;
  padding: 40px 40px 38px;
}
.tile--cta .tile__body { max-width: 46ch; }
.tile--cta .tile__name { font-size: 1.05rem; }
.tile--cta .tile__text {
  margin-bottom: 0;
  text-shadow: 0 1px 14px rgba(8, 38, 46, .65);
}
.tile--cta .tile__name { text-shadow: 0 1px 14px rgba(8, 38, 46, .65); }
.tile--cta .btn { margin-top: 24px; }

/* Helle Ausführung der Schaltfläche, gut lesbar auf Fotos */
.btn--light {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, .94);
  color: var(--c-teal);
}
.btn--light:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* --- 10 Kompetenz-Unterseite ---------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.page-head__num {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  flex: none;
  background: var(--c-teal);
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: .06em;
}
.page-head__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--c-head);
  letter-spacing: .04em;
}
.page-head__claim {
  margin: 12px 0 0;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-head-deep);
  /* Hier stand `max-width: 40ch`. Die Einheit ch misst die Breite der Ziffer
     Null, rund 0,5 em. Diese Zeile steht aber in Versalien mit 0,1 em Sperrung
     und braucht rund 0,72 em je Zeichen – in 40ch passten also nur etwa 28
     Zeichen statt 40. Die Kleinzeile von Health Transformation hat 71 Zeichen
     und brach dadurch auf drei Zeilen um, obwohl rechts über 1000 px frei waren.

     Jetzt 1100 px und 0,95 rem. Damit steht auch die längste Kleinzeile
     (Kontakt, 92 Zeichen) auf einer Zeile: Sie braucht rund 1007 px, neben der
     Ziffer stehen 1084 zur Verfügung. Bei der früheren Größe von 1,02 rem
     wären es 1080 px gewesen – vier Pixel Luft, also zu knapp. */
  max-width: 1100px;
}

.page-head__sub {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink);
}

.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.service {
  display: grid;
  grid-template-columns: 1fr 46%;
  background: var(--c-panel-blue);
  min-height: 240px;
}

.service__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 28px;
}
.service__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.service__text p {
  font-size: .9rem;
  margin-bottom: 0;
}
.service__media { position: relative; }

/* Illustrationen vollständig zeigen statt beschneiden */
.service__media--illu { background: #fff; }
.service__media--illu img { object-fit: contain; padding: 14px; }
.service__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Praxisbeispiel am Ende der Kompetenzseiten */
.case {
  display: grid;
  grid-template-columns: 1fr 46%;
  background: var(--c-panel-blue);
  align-items: center;
}
.case--offen { grid-template-columns: 1fr; }
.case__text { padding: 40px 44px; }
.case__title {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--c-head-deep);
}
.case__text p { max-width: 60ch; }
.case__text .btn { margin-top: 14px; }
.case__hinweis {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: .9rem;
  color: var(--c-ink-soft);
}
.case__media { position: relative; min-height: 300px; align-self: stretch; }
.case__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Teaser auf die übrigen Kompetenzen */
.teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.teaser {
  position: relative;
  display: block;
  background: var(--c-panel-blue);
  padding: 26px 26px 30px;
  transition: background .2s ease;
}
.teaser--green { background: var(--c-panel-green); }
.teaser:hover { filter: brightness(.97); }

.teaser__num {
  position: absolute;
  top: 22px; right: 22px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--c-teal);
  color: #fff;
  font-size: .72rem;
}
.teaser__title {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
  padding-right: 44px;
}
.teaser p {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-head-deep);
  margin-bottom: 0;
}

/* --- 11 Footer --------------------------------------------------------- */
.footer {
  background: var(--c-dark);
  color: #d9e8eb;
  font-size: .82rem;
  padding-block: 46px 30px;
}

.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 52px;
  color: #fff;
}
.footer__brands img { height: 38px; width: auto; }
.footer__brands span {
  width: 1px; height: 30px;
  background: rgba(255, 255, 255, .3);
}

.footer__insight { margin-left: auto; text-align: right; }
.footer__insight strong {
  display: block;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}
.footer__insight a { letter-spacing: .1em; text-transform: uppercase; }

.footer__mid {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  padding-block: 30px;
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, auto));
  gap: 6px 60px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #b9d0d5;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* --- 12 Einfache Inhaltsseiten ---------------------------------------- */
/* Symbol statt Ziffer im Seitenkopf */
.page-head__num svg { width: 34px; height: 34px; stroke: currentColor; }

/* Kontaktseite */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
.contact__panel {
  background: var(--c-panel-blue);
  padding: 40px 44px;
}
.contact__media { position: relative; min-height: 340px; }
.contact__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.contact__list { margin: 0; }
.contact__list dt {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-head);
  margin-bottom: 4px;
}
.contact__list dd { margin: 0 0 22px; font-size: 1.02rem; line-height: 1.6; }
.contact__list dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact__actions { margin: 8px 0 0; }
.contact__actions .btn { margin-top: 0; }

.contact__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.contact__card { background: var(--c-panel-blue); padding: 30px 28px; }
.contact__card-title {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.contact__card p { font-size: .9rem; margin-bottom: 0; }
.contact__card a { text-decoration: underline; text-underline-offset: 3px; }

/* Projekte – Aufbau wie in der Präsentation: Text links, Bild
   auf dunkler Fläche rechts */
.projects { display: grid; gap: 72px; }

.project {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 0;
  align-items: center;
}

.project__text {
  padding: 44px 48px 44px 0;
  align-self: center;
}
.project__title {
  font-size: 1.28rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--c-head);
}
.project__role {
  margin: 0 0 20px;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}

.project__list { margin: 0; }
.project__list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 18px;
  font-size: .92rem;
  line-height: 1.6;
}
.project__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

.project__figure {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.project__figure dt {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-head);
  margin-bottom: 6px;
}
.project__figure dd {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 300;
  color: var(--c-head-deep);
}

.project__media {
  background: none;
  padding: 0 0 0 28px;
}
.project__frame { display: grid; gap: 12px; }
.project__frame > img { width: 100%; height: auto; }
.project__thumbs {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
}
.project__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.benefit { background: var(--c-panel-blue); padding: 28px 26px 32px; }
.benefit:nth-child(even) { background: var(--c-panel-green); }
.benefit__title {
  font-size: .98rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.benefit p { font-size: .89rem; margin-bottom: 0; }

/* Stellenangebote */
/* Die Stellen stehen als durchgehende Liste mit feinen Trennlinien, nicht als
   Reihe gleicher Kästen. Das liest sich als Liste und spart Höhe. */
.jobs {
  display: block;
  border-top: 1px solid rgba(10, 44, 53, .16);
}
.jobs__hinweis {
  margin: 0 0 4px;
  font-size: .88rem;
  color: var(--c-ink-soft);
}
.job {
  display: block;
  background: none;
  padding: 0;
  border-bottom: 1px solid rgba(10, 44, 53, .16);
  transition: background .28s ease;
}
.job:hover { background: rgba(230, 241, 245, .55); }

/* Titel und Satz links, das Plus rechts – alles auf einer Zeile. */
.job__toggle {
  display: grid;
  grid-template-columns: 1fr 26px;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 26px 26px 26px 22px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--c-head-deep);
}
.job:hover { box-shadow: 0 14px 34px rgba(14, 59, 68, .1); }

.job__title {
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.job__claim {
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-head-deep);
}
.job__meta {
  margin: 8px 0 0;
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
}

.job__toggle::after {
  content: "+";
  justify-self: end;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--c-head);
  transition: transform .3s ease;
}
.job.is-open .job__toggle::after { transform: rotate(45deg); }
.job.is-open .job__toggle::after { content: "\2013"; transform: rotate(180deg); }

.job__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22, .61, .36, 1);
}
.job__body-inner { min-height: 0; overflow: hidden; }
.job.is-open .job__body { grid-template-rows: 1fr; }
.job__body p { font-size: .93rem; max-width: 78ch; }
.job__body-inner > p:first-child { padding-top: 22px; }

.job__subtitle {
  margin: 26px 0 8px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.job__list { margin: 0 0 6px; }
.job__list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: .93rem;
  line-height: 1.65;
}
.job__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}
.job__body-inner > h4:first-child { padding-top: 22px; }

.job__apply { margin: 22px 0 4px !important; }
.job__apply .link-arrow { color: var(--c-head-deep); }

/* Abschlussblock */
.cta {
  background: var(--c-panel-blue);
  padding: 44px 48px;
}
.cta p { max-width: 70ch; }
.cta .btn { margin-top: 0; }

.page-intro {
  max-width: 62ch;
  font-size: 1.02rem;
}
.page-intro h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--c-head);
  margin-bottom: 18px;
}

.note {
  background: var(--c-panel-blue);
  padding: 26px 28px;
  margin-top: 34px;
  font-size: .92rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 34px;
}
.contact-grid > div {
  background: var(--c-panel-blue);
  padding: 26px 28px;
}
.contact-grid dt {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head-deep);
  margin-bottom: 4px;
}
.contact-grid dd { margin: 0 0 16px; }
.contact-grid dd:last-child { margin-bottom: 0; }


/* Seiten ohne Titelbild: Kopfbereich braucht eigene Fläche */
.page--article .header { background: var(--c-dark); }

/* --- News & Insights ---------------------------------------------------- */
.newslist { display: grid; gap: var(--gap); }

.newscard {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  background: var(--c-panel-blue);
  transition: box-shadow .28s ease, transform .28s ease;
}
.newscard:hover { box-shadow: 0 16px 38px rgba(14, 59, 68, .12); transform: translateY(-2px); }

.newscard__media { position: relative; min-height: 220px; overflow: hidden; }
.newscard__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Auf Gruppenfotos sitzen die Gesichter im oberen Bilddrittel –
     der Ausschnitt wird deshalb nach oben gezogen. */
  object-position: center 18%;
  transition: transform .6s ease;
}
.newscard:hover .newscard__media img { transform: scale(1.04); }

/* Logos statt Fotos: vollständig zeigen statt formatfüllend beschneiden */
.newscard__media--portrait img { object-position: center top; }
.newscard__media--logo { background: #fff; }
.newscard__media--logo img { object-fit: contain; padding: 26px; }
.newscard:hover .newscard__media--logo img { transform: none; }
.article__figure--logo img { border: 1px solid var(--c-line); }

.newscard__text { padding: 32px 34px; align-self: center; }
.newscard__meta {
  margin: 0 0 12px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.newscard__meta span { opacity: .55; margin: 0 8px; }
.newscard__meta time { font-variant-numeric: tabular-nums; }

.newscard__title {
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-head-deep);
}
.newscard__teaser {
  margin: 14px 0 0;
  font-size: .93rem;
  max-width: 62ch;
}
.newscard .link-arrow { margin-top: 18px; color: var(--c-head-deep); }

/* Beitragsseite */
.article-head { padding-top: 180px; padding-bottom: 34px; background: var(--c-panel-blue); }
.article__meta {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-head);
}
.article__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article__meta span { opacity: .5; margin: 0 6px; }
.article__title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.25;
  color: var(--c-head-deep);
  /* Hier stand `24ch`. Die Einheit misst die Breite der Ziffer Null; bei
     gemischter Schreibweise ist ein Zeichen im Mittel ähnlich breit, aber
     die Überschriften haben bis zu 79 Zeichen – daraus wurden vier Zeilen.
     720 px fassen rund 40 Zeichen, also höchstens zwei Zeilen. */
  max-width: 720px;
  text-wrap: balance;
}

.article {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}
.article__figure { margin: 0; }
.article__figure img { width: 100%; height: auto; }
.article__gallery {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 10px;
}
.article__gallery img { width: 100%; height: 100%; object-fit: cover; }
.article__gallery img:last-child { grid-column: 1 / -1; }

.article__body { max-width: 68ch; }
.article__lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-head-deep);
}
.article__body p { font-size: 1rem; line-height: 1.75; }
.article__subtitle {
  margin: 34px 0 12px;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--c-head-deep);
}

.article__list { margin: 0 0 1.2em; }
.article__list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: 1rem;
  line-height: 1.7;
}
.article__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

.article__back {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.article__back .link-arrow::after { content: none; }
.article__back .link-arrow::before { content: "\2196"; }

/* --- Fließtextseiten (Über uns) ---------------------------------------- */
.prose { max-width: 74ch; }
.prose__title {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--c-head);
}
.prose p { font-size: 1.02rem; line-height: 1.8; }

.lead {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--c-head-deep);
}

/* Hervorgehobenes Zitat als Ruhepunkt im Text */
.pullquote {
  margin: 0;
  padding: 44px 0 44px 34px;
  border-left: 2px solid var(--c-accent);
  max-width: 46ch;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--c-head);
}

/* Heller Kasten für einen Abschnitt */
.panel {
  background: var(--c-panel-blue);
  padding: 48px 52px;
}
.panel .prose { max-width: 68ch; }

.signature {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--c-line);
}
.signature span { display: block; }
.signature__name {
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--c-head-deep);
}
.signature__role {
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: 4px;
}
.signature__claim {
  margin-top: 16px;
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.teasers--4 { grid-template-columns: repeat(4, 1fr); }

.panel .article__list li { font-size: 1rem; }

/* Bildband über die volle Fensterbreite als Zäsur im Text */
.band {
  margin-block: 72px;
  height: clamp(280px, 34vw, 520px);
  overflow: hidden;
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Über uns: Text und Bild im Wechsel ---------------------------------- */
.ueber__title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 300;
  color: var(--c-head);
}

.stories { display: grid; gap: 88px; }

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story--flip .story__text { order: 2; }
.story--flip .story__media { order: 1; }

.story__title {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-head-deep);
  max-width: 26ch;
}
.story__title.rule::after {
  width: 26px;
  height: 2px;
  margin: 14px 0 22px;
  background: var(--c-accent);
  opacity: 1;
}
.story__text p {
  font-size: .98rem;
  line-height: 1.8;
  max-width: 52ch;
}
.story__text p:last-of-type { margin-bottom: 0; }

.story__media img { width: 100%; height: auto; }

/* --- Rechtliche Seiten -------------------------------------------------- */
.legal-head {
  padding-top: 180px;
  padding-bottom: 34px;
  background: var(--c-panel-blue);
}
.legal__claim {
  margin: 12px 0 0;
  font-size: 1rem;
  color: var(--c-ink);
}

.legal { max-width: 74ch; }
.legal__block { margin-top: 44px; }
.legal__title {
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.legal__firma {
  background: var(--c-panel-blue);
  padding: 28px 30px;
  margin-bottom: var(--gap);
}
.legal__firmenname {
  margin: 0 0 18px;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-head-deep);
}
.legal__pruefen {
  display: inline-block;
  margin-left: 8px;
  font-size: .82rem;
  color: #8a5a12;
}

.legal__list { margin: 0; }
.legal__list dt {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head);
  margin-bottom: 4px;
}
.legal__list dd { margin: 0 0 20px; }
.legal__list dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Offene Felder sichtbar kennzeichnen, damit nichts versehentlich live geht */
.legal__offen {
  color: #8a5a12;
  font-weight: 600;
}
.legal__hint {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: .88rem;
  color: var(--c-ink-soft);
}

.note--warn {
  background: #fbf3e3;
  border-left: 3px solid #c9922f;
}


/* --- Entwicklungsfelder (Seite Entwicklungen) --------------------------- */
/* minmax(0, 1fr) verhindert, dass sich die Spalte nach dem breitesten Inhalt
   richtet und auf schmalen Bildschirmen über den Rand hinausläuft. */
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.field {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px 48px;
  padding-block: 64px;
  border-top: 1px solid var(--c-line);
}
.field:last-child { border-bottom: 1px solid var(--c-line); }

.field__head { position: sticky; top: 120px; align-self: start; }
.field__nr {
  display: block;
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
}
.field__label {
  margin: 14px 0 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-head);
}

.field__body { max-width: 68ch; }
.field__claim {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--c-head-deep);
}
.field__claim.rule::after {
  width: 26px; height: 2px;
  margin: 16px 0 24px;
  background: var(--c-accent);
  opacity: 1;
}
.field__body p { font-size: .98rem; line-height: 1.8; }

.field__examples { grid-column: 1 / -1; margin-top: 38px; }
.field__examples-title {
  margin: 0 0 16px;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-head);
}

/* Beispielkacheln mit Bild und aufklappbaren Eckdaten */
.examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.ex {
  display: flex;
  flex-direction: column;
  background: var(--c-panel-blue);
  transition: box-shadow .28s ease;
}
.ex:hover { box-shadow: 0 14px 32px rgba(14, 59, 68, .1); }

.ex__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ex__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.ex:hover .ex__media img { transform: scale(1.04); }

.ex__text { padding: 16px 18px 0; flex: 1; }
.ex__title {
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--c-head-deep);
}
.ex__sub {
  margin: 5px 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* Aufklappen über eine runde Schaltfläche mit Winkel */
.ex__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 36px);
  margin: 14px 18px 18px;
  padding: 12px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(47, 98, 116, .25);
  color: var(--c-head-deep);
  font: inherit;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.ex__toggle::after {
  content: "";
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid rgba(47, 98, 116, .35);
  border-radius: 50%;
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-size: 9px 1px, 1px 9px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .3s ease, border-color .25s ease;
}
.ex__toggle:hover::after { border-color: var(--c-teal); }
.ex.is-open .ex__toggle::after {
  transform: rotate(135deg);
  background-size: 9px 1px, 0 0;
}

.ex__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.22, .61, .36, 1);
}
.ex__body-inner { min-height: 0; overflow: hidden; padding: 0 18px; }
.ex.is-open .ex__body { grid-template-rows: 1fr; }
.ex.is-open .ex__body-inner { padding-bottom: 20px; }

.ex__data { margin: 0; }
.ex__data dt {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-head);
  margin-bottom: 3px;
}
.ex__data dd { margin: 0 0 12px; font-size: .82rem; line-height: 1.5; }
.ex__data dd:last-child { margin-bottom: 0; }
.ex__offen { margin: 0; font-size: .82rem; color: var(--c-ink-soft); }

/* --- 13 Responsive ----------------------------------------------------- */
@media (max-width: 1180px) {
  /* Fünf lassen sich nicht auf drei Spalten aufteilen. Sechs Spalten als
     Raster: die ersten drei Kästen belegen zwei, die letzten beiden drei –
     so füllt die Schlussreihe die Breite und rechts bleibt keine Lücke. */
  .devcards--fuenf { grid-template-columns: repeat(6, 1fr); }
  .devcards--fuenf > .devcard { grid-column: span 2; }
  .devcards--fuenf > .devcard:nth-last-child(1),
  .devcards--fuenf > .devcard:nth-last-child(2) { grid-column: span 3; }
  /* Die breiteren Kästen bekämen sonst deutlich größere Bilder als die
     Reihe darüber. */
  .devcards--fuenf > .devcard:nth-last-child(1) .devcard__media,
  .devcards--fuenf > .devcard:nth-last-child(2) .devcard__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 1080px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .devcards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .teasers { grid-template-columns: 1fr; }
  .teasers--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .section { padding-block: 60px; }

  /* Navigation als eigenes Panel */
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    padding: 118px 26px 44px;
    overflow-y: auto;
    background:
      radial-gradient(130% 75% at 92% 0%, rgba(46, 122, 137, .5) 0%, rgba(14, 59, 68, 0) 62%),
      linear-gradient(168deg, #134c57 0%, #16565f 55%, #0f3d47 100%);
    opacity: 0;
    visibility: hidden;
    transform: translateX(26px);
    transition: opacity .34s cubic-bezier(.22, .61, .36, 1),
                transform .34s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .34s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .34s cubic-bezier(.22, .61, .36, 1),
                transform .34s cubic-bezier(.22, .61, .36, 1),
                visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Deutlich sichtbares Kreuz zum Schließen, bleibt beim Scrollen stehen */
  .nav__close {
    display: grid;
    place-items: center;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 46px; height: 46px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: border-color .25s ease, transform .25s ease;
  }
  .nav__close svg { width: 20px; height: 20px; }
  .nav__close:hover { border-color: #fff; transform: rotate(90deg); }

  /* Solange das Menü offen ist, ersetzt das Kreuz das Burger-Symbol.
     Die Sprachwahl weicht ebenfalls, sie steht dann unten im Panel. */
  body.menue-offen .burger,
  body.menue-offen .lang { opacity: 0; pointer-events: none; }
  .burger, .lang { transition: opacity .2s ease; }
  .nav__list li { width: 100%; }
  .nav__list li + li::before { content: none; }
  /* Der Desktop-Link würde sonst als zweiter Punkt "Kompetenzen" erscheinen */
  .nav .nav__group .nav__group-link { display: none; }

  .nav__list > li > a,
  .nav .nav__group-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    font: inherit;
    font-size: 1.28rem;
    font-weight: 300;
    letter-spacing: .05em;
    text-align: left;
    cursor: pointer;
  }

  /* Liniensymbole in derselben Strichstärke wie die Trennlinien */
  .nav__list svg {
    display: block;
    flex: none;
    width: 23px; height: 23px;
    margin-right: 17px;
    color: var(--c-accent);
    opacity: .9;
    transition: transform .25s ease;
  }
  .nav__list > li > a:hover svg,
  .nav .nav__group-toggle:hover svg { transform: translateX(2px); }

  .nav__list > li > a span,
  .nav .nav__group-toggle span { flex: 1; }

  .nav__list > li > a::after {
    content: "\2197";
    font-size: .72em;
    opacity: .4;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav__list > li > a:hover::after,
  .nav__list > li > a:focus-visible::after { opacity: 1; transform: translate(3px, -3px); }
  .nav__list > li > a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, .65); }

  /* Untermenü der Kompetenzen */
  .nav .nav__group-toggle::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 1px solid rgba(255, 255, 255, .7);
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .3s ease;
  }
  .nav__group.is-open .nav__group-toggle::after {
    transform: rotate(225deg) translate(-3px, -3px);
  }

  .nav .nav__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .36s cubic-bezier(.22, .61, .36, 1);
  }
  .nav__sub > ul { min-height: 0; overflow: hidden; }
  .nav__group.is-open .nav__sub { grid-template-rows: 1fr; }

  .nav__sub a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 2px 14px 40px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: .03em;
    color: #bcd6dc;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
  .nav__sub li:last-child a { border-bottom: 0; }
  .nav__sub a span {
    flex: none;
    width: 2.2em;
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--c-accent);
  }
  .nav__sub a[aria-current="page"] { color: #fff; }

  /* Einträge laufen nacheinander ein */
  .nav__list > li, .nav__meta {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
  }
  .nav.is-open .nav__list > li,
  .nav.is-open .nav__meta { opacity: 1; transform: none; }
  .nav.is-open .nav__list > li:nth-child(1) { transition-delay: .08s; }
  .nav.is-open .nav__list > li:nth-child(2) { transition-delay: .13s; }
  .nav.is-open .nav__list > li:nth-child(3) { transition-delay: .18s; }
  .nav.is-open .nav__list > li:nth-child(4) { transition-delay: .23s; }
  .nav.is-open .nav__list > li:nth-child(5) { transition-delay: .28s; }
  .nav.is-open .nav__list > li:nth-child(6) { transition-delay: .33s; }
  .nav.is-open .nav__list > li:nth-child(7) { transition-delay: .38s; }
  .nav.is-open .nav__meta { transition-delay: .46s; }

  .nav__meta {
    display: block;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .9rem;
    color: #b9d2d8;
  }
  .nav__meta a { display: block; margin-bottom: 6px; color: #fff; }
  .nav__meta p { margin: 14px 0 0; line-height: 1.6; }

  .nav__lang {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px !important;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .nav__lang a {
    display: inline-block;
    margin-bottom: 0;
    font-size: .92rem;
    letter-spacing: .06em;
    color: #b9d2d8;
  }
  .nav__lang a[aria-current="true"] {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .7);
  }
  .nav__lang span { opacity: .4; }

  .header__inner { position: relative; }
  .lang { position: relative; z-index: 60; margin-left: 14px; order: 3; }
  .burger { order: 2; margin-left: auto; }
  .brand__signet { height: 19px; }
  .brand__word { height: 25px; }

  /* Der Kopf läuft mit, sonst wäre das Menü nach dem Scrollen nicht erreichbar.
     Wichtig: der Weichzeichner sitzt auf einer eigenen Ebene, nicht auf .header
     selbst – sonst würde er das darin liegende Menüpanel einsperren. */
  .header {
    position: fixed;
    padding-block: 18px;
    transition: padding .3s ease;
  }
  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(19, 76, 87, .94);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .header.is-scrolled::before { opacity: 1; }
  .header.is-scrolled { padding-block: 10px; }
  .header.is-scrolled .brand__signet { height: 15px; }
  .header.is-scrolled .brand__word { height: 21px; }

  .hero { min-height: 520px; }
  .hero__title { font-size: clamp(1.75rem, 7.4vw, 2.4rem); max-width: 100%; }
  .hero__quote { font-size: .95rem; }
  .hero--sub { min-height: 320px; }
  /* Schmale Displays schneiden das breite Titelbild stark zu –
     der Ausschnitt wird nach rechts geschoben, damit Gebäude
     und Personen im Bild bleiben. */
  .hero--start .hero__media img { object-position: 72% 50%; }
  .hero__inner { padding-block: 120px 60px; }
  .hero__media::after {
    background: linear-gradient(160deg,
                rgba(10, 44, 53, .58) 0%,
                rgba(10, 44, 53, .38) 55%,
                rgba(10, 44, 53, .22) 100%);
  }

  /* Kompetenzen: siehe Block „Kacheln als Zeile“ am Ende der Datei */

  .split { grid-template-columns: 1fr; }
  .devhead { margin-bottom: 26px; }
  /* Entwicklungen: siehe Block „Kacheln als Zeile“ am Ende der Datei */
  .devlead { grid-template-columns: 1fr; }
  .devlead__media, .devlead__text { grid-column: span 1; }
  .devlead__media { min-height: 240px; }
  .devlead__text { padding: 30px 26px 34px; }
  .devcard { padding: 28px 24px 28px; }
  .stories { gap: 52px; }
  .story { grid-template-columns: 1fr; gap: 26px; }
  .story--flip .story__text { order: 2; }
  .story--flip .story__media { order: 1; }
  .teasers--4 { grid-template-columns: 1fr; }
  .panel { padding: 32px 26px; }
  .pullquote { padding: 30px 0 30px 22px; }
  .contact { grid-template-columns: 1fr; }
  .newscard { grid-template-columns: 1fr; }
  .newscard__media { min-height: 220px; }
  /* Logos statt Fotos: vollständig zeigen statt formatfüllend beschneiden */
.newscard__media--portrait img { object-position: center top; }
.newscard__media--logo { background: #fff; }
.newscard__media--logo img { object-fit: contain; padding: 26px; }
.newscard:hover .newscard__media--logo img { transform: none; }
.article__figure--logo img { border: 1px solid var(--c-line); }

.newscard__text { padding: 26px 24px 30px; }
  .article { grid-template-columns: 1fr; gap: 28px; }
  .article__figure { max-width: 420px; }
  .article-head, .legal-head { padding-top: 130px; }
  .projects { gap: 46px; }
  .field { grid-template-columns: 1fr; gap: 20px; padding-block: 44px; }
  .examples { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .field__head { position: static; display: flex; align-items: baseline; gap: 16px; }
  .field__label { margin: 0; }
  .project { grid-template-columns: 1fr; }
  .project__text { padding: 0 0 28px; }
  .project__media { padding: 0; }
  .contact__panel { padding: 32px 26px; }
  .contact__cards { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .benefits--3 { grid-template-columns: 1fr; }
  .band { margin-block: 46px; height: clamp(220px, 46vw, 320px); }
  .job { padding: 26px 22px 28px; }
  .cta { padding: 32px 26px; }
  .split__text { padding: 32px 26px; }

  .services { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .case__text { padding: 30px 26px; }
  .case__media { min-height: 220px; }
  .service { grid-template-columns: 1fr 38%; }

  .footer__brands { gap: 34px; }
  .footer__brands img { height: 30px; }
  .footer__mid { gap: 30px; }
  .footer__insight { margin-left: 0; text-align: left; width: 100%; }
}

@media (max-width: 620px) {
  :root { --gut: 18px; --gap: 14px; }

  .tiles { grid-template-columns: 1fr; }
  .tile--wide, .tile--full { grid-column: span 1; }

  .devcards, .devcards--fuenf { grid-template-columns: 1fr; }
  .devcards--fuenf > .devcard,
  .devcards--fuenf > .devcard:nth-last-child(1),
  .devcards--fuenf > .devcard:nth-last-child(2) { grid-column: 1 / -1; }
  .devcard__media { aspect-ratio: 16 / 10; }
  .tile--cta { min-height: 300px; padding: 28px 24px 30px; }


  .service { grid-template-columns: 1fr; }
  .service__media { min-height: 170px; }

  /* Marken untereinander, sonst wird CONVESTUS abgeschnitten */
  .footer__brands { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer__brands span { display: none; }
  .footer__brands img { height: 30px; }
  .benefits { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* --- Entwicklungsfelder: Aufmacher mit Karte ---------------------------- */

:root { --c-map: #aec965; }

/* Muss nach allen Layoutregeln stehen, sonst gewinnt display:flex */
[hidden] { display: none !important; }

/* Feld 01 nutzt die volle Breite, damit Text und Karte nebeneinander stehen */
.field--lead { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.field--lead .field__head { position: static; }
.field--lead .explore {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 40px;
  background: linear-gradient(150deg, var(--c-panel-blue) 0%, #eef5f8 100%);
  padding: 48px 46px;
}

.explore__label {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.explore__claim {
  margin: 6px 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-head);
}
.explore__claim.rule::after {
  width: 26px; height: 2px;
  margin: 18px 0 24px;
  background: var(--c-accent);
  opacity: 1;
}
.explore__text p { font-size: .96rem; line-height: 1.8; max-width: 58ch; }
.explore__text p:last-child { margin-bottom: 0; }

.explore__map { display: flex; flex-direction: column; }

/* --- Karte der Entwicklungsräume --------------------------------------- */

.geomap { position: relative; }
.geomap__view { display: flex; flex-direction: column; gap: 22px; }

.geomap__canvas {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
}
.geomap__svg { display: block; width: 100%; height: auto; overflow: visible; }

.geomap__land {
  fill: url(#geoFlaeche);
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Der Kreis liegt als feine Aufhellung in der Fläche und tritt hervor,
   sobald die Karte berührt wird. */
.geomap__region {
  fill: #fff;
  fill-opacity: .16;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-opacity: .45;
  stroke-linejoin: round;
  transition: fill-opacity .4s ease, stroke-opacity .4s ease;
}

/* --- Verbindungslinien -------------------------------------------------- */
/* Die Linien zeichnen sich selbst, sobald die Karte berührt wird, und
   zeigen, dass die Einzelprojekte zusammengehören. */
.geomap__link,
.geomap__flow {
  fill: none;
  stroke: var(--c-dark);
  stroke-linecap: round;
}
.geomap__link {
  stroke-width: 2;
  stroke-opacity: .42;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .3, 1);
}
.geomap__flow {
  stroke-width: 2.6;
  stroke-opacity: 0;
  stroke-dasharray: 5 13;
  transition: stroke-opacity .5s ease .35s;
}

.geomap__canvas:hover .geomap__link,
.geomap__canvas:focus-within .geomap__link { stroke-dashoffset: 0; }
.geomap__canvas:hover .geomap__flow,
.geomap__canvas:focus-within .geomap__flow {
  stroke-opacity: .55;
  animation: geofluss 1.4s linear infinite;
}
@keyframes geofluss { to { stroke-dashoffset: -18; } }

.geomap__canvas:hover .geomap__region,
.geomap__canvas:focus-within .geomap__region {
  fill-opacity: .34;
  stroke-opacity: .9;
}

/* --- Marker ------------------------------------------------------------- */

.geopin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
}
button.geopin { cursor: pointer; }

.geopin__dot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-dark);
  box-shadow: 0 6px 18px rgba(14, 59, 68, .34), 0 0 0 3px rgba(255, 255, 255, .92);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.geopin__dot img { width: 21px; height: auto; filter: brightness(0) invert(1); }

/* Der Sitz wird kleiner und ohne Signet gesetzt, damit die
   Entwicklungsräume die Hauptrolle behalten. */
.geopin--sitz { width: 26px; height: 26px; }
.geopin--sitz .geopin__dot {
  width: 15px; height: 15px;
  background: var(--c-paper);
  box-shadow: 0 0 0 3.5px var(--c-dark), 0 4px 12px rgba(14, 59, 68, .3);
}

/* Ruhiger Puls, damit der Punkt auffindbar ist */
.geopin__halo {
  position: absolute;
  z-index: 1;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-dark);
  opacity: .26;
  animation: geopuls 2.8s ease-out infinite;
}
@keyframes geopuls {
  0%   { transform: scale(1);   opacity: .28; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.geopin__label {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translate(-50%, 6px);
  display: grid;
  gap: 2px;
  white-space: nowrap;
  padding: 8px 14px;
  background: var(--c-dark);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(14, 59, 68, .26);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.geopin__label em {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .1em;
  opacity: .72;
}
.geopin__label::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--c-dark);
}
/* Der Sitz trägt sein Schild dauerhaft, er ist kein Bedienelement */
.geopin__label--fest {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  opacity: .92;
  transform: translate(0, -50%);
}
.geopin__label--fest::after {
  top: 50%; left: -5px;
  margin: -5px 0 0;
  border-top-color: transparent;
  border-right-color: var(--c-dark);
}

.geopin:hover .geopin__dot,
.geopin:focus-visible .geopin__dot { transform: scale(1.16); }
button.geopin:hover .geopin__label,
button.geopin:focus-visible .geopin__label { opacity: 1; transform: translate(-50%, 0); }
.geopin:hover .geopin__halo { animation-play-state: paused; }

.geomap__caption { margin: 0; font-size: .94rem; line-height: 1.8; }
.geomap__caption strong { font-weight: 600; color: var(--c-head-deep); }

.geomap__hint {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.geomap__hint--tipp { display: none; }
@media (hover: none) {
  .geomap__hint--maus { display: none; }
  .geomap__hint--tipp { display: inline; }
}

/* --- Detailansicht eines Entwicklungsraums ------------------------------ */

.georaum { display: flex; flex-direction: column; gap: 22px; }

.georaum__back {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.georaum__back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Kreisfläche mit den Einzelprojekten, dazu das Foto als angelegte Karte */
.georaum__figure {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.georaum__shape {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.georaum__flaeche {
  fill: url(#geoKreis);
  stroke: #fff;
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 12px 22px rgba(63, 90, 30, .22));
  opacity: 0;
  transform-origin: 632px 1119px;
  animation: geoflaeche .7s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes geoflaeche {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

.georaum__link {
  fill: none;
  stroke: var(--c-dark);
  stroke-width: 1.6;
  stroke-opacity: .55;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: geozeichnen .8s ease-out .45s both;
}
@keyframes geozeichnen { to { stroke-dashoffset: 0; } }

.georaum__punkt {
  fill: var(--c-paper);
  stroke: var(--c-dark);
  stroke-width: 2.6;
  opacity: 0;
  transform-origin: center;
  animation: geopunkt .45s cubic-bezier(.3, 1.5, .5, 1) both;
  transition: r .25s ease;
}
.georaum__punkt[data-ort="rodalben"]  { animation-delay: .3s; }
.georaum__punkt[data-ort="pirmasens"] { animation-delay: .42s; }
@keyframes geopunkt {
  from { opacity: 0; r: 0; }
  to   { opacity: 1; }
}
.georaum__punkt.is-aktiv { fill: var(--c-dark); r: 7; }

.geoname {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(14px, -50%);
  padding: 4px 9px;
  background: rgba(255, 255, 255, .92);
  color: var(--c-head-deep);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(14, 59, 68, .14);
  opacity: 0;
  animation: geoname .5s ease-out .6s both;
}
.geoname--links { transform: translate(calc(-100% - 14px), -50%); }
@keyframes geoname { to { opacity: 1; } }

/* Foto als angelegte Karte statt als Kreis: das Motiv bleibt vollständig
   sichtbar und wirkt wie ein Beleg auf der Karte. */
.georaum__photo {
  position: absolute;
  right: -3%; bottom: -7%;
  width: 55%;
  margin: 0;
  background: var(--c-paper);
  padding: 8px 8px 0;
  box-shadow: 0 18px 40px rgba(14, 59, 68, .22);
  animation: geofoto .7s cubic-bezier(.2, .8, .3, 1) .3s both;
}
@keyframes geofoto {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.georaum__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.georaum__photo figcaption {
  padding: 9px 2px 10px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.georaum__eyebrow {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.georaum__title {
  margin: 6px 0 0;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--c-head);
}
.georaum__eyebrow--unten { margin: 7px 0 0; }
.georaum__eyebrow--unten.rule::after {
  width: 26px; height: 2px;
  margin: 14px 0 18px;
  background: var(--c-accent);
  opacity: 1;
}
.georaum__title.rule::after {
  width: 26px; height: 2px;
  margin: 14px 0 18px;
  background: var(--c-accent);
  opacity: 1;
}
.georaum__text p { font-size: .95rem; line-height: 1.8; }

.georaum__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.georaum__list li {
  position: relative;
  padding-left: 18px;
  font-size: .92rem;
  color: var(--c-ink);
  transition: color .25s ease;
}
.georaum__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 2px;
  background: var(--c-accent);
  transition: width .25s ease, background .25s ease;
}
/* Zeilen mit Ortsbezug heben den passenden Punkt auf der Karte hervor */
.georaum__list li[data-ort] { cursor: default; }
.georaum__list li[data-ort]:hover { color: var(--c-head-deep); }
.georaum__list li[data-ort]:hover::before { width: 13px; background: var(--c-dark); }

.georaum__more { color: var(--c-head-deep); }

/* Überblickskarten auf der Entwicklungen-Seite */
.devcards--page { padding-block: 8px 0; }

@media (max-width: 1080px) {
  .field--lead .explore { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .field--lead .explore { grid-column: 1; padding: 32px 26px; }
  .geomap__canvas, .georaum__figure { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Alles Laufende anhalten, die Endzustände bleiben sichtbar */
  .geopin__halo { animation: none; opacity: .22; }
  .geomap__flow { animation: none; }
  .geomap__link { transition: none; }
  .georaum__flaeche,
  .georaum__punkt,
  .georaum__photo,
  .geoname { animation: none; opacity: 1; transform: none; }
  .georaum__link { animation: none; stroke-dashoffset: 0; }
}

/* --- Karte auf Touchgeräten --------------------------------------------- */
/* Ohne Mauszeiger gibt es kein Schweben: die Verbindungen werden dauerhaft
   gezeigt, sonst würden sie auf dem Handy nie erscheinen. */
@media (hover: none) {
  .geomap__link { stroke-dashoffset: 0; }
  .geomap__flow { stroke-opacity: .5; animation: geofluss 1.4s linear infinite; }
  .geomap__region { fill-opacity: .3; stroke-opacity: .8; }
}

/* Auf schmalen Bildschirmen läuft das Schild des Sitzes rechts hinaus,
   deshalb steht es dort links vom Punkt. */
@media (max-width: 860px) {
  .geopin__label--fest {
    left: auto;
    right: calc(100% + 10px);
  }
  .geopin__label--fest::after {
    left: auto; right: -5px;
    border-right-color: transparent;
    border-left-color: var(--c-dark);
  }
}


/* --- Titelbereich mit Video (Startseite) -------------------------------- */

.hero__still {
  display: block;
  position: absolute;
  inset: 0;
}
.hero__still img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Das Video liegt über dem Standbild und blendet erst auf, wenn es
   tatsächlich läuft. So gibt es keinen schwarzen Kasten und keinen Sprung. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero__video.is-sichtbar { opacity: 1; }

/* Im Video wird das Bild zeitweise sehr hell (Empfangsbereich). Deshalb
   zwei Verläufe: einer von links für Überschrift und Text, einer von oben
   für Logo und Menü. Beide brauchen z-index, sonst lägen sie unter dem Video. */
.hero--start .hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
              rgba(10, 44, 53, .58) 0%,
              rgba(10, 44, 53, .30) 13%,
              rgba(10, 44, 53, .06) 26%,
              rgba(10, 44, 53, 0) 38%);
}
.hero--start .hero__media::after {
  z-index: 1;
  background: linear-gradient(100deg,
              rgba(10, 44, 53, .62) 0%,
              rgba(10, 44, 53, .34) 44%,
              rgba(10, 44, 53, .06) 76%,
              rgba(10, 44, 53, 0) 100%);
}

/* --- Bewegung beim Scrollen --------------------------------------------- */
/* --hero-fortschritt wird im Skript gesetzt: 0 am Seitenanfang, 1 wenn der
   Titelbereich nach oben hinausgelaufen ist. */
.js .hero--start .hero__media {
  transform: scale(calc(1 + var(--hero-fortschritt, 0) * .1));
  transform-origin: center 65%;
  will-change: transform;
}
.js .hero--start .hero__inner {
  transform: translateY(calc(var(--hero-fortschritt, 0) * -70px));

  /* Hier stand `opacity: calc(1 - var(--hero-fortschritt, 0) * 1.25)`. Der
     Faktor 1,25 bedeutete: schon nach vier Fünfteln des Titelbereichs war der
     Text vollständig unsichtbar – auf halbem Weg also bereits blass und kaum
     lesbar. Überschrift, Text und Knopf waren gleichermaßen betroffen, weil
     sie in diesem Block zusammenliegen.

     Jetzt bleibt der Text sichtbar und wandert nur noch sanft nach oben, bis
     ihn der nächste Abschnitt überdeckt. */

  /* Hier stand zusätzlich `will-change: transform, opacity`. Das legt den
     Textblock dauerhaft auf eine eigene Zeichenebene, auf der der Browser
     Schrift ohne die feine Kantenglättung darstellt. Beim Erzeugen und
     Auflösen dieser Ebene sprang die Schrift sichtbar zwischen dünn und
     kräftig – genau beim Scrollen im Titelbereich.

     Die Angabe ist nicht nötig: Die Bewegung ist eine einfache Verschiebung,
     die der Browser auch ohne Vorankündigung flüssig schafft. Beim Bild
     darüber bleibt sie stehen, dort gibt es keine Schrift.

     Zusätzlich die Kantenglättung fest auf „gleichmäßig" gestellt, damit die
     Schrift vor, während und nach der Bewegung identisch aussieht. Auf dem
     dunklen Titelbild ist das ohnehin die sauberere Darstellung. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Text läuft beim Laden ein ------------------------------------------ */
.js .hero--start .hero__title,
.js .hero--start .hero__quote,
.js .hero--start .hero__inner .btn {
  opacity: 0;
  transform: translateY(22px);
}
.js .hero--start.is-bereit .hero__title,
.js .hero--start.is-bereit .hero__quote,
.js .hero--start.is-bereit .hero__inner .btn {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .3, 1);
}
.js .hero--start.is-bereit .hero__quote { transition-delay: .16s; }
.js .hero--start.is-bereit .hero__inner .btn { transition-delay: .3s; }

/* --- Hinweis zum Weiterscrollen ----------------------------------------- */
.heroscroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #fff;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(8, 38, 46, .5);
  opacity: calc(1 - var(--hero-fortschritt, 0) * 2.4);
  transition: color .3s ease;
}
.heroscroll:hover { color: #fff; }
.heroscroll__spur {
  position: relative;
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}
/* Ein kurzer Strich wandert nach unten – ruhiger als ein blinkender Pfeil */
.heroscroll__spur span {
  position: absolute;
  left: 0; top: -18px;
  width: 1px;
  height: 18px;
  background: #fff;
  animation: heroscroll 2.1s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes heroscroll {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(64px); opacity: 0; }
}

@media (max-width: 860px) {
  /* Auf dem Handy füllt der Text den Titelbereich fast aus, der Hinweis
     würde über dem Knopf liegen. Dort ist er auch entbehrlich. */
  .heroscroll { display: none; }
  .js .hero--start .hero__media { transform: scale(calc(1 + var(--hero-fortschritt, 0) * .06)); }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Zoom, kein Wandern, kein Einlaufen – der Titelbereich steht still.
     Das Video selbst wird im Skript gar nicht erst gestartet. */
  .js .hero--start .hero__media,
  .js .hero--start .hero__inner { transform: none; opacity: 1; }
  .js .hero--start .hero__title,
  .js .hero--start .hero__quote,
  .js .hero--start .hero__inner .btn { opacity: 1; transform: none; }
  .heroscroll__spur span { animation: none; opacity: .8; top: 14px; }
  .hero__video { transition: none; }
}


/* --- Kästen auf der Karriereseite --------------------------------------- */
/* Sechs Spalten als Raster: normale Kästen belegen zwei davon, also drei je
   Reihe. Der Studienkasten liegt oben über die volle Breite, die letzten
   beiden teilen sich die Schlussreihe – so bleibt rechts keine Lücke. */
/* Der Studienkasten steht über die volle Breite, die vier übrigen zu zweit
   nebeneinander. Seit „Baden-Baden" ein eigener Bild-Text-Block ist, geht das
   ohne Lücke auf. */
.benefits--karriere { grid-template-columns: repeat(6, 1fr); }
.benefits--karriere > .benefit { grid-column: span 3; }
.benefits--karriere > .benefit--studium { grid-column: 1 / -1; }

/* Der Studienkasten ist ein eigener Block und bleibt zugeklappt, damit der
   lange Text die Seite nicht erschlägt. */
.benefit--studium { background: var(--c-panel-blue2); }
.benefit--studium > p { max-width: 72ch; }

.benefit__toggle {
  width: 100%;
  margin-top: 20px;
  padding: 13px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(10, 44, 53, .16);
  color: var(--c-head-deep);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.benefit__toggle::after {
  content: "+";
  float: right;
  font-size: 1.2em;
  line-height: 1;
  transition: transform .3s ease;
}
.benefit.is-open .benefit__toggle::after { content: "\2013"; transform: rotate(180deg); }

.benefit__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1);
}
.benefit__body-inner { min-height: 0; overflow: hidden; }
.benefit.is-open .benefit__body { grid-template-rows: 1fr; }
.benefit__body p {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 78ch;
}
.benefit__body p:last-child { margin-bottom: 0; }
.benefit__body-inner > p:first-child { margin-top: 22px; }

.benefit__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 40px;
}
.benefit__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: .95rem;
  break-inside: avoid;
}
.benefit__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 2px;
  background: var(--c-accent);
}

@media (max-width: 860px) {
  .benefits--karriere { grid-template-columns: 1fr; }
  .benefits--karriere > .benefit,
  .benefits--karriere > .benefit--studium { grid-column: 1 / -1; }
  .benefit__list { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .benefit__body { transition: none; }
}


/* --- Insights-Kachel neben dem Kontakt (Startseite) --------------------- */
/* Beide Hälften belegen zwei der vier Rasterspalten. Die Trennung liegt damit
   auf derselben Achse wie die Lücke im Über-uns-Block darüber – die Linie
   läuft durch das ganze Seitenende. */
.tile--insight {
  justify-content: flex-start;
  padding: 40px 40px 38px;
  background: var(--c-dark);
}

.insight__lead {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #fff;
  max-width: 34ch;
}
.insight__text {
  margin: 0 0 28px;
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .8);
  max-width: 46ch;
}

/* Die beiden inhaltlichen Wege stehen untereinander, damit sie als Angebot
   lesbar sind und nicht als Linkzeile. */
.insight__wege {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0 0 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.insight__wege .link-arrow { color: #fff; }

/* Die sozialen Kanäle bewusst kleiner und leiser */
.insight__sozial {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.insight__sozial a { color: rgba(255, 255, 255, .72); }
.insight__sozial a:hover { color: #fff; }
.insight__sozial span { padding: 0 6px; }

/* Auf der Startseite trägt die Fußzeile nur noch die Logos – Insights steht
   eine Zeile höher in der Kachel. */
.footer__top--nurmarken { justify-content: flex-start; }

@media (max-width: 620px) {
  .tile--insight { padding: 30px 26px 28px; }
  .insight__lead { font-size: .98rem; }
}


/* --- Feld 01: Beispiele liegen im blauen Kasten ------------------------- */
/* Die Beispiele sind fester Bestandteil der Geschichte, nicht ein Anhang.
   Deshalb laufen sie im selben Feld weiter wie Text und Karte. */
.field__examples--imfeld {
  grid-column: 1 / -1;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(10, 44, 53, .12);
}
/* Auf blauem Grund brauchen die Kacheln einen helleren Ton, sonst
   verschwinden sie im Feld. */
.field__examples--imfeld .ex { background: var(--c-paper); }
.field__examples--imfeld .ex__toggle { border-top-color: rgba(10, 44, 53, .12); }

/* Überschrift über dem Südwestpfalz-Text. Der Satz läuft aus ihr heraus
   weiter, deshalb steht kein Punkt am Ende. */
.geomap__titel {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-head-deep);
}

/* --- Karte reagiert auf die Beispiele ----------------------------------- */
/* Pirmasens und Rodalben liegen bei dieser Kartengröße nur zwölf Pixel
   auseinander – einzelne Punkte wären dort nicht zu unterscheiden. Deshalb
   leuchtet der Kreis auf, der Marker tritt hervor und ein Schild nennt den
   Ort. */
.geomap__canvas.is-orte .geomap__region {
  fill-opacity: .46;
  stroke-opacity: 1;
}
.geomap__canvas.is-orte .geopin__dot {
  transform: scale(1.14);
  box-shadow: 0 8px 22px rgba(14, 59, 68, .42), 0 0 0 5px rgba(255, 255, 255, .95);
}
.geomap__canvas.is-orte .geopin__halo { animation: none; opacity: .34; transform: scale(1.5); }

.georuf {
  position: absolute;
  left: 63%; top: 55%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  padding: 7px 13px;
  background: var(--c-dark);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(14, 59, 68, .26);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.georuf::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--c-dark);
}
.georuf.is-gezeigt { opacity: 1; transform: translate(-50%, 0); }

/* Das berührte Beispiel hebt sich leicht ab */
.field__examples--imfeld .ex.is-aktiv {
  box-shadow: 0 14px 34px rgba(14, 59, 68, .16);
}

@media (prefers-reduced-motion: reduce) {
  .georuf { transition: none; }
  .geomap__canvas.is-orte .geopin__halo { opacity: .3; }
}

/* --- Karte bleibt beim Durchsehen der Beispiele stehen ------------------ */
/* Die Orte sollen aufleuchten, während man unten durch die Beispiele geht.
   Dafür muss die Karte sichtbar bleiben, also läuft sie mit. */
.field--lead .explore__text { grid-column: 1; grid-row: 1; }
.field--lead .explore__map {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.field--lead .field__examples--imfeld { grid-column: 1; grid-row: 2; }

.field--lead .geomap__canvas { max-width: 330px; }
.field--lead .georaum__figure { max-width: 360px; }

/* Die Kacheln tragen hier ausformulierte Referenztexte und stehen deshalb
   alle über die volle Breite untereinander – so haben Bild und Text Raum. */
.field__examples--imfeld .examples { grid-template-columns: 1fr; }
.field__examples--imfeld .examples > .ex { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .field--lead .explore__map {
    grid-column: 1;
    grid-row: 2;
    position: static;
  }
  .field--lead .field__examples--imfeld { grid-row: 3; }
  .field--lead .geomap__canvas { max-width: 400px; }
}

@media (max-width: 620px) {
  .field__examples--imfeld .examples { grid-template-columns: 1fr; }
  .field__examples--imfeld .examples > .ex,
  .field__examples--imfeld .examples > .ex:nth-last-child(1),
  .field__examples--imfeld .examples > .ex:nth-last-child(2) { grid-column: 1 / -1; }
}

/* --- Felder 02 bis 05 im selben Schema wie Feld 01 ---------------------- */
/* Ein blaues Feld trägt Nummer, Text und Beispiele zusammen. Die Beispiele
   gehören zur Geschichte, deshalb enden sie nicht außerhalb. */
.field--panel {
  background: linear-gradient(150deg, var(--c-panel-blue) 0%, #eef5f8 100%);
  border-top: 0;
  padding: 48px 46px;
  margin-bottom: 26px;
}
.field--panel + .field--panel { margin-top: 0; }

/* Auf blauem Grund brauchen die Kacheln einen helleren Ton */
.field--panel .ex { background: var(--c-paper); }
.field--panel .ex__toggle { border-top-color: rgba(10, 44, 53, .12); }

.field--panel .field__examples {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(10, 44, 53, .12);
}

/* Die Nummer bleibt beim Lesen stehen, klebt im Kasten aber nicht am
   Fensterrand. */
.field--panel .field__head { top: 140px; }

@media (max-width: 860px) {
  .field--panel { padding: 32px 26px; }
  .field--panel .field__head { position: static; }
}

/* Aufteilung der Beispiele im Kasten: sechs Spalten als Raster, ein Beispiel
   belegt zwei davon – also drei je Reihe. Zwei Sonderfälle, damit unten keine
   einzelne Kachel stehen bleibt. */
.field--panel .examples { grid-template-columns: repeat(6, 1fr); }
.field--panel .examples > .ex { grid-column: span 2; }

/* Genau vier: lieber zwei mal zwei als drei plus einer */
.field--panel .examples > .ex:first-child:nth-last-child(4),
.field--panel .examples > .ex:first-child:nth-last-child(4) ~ .ex { grid-column: span 3; }

/* Genau fünf: die letzten beiden füllen die Schlussreihe */
.field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(1),
.field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(2) { grid-column: span 3; }

@media (max-width: 620px) {
  .field--panel .examples { grid-template-columns: 1fr; }
  .field--panel .examples > .ex,
  .field--panel .examples > .ex:first-child:nth-last-child(4),
  .field--panel .examples > .ex:first-child:nth-last-child(4) ~ .ex,
  .field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(1),
  .field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(2) { grid-column: 1 / -1; }
}

/* Breitere Kacheln bekämen sonst deutlich höhere Bilder als die Reihe
   darüber – deshalb dort ein flacheres Format. */
.field--panel .examples > .ex:first-child:nth-last-child(4) .ex__media,
.field--panel .examples > .ex:first-child:nth-last-child(4) ~ .ex .ex__media,
.field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(1) .ex__media,
.field--panel .examples > .ex:first-child:nth-last-child(5) ~ .ex:nth-last-child(2) .ex__media,
.field__examples--imfeld .examples > .ex .ex__media { aspect-ratio: 3 / 1; }

@media (max-width: 620px) {
  .field--panel .examples > .ex .ex__media,
  .field__examples--imfeld .examples > .ex .ex__media { aspect-ratio: 16 / 10; }
}

/* --- Nummer im Kasten, für alle fünf Felder gleich ---------------------- */
.explore__nr {
  display: block;
  margin-bottom: 10px;
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
}

/* Platzhalter, die noch mit Inhalt gefüllt werden müssen */
.platzhalter { opacity: .55; }

/* Abstand zwischen den Feldern, seit der Trennstrich entfällt */
.field--lead { border-top: 0; padding-block: 0 26px; }

@media (max-width: 860px) {
  .explore__nr { font-size: 1.8rem; }
}

/* Dieses Kopfbild ist ein sehr breites Panorama (4:1). Auf dem Handy bleibt
   davon nur ein schmaler Ausschnitt übrig, deshalb liegt er dort auf den
   beiden Personen und nicht in der leeren Bildmitte. */
.hero--mitte .hero__media img { object-position: 64% center; }

/* Ebenfalls ein 4:1-Panorama: auf dem Handy liegt der Ausschnitt auf der
   lesenden Person rechts statt auf der leeren Landschaft. */
/* Nur News & Insights. Der Wert bestimmt, welcher Ausschnitt auf schmalen
   Geräten stehen bleibt. Beim neuen Motiv sitzt die lesende Person ganz rechts,
   bei 68 % wäre ihr Gesicht an der Schnittkante gelandet. */
.hero--rechts .hero__media img { object-position: 85% center; }

/* --- Referenztexte hinter dem Plus -------------------------------------- */
/* Name der Referenz, darunter die Rolle, darunter der Text. */
.ex__ref {
  margin: 0 0 4px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-head-deep);
}
.ex__rolle {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.ex__body-inner p:not(.ex__ref):not(.ex__rolle):not(.ex__offen) {
  margin: 0 0 12px;
  font-size: .9rem;
  line-height: 1.75;
}
.ex__body-inner p:last-child { margin-bottom: 0; }

/* --- Entwicklungsgeschichte im Textfeld (Feld 01) ----------------------- */
/* Der Text steht bewusst in der linken Spalte und nicht neben der Karte:
   dort wäre die Spalte höher als der Bildschirm und die Karte würde beim
   Scrollen nicht mehr mitlaufen. */
.geschichte {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(10, 44, 53, .14);
}
.geschichte__titel {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.geschichte__titel.rule::after {
  width: 26px; height: 2px;
  margin: 14px 0 22px;
  background: var(--c-accent);
  opacity: 1;
}
.geschichte p { font-size: .96rem; line-height: 1.8; }
.geschichte strong { font-weight: 600; color: var(--c-head-deep); }
.geschichte__schluss {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--c-head-deep);
}


/* --- Feld 01: Einleitung oben, darunter Verlauf und Beispiele ----------- */
/* Die Einleitung hat inhaltlich nichts mit den Referenzen zu tun. Sie steht
   deshalb über die volle Breite, und erst darunter beginnt die gemeinsame
   Ebene: links die Geschichte, rechts die Beispiele dazu. */
.explore--verlauf { grid-template-columns: minmax(0, 1fr) 430px; }
.explore--verlauf .explore__kopf {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 14px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(10, 44, 53, .14);
}
.explore--verlauf .explore__verlauf { grid-column: 1; grid-row: 2; }
.explore--verlauf .explore__beispiele { grid-column: 2; grid-row: 2; }

/* Der Einleitungstext läuft zweispaltig, sonst wären die Zeilen zu lang */
.explore__intro {
  columns: 2;
  column-gap: 48px;
  margin-top: 4px;
}
.explore__intro p {
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.8;
  break-inside: avoid;
}
.explore__intro p:last-child { margin-bottom: 0; }
.explore__ueberleitung { font-weight: 600; color: var(--c-head-deep); }

/* Der Verlauf beginnt hier ohne eigene Trennlinie, die Ebene trennt schon */
.explore__verlauf .verlauf {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Der Verlauf -------------------------------------------------------- */
.verlauf {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(10, 44, 53, .14);
}
.verlauf__titel {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.verlauf__titel.rule::after {
  width: 26px; height: 2px;
  margin: 14px 0 26px;
  background: var(--c-accent);
  opacity: 1;
}

/* Senkrechte Spur, an der die Jahre sitzen */
.verlauf__spur {
  position: relative;
  padding-left: 88px;
}
.verlauf__spur::before {
  content: "";
  position: absolute;
  left: 63px; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(10, 44, 53, .16);
}

.station { position: relative; margin-bottom: 30px; }
.station:last-child { margin-bottom: 0; }

.station__jahr {
  position: absolute;
  left: -88px; top: 0;
  width: 58px;
  text-align: right;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-head-deep);
}
/* Punkt auf der Spur */
.station::before {
  content: "";
  position: absolute;
  left: -29px; top: .45em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-panel-blue);
}
.station--offen::before { background: var(--c-dark); }

.station__text p { margin: 0 0 10px; font-size: .95rem; line-height: 1.8; }
.station__text p:last-child { margin-bottom: 0; }
.station strong { font-weight: 600; color: var(--c-head-deep); }

/* Der Satz zwischen den Stationen: ohne Jahr, etwas hervorgehoben */
.verlauf__satz {
  margin: 0 0 30px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .55);
  border-left: 2px solid var(--c-accent);
  font-size: .95rem;
  line-height: 1.8;
  color: var(--c-head-deep);
}
.verlauf__schluss { font-weight: 600; color: var(--c-head-deep); }

/* Die Beispiele stehen hier in einer schmaleren Spalte */
/* Die linke Spalte (Verlauf) ist kürzer als vier Kacheln im üblichen Format.
   Flachere Bilder bringen beide Spalten auf eine ähnliche Höhe. */
.explore__beispiele .examples { grid-template-columns: 1fr; gap: 16px; }
.explore__beispiele .ex__media { aspect-ratio: 12 / 5; }

@media (max-width: 1080px) {
  .explore--verlauf { grid-template-columns: 1fr; }
  .explore--verlauf .explore__kopf,
  .explore--verlauf .explore__verlauf,
  .explore--verlauf .explore__beispiele { grid-column: 1; grid-row: auto; }
}

@media (max-width: 860px) {
  .explore__intro { columns: 1; }
}

@media (max-width: 620px) {
  .verlauf__spur { padding-left: 0; }
  .verlauf__spur::before { display: none; }
  .station::before { display: none; }
  .station__jahr {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
  }
  .verlauf__satz { padding: 16px 18px; }
}

/* --- Marke auf einer Beispielkachel ------------------------------------- */
/* Kennzeichnet ein Projekt, das Mediamo selbst entwickelt und finanziert hat.
   Bewusst klein gehalten – sie soll auffallen, aber das Bild nicht dominieren. */
.ex__marke {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  padding: 8px 14px;
  background: var(--c-dark);
  color: #fff;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Geschichte ohne Stationen (z. B. Feld 04) -------------------------- */
.verlauf__text p { margin: 0 0 14px; font-size: .95rem; line-height: 1.8; }
.verlauf__text p:last-child { margin-bottom: 0; }
.verlauf__text strong { font-weight: 600; color: var(--c-head-deep); }

/* --- Key Facts hinter dem Plus ------------------------------------------ */
.ex__fakten {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex__fakten li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: .9rem;
  line-height: 1.6;
}
.ex__fakten li:last-child { margin-bottom: 0; }
.ex__fakten li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--c-accent);
}

/* Marke unter einem Verlaufstext, etwa „Eigene Entwicklung · Investment" */
.verlauf__marke {
  display: inline-block;
  margin-top: 6px;
  padding: 7px 14px;
  background: var(--c-dark);
  color: #fff;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Längere Marken wie „Oktober 2026" brauchen mehr Platz an der Spur */
.verlauf__spur { padding-left: 104px; }
.verlauf__spur::before { left: 79px; }
.station__jahr { left: -104px; width: 74px; line-height: 1.35; }
.station::before { left: -29px; }

/* Ein Verlauf kann Text und Spur kombinieren. Etwas mehr Luft dazwischen,
   damit die Spur nicht direkt an der Marke darüber klebt. */
.verlauf__text + .verlauf__spur {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(10, 44, 53, .14);
}

/* Zweite und weitere Geschichten im selben Feld. Die Regel muss genauso
   genau treffen wie „.explore__verlauf .verlauf", die oben den Abstand
   entfernt – sonst greift sie nicht. */
.explore__verlauf .verlauf--weiter {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(10, 44, 53, .14);
}
/* Längere Marken dürfen umbrechen */
.verlauf__marke { max-width: 100%; line-height: 1.7; }
/* Kennzahlen unter der Marke */
.verlauf__eckdaten {
  margin: 14px 0 0;
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--c-ink-soft);
}
/* Vierzeilige Jahresmarken brauchen etwas mehr Breite */
.station__jahr { width: 84px; left: -114px; }
.verlauf__spur { padding-left: 114px; }
.verlauf__spur::before { left: 89px; }

/* Schlussnotiz unter einem Verlauf, etwa eine Erläuterung zum Partner */
.verlauf__notiz {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 44, 53, .1);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}


/* ======================================================================
   Feld 02 im Geschichten-Aufbau: Geschichte mit Aufmacher, Zeitstrahl
   daneben, Referenzen darunter. Ausklappbar.
   ====================================================================== */

/* Der Geschichtenblock nimmt die volle Breite des Feldes ein */
.explore--verlauf .explore__geschichten { grid-column: 1 / -1; grid-row: 2; }

.gesch { padding-top: 44px; }
.gesch + .gesch { margin-top: 10px; border-top: 1px solid rgba(10,44,53,.14); }

.gesch__kopf {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  cursor: pointer;
}
.gesch__titel {
  margin: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-head-deep); flex: 1 1 380px;
}
.gesch__spanne {
  font-size: .82rem; letter-spacing: .12em; color: var(--c-accent); white-space: nowrap;
}
.gesch__knopf {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-head-deep); display: flex; align-items: center; gap: 9px;
}
.gesch__knopf::after {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(10,44,53,.3);
  background:
    linear-gradient(var(--c-head-deep), var(--c-head-deep)) center/9px 1px no-repeat,
    linear-gradient(var(--c-head-deep), var(--c-head-deep)) center/1px 9px no-repeat;
}
.gesch.is-offen .gesch__knopf::after {
  background: linear-gradient(var(--c-head-deep), var(--c-head-deep)) center/9px 1px no-repeat;
}

.gesch__anriss { margin: 12px 0 0; font-size: .95rem; line-height: 1.8; max-width: 70ch; }
.gesch.is-offen .gesch__anriss { display: none; }
.gesch__inhalt { display: none; }
.gesch.is-offen .gesch__inhalt { display: block; }

/* Aufmacher: das Projekt, um das es geht */
.aufmacher { position: relative; margin: 22px 0 0; }
.aufmacher__bild { position: relative; aspect-ratio: 21/9; overflow: hidden; }
.aufmacher__bild img { width: 100%; height: 100%; object-fit: cover; }
.aufmacher__schild {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 14px 22px 15px; background: var(--c-dark); color: #fff; max-width: 85%;
}
.aufmacher__name { display: block; font-size: 1rem; letter-spacing: .02em; }
.aufmacher__ort {
  display: block; margin-top: 3px; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* Erzählung links, Zeitstrahl rechts */
.gesch__spalten {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: 56px; margin-top: 30px;
}
.gesch__text p { margin: 0 0 14px; font-size: .95rem; line-height: 1.8; }
.gesch__text strong { font-weight: 600; color: var(--c-head-deep); }
.gesch__marke {
  display: inline-block; margin-top: 8px; padding: 7px 14px;
  background: var(--c-dark); color: #fff;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7;
}
.gesch__eckdaten { margin: 14px 0 0; font-size: .88rem; color: var(--c-ink-soft); }
.gesch__schluss { font-weight: 600; color: var(--c-head-deep); }

.zeit { position: relative; padding-left: 92px; }
.zeit::before {
  content: ""; position: absolute; left: 67px; top: 8px; bottom: 8px;
  width: 1px; background: rgba(10,44,53,.16);
}
.zeit__punkt { position: relative; margin-bottom: 26px; }
.zeit__punkt:last-child { margin-bottom: 0; }
.zeit__jahr {
  position: absolute; left: -92px; top: 0; width: 62px; text-align: right;
  font-size: .86rem; font-weight: 600; letter-spacing: .05em; line-height: 1.35;
  color: var(--c-head-deep);
}
.zeit__punkt::before {
  content: ""; position: absolute; left: -29px; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-panel-blue);
}
.zeit__punkt:last-child::before { background: var(--c-dark); }
.zeit__punkt p { margin: 0; font-size: .9rem; line-height: 1.7; }

/* Referenzen unter der Geschichte */
.belege { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(10,44,53,.12); }
.belege__titel {
  margin: 0 0 16px; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-head);
}
.belege__reihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.beleg { background: var(--c-paper); }
.beleg__bild { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.beleg__bild img { width: 100%; height: 100%; object-fit: cover; }
.beleg__text { padding: 16px 20px 20px; }
.beleg__titel { margin: 0; font-size: .96rem; font-weight: 400; color: var(--c-head-deep); }
.beleg__sub { margin: 4px 0 0; font-size: .84rem; color: var(--c-ink-soft); }

/* Ablage: Referenzen, die noch keine Geschichte haben */
.ablage { margin-top: 56px; padding-top: 40px; border-top: 2px solid rgba(10,44,53,.18); }
.ablage__titel {
  margin: 0 0 6px; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-head-deep);
}
.ablage__hinweis { margin: 0 0 22px; font-size: .88rem; color: var(--c-ink-soft); }
.ablage__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 34px;
}
.ablage__liste li {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(10,44,53,.1); font-size: .94rem;
}
.ablage__name { color: var(--c-head-deep); flex: 1 1 auto; }
.ablage__stand {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent); white-space: nowrap;
}

@media (max-width: 1080px) {
  .gesch__spalten { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .belege__reihe { grid-template-columns: 1fr; }
  .ablage__liste { grid-template-columns: 1fr; }
  .aufmacher__bild { aspect-ratio: 16/10; }
  .aufmacher__schild { position: static; max-width: none; }
  .zeit { padding-left: 0; }
  .zeit::before, .zeit__punkt::before { display: none; }
  .zeit__jahr {
    position: static; display: block; width: auto; text-align: left; margin-bottom: 5px;
  }
  .gesch__titel { font-size: .98rem; }
}

/* --- Karriereseite: Symbole in den Kästen ------------------------------- */
.benefit__icon {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: 16px;
  color: var(--c-head);
}
.benefit__icon svg { width: 100%; height: 100%; display: block; }
.benefit--studium .benefit__icon { color: var(--c-head-deep); }

/* --- Karriereseite: Standort als Bild-Text-Block ------------------------ */
.standort {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  margin-top: var(--gap);
}
.standort__bild { overflow: hidden; min-height: 320px; }
.standort__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.standort__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 46px;
  background: var(--c-panel-blue2);
}
.standort__ort {
  margin: 0 0 6px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-head);
}
.standort__titel {
  margin: 0;
  font-size: 1.05rem; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-head-deep);
}
.standort__text p:not(.standort__ort) { margin: 0 0 12px; font-size: .95rem; line-height: 1.8; }
.standort__text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .standort { grid-template-columns: 1fr; }
  .standort__bild { min-height: 240px; aspect-ratio: 16/10; }
  .standort__text { padding: 32px 26px; }
}


/* --- Stellenliste: Kopfzeile innerhalb des Knopfs ----------------------- */
.job__head { padding: 0; }
.job__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.job__claim {
  margin: 5px 0 0;
  font-size: .94rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-ink);
}
/* Seitliche Polsterung am Rahmen, damit sie im zugeklappten Zustand keine
   Höhe erzeugt. Der untere Abstand kommt erst beim Aufklappen dazu. */
.job__body { padding: 0 26px 0 22px; }
.job__body-inner { padding-bottom: 0; }
.job.is-open .job__body-inner { padding-bottom: 30px; }

@media (max-width: 620px) {
  .job__toggle { padding: 22px 16px 22px 14px; gap: 14px; }
  .job__body { padding: 0 16px 0 14px; }
  .job.is-open .job__body-inner { padding-bottom: 26px; }
}

/* Auf den Kompetenzseiten stehen unten die drei übrigen Bereiche – gleiche
   Kacheln wie auf der Startseite, nur zu dritt. */
.pillars--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .pillars--drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pillars--drei { grid-template-columns: 1fr; } }

/* --- Seitenende der Startseite: Kontakt und Insights -------------------- */
.schluss {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.schluss__teil { display: flex; flex-direction: column; }

.kachel { flex: 1; }

/* Links: Text und Bild nebeneinander im hellen Feld */
.kachel--kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 40px;
  background: var(--c-panel-blue);
}
/* Das Bild füllt die Höhe der Kachel, damit beide Spalten gleich hoch sind. */
.kachel--kontakt .kachel__bild { aspect-ratio: auto; align-self: stretch; min-height: 300px; }
.kachel__text p { margin: 0; font-size: .98rem; line-height: 1.85; }
.kachel__weiter {
  display: inline-block;
  margin-top: 22px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-head-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.kachel__weiter:hover, .kachel__weiter:focus-visible { border-bottom-color: var(--c-head-deep); }
.kachel__bild { aspect-ratio: 1 / 1; overflow: hidden; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Rechts: dunkles Feld mit den Verweisen */
.kachel--insight {
  padding: 44px 44px 40px;
  background: var(--c-dark);
  color: #fff;
}
.kachel--insight .insight__lead {
  margin: 0 0 20px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
}
.kachel--insight .insight__text {
  margin: 0 0 30px;
  font-size: .95rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .82);
}
.insight__weg { margin: 0 0 12px; }
.insight__weg:last-child { margin-bottom: 0; }
.kachel--insight .link-arrow {
  color: #fff;
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.insight__punkt { color: rgba(255, 255, 255, .5); margin: 0 6px; }

@media (max-width: 860px) {
  .schluss { grid-template-columns: 1fr; }
  .kachel--kontakt { grid-template-columns: 1fr; padding: 30px 26px; }
  .kachel__bild { aspect-ratio: 16 / 10; }
  .kachel--insight { padding: 32px 26px 30px; }
}

/* --- Fünf Kästen auf der Startseite: Ziffer und Verweis ---------------- */
/* Die Ziffern 01 bis 05 entsprechen den Feldern auf der Entwicklungen-Seite. */
.devcard__num {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  min-width: 52px;
  padding: 10px 14px 11px;
  background: var(--c-paper);
  color: var(--c-head-deep);
  font-size: 1.16rem;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
}
.devcard__weiter {
  display: block;
  margin: 18px 0 20px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-head-deep);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.devcard:hover .devcard__weiter,
.devcard:focus-visible .devcard__weiter { border-bottom-color: var(--c-head-deep); }
/* Der Verweis sitzt direkt über dem Bild, das Bild bleibt unten bündig. */
.devcard__weiter + .devcard__media { margin-top: 0; }
.devcard__lead { margin-bottom: auto; }

/* ======================================================================
   Einheitliche Schriftgrößen nach Vorgabe
   Überschrift   27 pt / 35 pt Zeilenabstand  =  36 px / 46,7 px
   Kleinzeile    22 pt                        =  29,3 px
   Fließtext     15,6 pt / 20 pt              =  20,8 px / 26,7 px
   ====================================================================== */
:root {
  --t-head: 36px;
  --t-head-zeile: 46.7px;
  --t-sub: 29.3px;
  --t-copy: 20.8px;
  --t-copy-zeile: 26.7px;
}

/* Überschriften – die Startseite ist ausgenommen und behält ihre
   ursprünglichen Größen. */
/* 27 pt sind der Höchstwert. Auf schmalen Bildschirmen wird die Überschrift
   kleiner, sonst läuft sie über den Rand. Der Zeilenabstand folgt als
   Verhältnis: 35 pt zu 27 pt sind rund 1,3. */
body:not(.startseite) .devhead__title,
body:not(.startseite) .page-head__title,
body:not(.startseite) .article__title,
body:not(.startseite) .ueber__title,
body:not(.startseite) .block-title {
  font-size: clamp(1.55rem, 6.4vw, var(--t-head));
  line-height: 1.3;
}

/* Die Kleinzeile unter der Überschrift bleibt wie bisher. Bei 22 pt wäre sie
   fast so groß wie die Überschrift und würde die Rangfolge umkehren – die
   Vorgabe meint vermutlich eine andere Ebene. Beim Grafiker nachfragen. */

/* Fließtext */
body:not(.startseite) :is(.devlead__text p,
.explore__intro p,
.gesch__text p,
.verlauf__text p,
.station__text p,
.insight__text,
.article__body p,
.article__lead,
.split__text p,
.legal__body p,
.contact__text p,
.benefit p,
.standort__text p:not(.standort__ort),
.job__body p,
.tile__text,
.pillar__lead,
.devcard__lead) {
  font-size: var(--t-copy);
  line-height: var(--t-copy-zeile);
}

/* ======================================================================
   Feld 03 im neuen Entwurf: Einleitung mit Bildwechsel, darunter die
   Projekte an einer senkrechten Spur, alle zugeklappt.
   ====================================================================== */
/* Die allgemeine .field-Regel setzt zwei Spalten – hier stehen die Blöcke
   untereinander. */
.feld--benchmark {
  display: block;
  background: var(--c-panel-green);
  padding: 64px 70px 72px;
  border-top: 0;
}

/* --- Kopf --- */
.feld__kopf {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  margin-bottom: 58px;
}
.feld__name {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.feld__claim {
  margin: 14px 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.feld__nr {
  padding-left: 34px;
  border-left: 1px solid rgba(10, 44, 53, .3);
  font-size: 3.6rem;
  font-weight: 300;
  line-height: .96;
  color: var(--c-accent);
}

/* --- Einleitung: zwei Reihen, Text und Bild über Kreuz --- */
.einleitung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 60px;
  align-items: start;
}
.einleitung__kopf {
  margin: 0 0 12px;
  font-size: 1.04rem;
  font-weight: 400;
  color: var(--c-head);
}
.einleitung__text p { margin: 0 0 26px; }
.einleitung__text p:last-child { margin-bottom: 0; }
.einleitung__text--unten { order: 4; }
.einleitung__bild--rechts { order: 2; }
.einleitung__bild--links { order: 3; }
.einleitung__bild { margin: 0; }
.einleitung__bild img { width: 100%; height: auto; display: block; }

/* --- Projekte --- */
.projekte {
  position: relative;
  margin-top: 72px;
  padding-left: 46px;
  border-left: 1px solid rgba(10, 44, 53, .3);
}
.projekte__titel {
  margin: 0 0 30px;
  font-size: .96rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-head);
}

.projekt { position: relative; }
.projekt + .projekt { margin-top: 30px; }

.projekt__kopf {
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: start;
  gap: 20px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
/* Signet auf der Spur */
.projekt__punkt {
  position: absolute;
  left: -60px; top: 1px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-dark);
}
.projekt__punkt img { width: 16px; height: auto; filter: brightness(0) invert(1); }

.projekt__name {
  font-size: 1rem;
  letter-spacing: .1em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-head);
}
.projekt__name strong {
  display: block;
  font-weight: 600;
  color: var(--c-head-deep);
}
.projekt__plus {
  position: relative;
  width: 20px; height: 20px;
  margin-top: 4px;
  justify-self: start;
  grid-column: 1;
  grid-row: 2;
}
.projekt__plus::before, .projekt__plus::after {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 18px; height: 2px;
  background: var(--c-accent);
  transition: transform .3s ease;
}
.projekt__plus::after { transform: rotate(90deg); }
.projekt.is-offen .projekt__plus::after { transform: rotate(0deg); }

/* Der Inhaltsbereich ist immer offen – auf jedem Bildschirm. Zugeklappt ist
   darin nur das Bild zu sehen, Text und Leistungsumfang erscheinen beim Öffnen.
   Früher war der ganze Bereich auf Höhe null gefahren; das verbarg auch das
   Bild, und die Spur bestand aus reinen Textzeilen. */
.projekt__inhalt { display: grid; grid-template-rows: 1fr; }
.projekt__innen { min-height: 0; overflow: visible; padding: 20px 0 6px; }
.projekt.is-offen .projekt__innen { padding: 20px 0 10px; }

/* Zugeklappt steht neben dem Bild ein Anriss: der erste Absatz des Textes, auf
   zwei Zeilen begrenzt. So sieht man, worum es geht, bevor man das Plus
   drückt. Der Anriss ist kein eigenes Feld – es ist derselbe Absatz, der beim
   Öffnen einfach vollständig wird. Dadurch gibt es den Text nur einmal, und
   wer ihn ändert, ändert automatisch auch den Anriss.

   Beim Öffnen kommen die übrigen Absätze und der Leistungsumfang dazu. Der
   Leistungsumfang ist ein Raster, kein Block – mit `display: block` fiele die
   Aufteilung von Punkteliste und Schlagworten auseinander. */
.projekt__text, .projekt .umfang { display: none; }
.projekt.is-offen .projekt__text {
  display: block;
  animation: textEin .42s cubic-bezier(.22, .61, .36, 1) both;
}
.projekt.is-offen .umfang {
  display: grid;
  animation: textEin .42s cubic-bezier(.22, .61, .36, 1) both;
}

/* Bild links, Text rechts – wie im Entwurf des Grafikers. */
.projekt__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 52px;
  align-items: start;
}
.projekt__bild { order: -1; }
.projekt__text p { margin: 0 0 22px; }
.projekt__text p:last-child { margin-bottom: 0; }
.projekt__bild { margin: 0; }
.projekt__bild img { width: 100%; height: auto; display: block; }
/* Ein Projekt kann mehrere Bilder tragen; sie stehen untereinander in der
   linken Spalte. Bisher ist das nur bei Rheinland-Pfalz in Feld 01 der Fall. */
.projekt__bild img + img { margin-top: 20px; }

/* --- Leistungsumfang --- */
.umfang { margin-top: 42px; }
.umfang__titel {
  margin: 0 0 18px;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-head);
}
/* Die Schlagworte rechts beginnen auf Höhe der Überschrift „Leistungsumfang",
   nicht erst auf Höhe des ersten Punktes. Dafür werden Liste und Schlagworte
   zu Rasterfeldern des umgebenden Blocks. */
/* Spalten und Abstand sind mit .projekt__spalten gleich, damit die Schlagworte
   genau unter der Textspalte darüber beginnen und die Punkteliste unter dem
   Bild. Wird eines der beiden Raster geändert, muss das andere mitgeändert
   werden. */
.umfang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-rows: max-content 1fr;
  column-gap: 52px;
  align-items: start;
}
.umfang__titel { grid-column: 1; grid-row: 1; }
.umfang__spalten { display: contents; }
.umfang__liste { grid-column: 1; grid-row: 2; }
.umfang__schlag { grid-column: 2; grid-row: 1 / span 2; }
/* Eigene Spur mit Punkten je Eintrag. Sie liegt innerhalb der Liste, weil der
   Bereich beim Zuklappen beschnitten wird und alles außerhalb verschwinden
   würde. */
.umfang__liste {
  margin: 0;
  position: relative;
  padding-left: 34px;
}
/* Die Linie liegt innerhalb der Liste, damit die Punkte vollständig sichtbar
   bleiben – alles links davon würde beim Zuklappen beschnitten. */
.umfang__liste::before {
  content: "";
  position: absolute;
  left: 4px; top: .6em; bottom: .6em;
  width: 1px;
  background: rgba(10, 44, 53, .25);
}
.umfang__liste dt {
  position: relative;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-head-deep);
}
.umfang__liste dt::before {
  content: "";
  position: absolute;
  left: -34px; top: .42em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-panel-green);
}
.umfang__liste dd {
  margin: 2px 0 16px;
  font-size: .92rem;
  line-height: 1.6;
}
.umfang__liste dd:last-child { margin-bottom: 0; }
.umfang__schlag { margin: 0; padding: 0; list-style: none; }
/* Trägt ein Projekt nur eine Aufzählung und keine Punkteliste – bisher nur die
   Key Facts bei CUTISS in Feld 04 –, rückt sie unter die Überschrift in die
   linke Spalte. Sonst bliebe links eine auffällige Lücke. */
.umfang--einspaltig .umfang__schlag { grid-column: 1; grid-row: 2; }
.umfang__schlag li {
  margin-bottom: 9px;
  font-size: .92rem;
  color: var(--c-ink-soft);
}

@media (max-width: 1080px) {
  .einleitung { grid-template-columns: 1fr; }
  .einleitung__text--unten, .einleitung__bild--rechts, .einleitung__bild--links { order: 0; }
  .projekt__spalten { grid-template-columns: 1fr; gap: 28px; }
  /* Untereinander: Überschrift, Liste, Schlagworte */
  .umfang { grid-template-columns: 1fr; }
  .umfang__liste { grid-column: 1; grid-row: 2; }
  .umfang__schlag { grid-column: 1; grid-row: 3; margin-top: 26px; }
}
@media (max-width: 760px) {
  .feld--benchmark { padding: 40px 24px 48px; }
  .feld__kopf { gap: 22px; }
  .feld__nr { font-size: 2.6rem; padding-left: 22px; }
  .projekte { padding-left: 34px; }
  .projekt__punkt { left: -48px; width: 24px; height: 24px; }
}

/* Feld 02: Einleitung ohne Bilder, Text zweispaltig über die volle Breite */
.einleitung--nurtext { display: block; }
.einleitung--nurtext .explore__intro { columns: 2; column-gap: 56px; }
.einleitung--nurtext .explore__intro p { break-inside: avoid; margin: 0 0 18px; }
/* Der Einleitungstext trägt noch die alte Klasse `explore__intro` und wurde
   dadurch von der Grafiker-Vorgabe auf 20,8 px gesetzt – als einziger Block im
   Feld. Projekttexte und die Einleitung von Feld 03 stehen bei 16 px. Hier
   gleichgezogen, damit innerhalb eines Feldes nur eine Textgröße vorkommt. */
body:not(.startseite) .einleitung .explore__intro p {
  font-size: 16px;
  line-height: 1.65;
}
/* Erster Teil des Projekttitels in heller Schrift */
.projekt__vor { color: var(--c-head); }
@media (max-width: 860px) {
  .einleitung--nurtext .explore__intro { columns: 1; }
}

/* Vier Kacheln am Ende einer Entwicklungsseite */
.devcards--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .devcards--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .devcards--vier { grid-template-columns: 1fr; } }


/* --- Schmale Bildschirme: letzte Überläufe abstellen -------------------- */
@media (max-width: 760px) {
  /* Titel und Nummer dürfen umbrechen, sonst schiebt die Nummer hinaus */
  .feld__kopf { flex-wrap: wrap; }
  .feld__nr { padding-left: 0; border-left: 0; }

  /* Bild im Standortblock füllt die Spalte, statt eine Mindestbreite
     aus dem Seitenverhältnis zu erzwingen */
  .standort__bild { width: 100%; aspect-ratio: auto; min-height: 200px; }

  /* Lange Wörter in Seitentiteln dürfen trennen */
  .page-head__title, .page-head__claim { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}

/* Rasterspalten dürfen nie breiter werden als der Platz, den sie haben */
.explore, .explore--verlauf { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1081px) {
  .explore--verlauf { grid-template-columns: minmax(0, 1fr) 430px; }
}

/* --- Restliche Überläufe bei schmalen und mittleren Breiten ------------- */
/* Lange Wörter in Projekt- und Feldtiteln dürfen trennen */
/* Lange Wörter dürfen mit Trennstrich umbrechen, aber nicht mitten im Wort
   abgeschnitten werden. */
.projekt__name, .explore__label, .explore__claim, .feld__name, .benefit__title {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Bilder bleiben innerhalb ihrer Spalte.

   Hier stand früher zusätzlich `height: auto`. Das Bild liegt aber absolut in
   seiner Zelle und soll deren Höhe füllen (`height: 100%`, siehe oben bei
   `.service__media img`). Mit `auto` behielt es seine eigene Höhe und ragte
   über den blauen Textkasten daneben hinaus. `max-width` allein genügt. */
.service__media, .service__media img { max-width: 100%; }
/* Die Kästen auf der Kontaktseite dürfen schrumpfen */
.benefits, .benefits--karriere { grid-auto-columns: minmax(0, 1fr); }
.benefit { min-width: 0; }

/* Diese beiden Regeln stehen weiter oben mit höherem Gewicht und erzwingen
   feste Spaltenbreiten. Unterhalb der jeweiligen Umbruchbreite werden sie
   hier aufgehoben. */
@media (max-width: 1080px) {
  .field--lead .explore { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
}
@media (max-width: 1100px) {
  .service { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); }
}
@media (max-width: 860px) {
  .service { grid-template-columns: minmax(0, 1fr); }
}

/* Zwischen Handymenü und voller Breite wird es eng: Menü etwas enger setzen,
   sonst wird die Sprachwahl hinausgeschoben. */
@media (min-width: 861px) and (max-width: 1040px) {
  .nav__list { gap: 10px; font-size: .78rem; }
  .nav__list li + li::before { margin-right: 10px; }
  .header__inner { gap: 16px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .feld--benchmark { padding: 32px 16px 40px; }
  .field--lead .explore { padding: 26px 16px; }
  .projekte { padding-left: 28px; }
  .projekt__punkt { left: -40px; }
  .explore__nr, .feld__nr { font-size: 2.1rem; }
}

/* Die Kompetenzkacheln dürfen auf sehr schmalen Geräten schrumpfen */
.pillar { min-width: 0; }
.pillar__media { max-width: 100%; }
.pillar__media img { max-width: 100%; height: auto; }

/* ======================================================================
   Handyansicht der Projekte: das Bild ist immer sichtbar
   Zugeklappt stehen Titel, Plus und Bild. Beim Öffnen erscheint der Text
   darunter. Das Bild bleibt dabei an seinem Platz.
   ====================================================================== */
@media (max-width: 760px) {
  /* Der Inhaltsbereich bleibt offen, damit das Bild zu sehen ist. */
  .projekt__inhalt { grid-template-rows: 1fr; }
  .projekt__innen { padding: 18px 0 4px; overflow: visible; }
  .projekt.is-offen .projekt__innen { padding: 18px 0 10px; }

  /* Bild zuerst, Text darunter. */
  .projekt__spalten { display: flex; flex-direction: column; gap: 0; }
  .projekt__bild { order: -1; margin-bottom: 0; }
  .projekt__bild img { width: 100%; height: auto; display: block; }

  /* Der Anriss steht unter dem Bild, der Rest kommt beim Öffnen dazu.
     Die Regeln dafür stehen weiter oben und gelten auf jeder Breite. */
  .projekt__text { margin-top: 18px; }
}

@keyframes textEin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .projekt.is-offen .projekt__text,
  .projekt.is-offen .umfang { animation: none; }
}

/* Projekttitel auf dem Handy enger setzen, damit lange Wörter in eine Zeile
   passen und keine einzelnen Buchstaben hängen bleiben. */
@media (max-width: 760px) {
  .projekt__name { font-size: .9rem; letter-spacing: .035em; line-height: 1.45; }
  .projekt__kopf { gap: 14px; }
}
@media (max-width: 400px) {
  .projekt__name { font-size: .84rem; letter-spacing: .02em; }
}

/* Jahresmarke im Fließtext eines Projekts */
.projekt__jahr {
  margin: 30px 0 10px !important;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-head);
}
.projekt__text > .projekt__jahr:first-child { margin-top: 0 !important; }


/* ======================================================================
   Kacheln als Zeile – nur auf schmalen Bildschirmen
   ----------------------------------------------------------------------
   Kompetenz- und Entwicklungskacheln standen mobil untereinander, jede mit
   einem Bild über die volle Breite. Vier bzw. fünf davon ergaben einen
   Abschnitt von rund drei Bildschirmhöhen. Hier steht stattdessen ein kleines
   quadratisches Bild links, Titel und Satz rechts.

   Beide Kachelarten haben denselben Aufbau, deshalb stehen sie zusammen.
   Die Pfeile, „Mehr erfahren" und „weiterlesen…" entfallen – die ganze Kachel
   ist anklickbar, die Zeile kostet mobil nur Platz. Der kurze Strich unter dem
   Titel entfällt ebenfalls, er trennt in der Zeile nichts mehr.

   Der Zeilenumbruch im Titel bleibt erhalten: Wird er ausgeblendet, fällt auch
   das Leerzeichen weg und es steht „HEALTHDEVELOPMENT".

   Dieser Block steht bewusst am Ende der Datei, damit er die früheren
   Spaltenregeln überschreibt – auch die der Dreier-Reihe auf den
   Kompetenzseiten.
   ====================================================================== */
@media (max-width: 860px) {

  .pillars, .pillars--drei, .devcards--fuenf { grid-template-columns: 1fr; gap: 10px; }
  .devcards--fuenf > .devcard { grid-column: span 1; }

  .pillar, .devcard {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 12px;
  }

  .pillar__media, .devcard__media {
    grid-column: 1; grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    margin-top: 0;
  }
  .devcards--fuenf > .devcard:nth-last-child(1) .devcard__media { aspect-ratio: 1 / 1; }

  .pillar__title, .devcard__title {
    grid-column: 2; grid-row: 1;
    font-size: .86rem;
    letter-spacing: .07em;
    padding-right: 0;
  }
  .pillar__title.rule::after, .devcard__title.rule::after { display: none; }

  /* Vier Schreibweisen für dieselbe Sache – das hat einen Grund.

     Die Grafiker-Vorgabe greift als `body:not(.startseite) :is(…)` zu. Bei
     `:is()` zählt nicht der passende Eintrag der Liste, sondern der
     gewichtigste darin – das ist `.standort__text p:not(.standort__ort)`.
     Damit kommt die Vorgabe auf drei Klassen und zwei Elemente und schlägt
     jede einfachere Regel, auch eine mit drei Klassen.

     Deshalb stehen hier beide Fassungen: die mit `body:not(.startseite)` für
     alle Unterseiten, wo die Vorgabe greift, und die schlichte für die
     Startseite, wo sie es nicht tut.

     Wird der Liste oben ein noch gewichtigerer Eintrag hinzugefügt, kippt das
     erneut. Dann hier nachziehen. */
  .pillars .pillar .pillar__lead,
  .devcards .devcard .devcard__lead,
  body:not(.startseite) .pillars .pillar .pillar__lead,
  body:not(.startseite) .devcards .devcard .devcard__lead {
    grid-column: 2; grid-row: 2;
    margin: 5px 0 0;
    font-size: .8rem;
    font-weight: 400;
  }

  .pillar__num, .devcard__num { width: 30px; height: 26px; font-size: .58rem; }
  .pillar__more, .devcard__weiter, .devcard__arrow { display: none; }
}

/* Der abschließende, fett gesetzte Absatz im Einführungskasten der
   Entwicklungen steht in derselben Größe wie die übrigen und wirkt durch die
   Fettung schwerer. Auf dem Handy, wo er über viele Zeilen läuft, ist er
   deshalb eine Stufe kleiner. Er ist der einzige Absatz dort, der vollständig
   aus <strong> besteht – daher genügt dieser Zugriff. */
@media (max-width: 860px) {
  .devlead__text p strong { font-size: .88rem; }
}

/* ======================================================================
   Fußzeile auf schmalen Bildschirmen
   ----------------------------------------------------------------------
   Vorher standen die drei Marken untereinander und die sieben Menüpunkte
   einspaltig – zusammen rund 360 px Höhe, die man jedes Mal durchscrollen
   musste. Jetzt stehen die Marken nebeneinander und das Menü zweispaltig.

   Die Höhe der Logos hängt an der Bildschirmbreite. Fest gesetzt läuft die
   Reihe über: Die drei Logos sind zusammen rund das 12,5-fache ihrer Höhe
   breit, bei 30 px wären das 374 px – mehr, als bei 390 px Schirm zur
   Verfügung steht. Mit clamp passt es von 320 px aufwärts.

   Nachgerechnet bei 320, 360, 390 und 430 px. Kommt eine vierte Marke dazu
   oder ändert sich ein Seitenverhältnis, muss der Wert neu bestimmt werden.
   ====================================================================== */
@media (max-width: 860px) {
  .footer__brands {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .footer__brands img { height: clamp(13px, 4.9vw, 20px); width: auto; }
  .footer__brands span { display: none; }

  /* Sieben Punkte in zwei Spalten: vier links, drei rechts */
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
}

/* ======================================================================
   Bildflächen auf schmalen Bildschirmen flacher
   ----------------------------------------------------------------------
   Mobil waren mehrere Flächen fast quadratisch – „Über uns" 320 px bei
   390 px Breite ist 1,2:1. Ein Foto wirkt dadurch wuchtiger, als es muss,
   und man scrollt länger. Hier auf rund 16:9 gebracht.

   Die Breite bleibt unverändert: Schmaler als die Textspalte würde ein Bild
   neben dem Fließtext verloren wirken. Der Hebel ist allein die Höhe.

   Achtung: Die Bilder sind auf `cover` gesetzt, eine flachere Fläche
   beschneidet also stärker oben und unten. Beim Kontaktfoto sitzt der
   Ausschnitt deshalb etwas höher, sonst geraten die Gesichter an den Rand.
   Bei neuen Motiven ist das kurz zu prüfen.
   ====================================================================== */
@media (max-width: 860px) {
  .split__media { min-height: 225px; }
  .kachel--kontakt .kachel__bild { min-height: 215px; }
  .kachel--kontakt .kachel__bild img { object-position: center 35%; }
  .devlead__media { min-height: 200px; }
}

/* ======================================================================
   Titelbereich der Startseite auf dem Handy
   ----------------------------------------------------------------------
   Der Titelbereich ist dort hochkant (390 × 520), die Querfassung des Bildes
   wurde deshalb stark beschnitten: Von 1200 px Breite kamen nur rund 470 auf
   390 CSS-Pixel – eine Dichte von 1,2, also sichtbar weich auf heutigen
   Geräten. `hero-start-mobil.jpg` ist jetzt ein eigener Hochformat-Ausschnitt
   mit 780 × 1040 und damit doppelt so dicht.

   Weil der Ausschnitt schon in der Datei steckt, steht das Bild hier mittig
   statt bei 72 %.

   Der Satz unter der Überschrift stand in der Grundstärke und wirkte durch den
   kräftigen Schatten schwerer als die Überschrift darüber, die leichter
   gesetzt ist. Beides ist zurückgenommen; der Schatten bleibt, weil der
   Himmel nach oben hin heller wird.
   ====================================================================== */
@media (max-width: 860px) {
  /* Flacher als die früheren 520 px. Der Titelbereich ist mobil hochkant, das
     Bild quer – je höher der Bereich, desto schmaler der sichtbare Streifen.
     Bei 520 px waren es 39 % der Bildbreite, bei 440 px sind es 47 %, und die
     Pixeldichte steigt von 2,18 auf 2,57. Text und Knopf rücken dafür näher an
     den unteren Rand. `hero-start-mobil.jpg` ist genau auf dieses Verhältnis
     zugeschnitten (1003 × 1132), es wird also nicht noch einmal beschnitten. */
  .hero { min-height: 440px; }
  .hero--start .hero__media img { object-position: center center; }
  .hero__quote {
    font-weight: 300;
    text-shadow: 0 1px 10px rgba(8, 38, 46, .45);
  }
}

/* Der Einführungskasten der Entwicklungen trägt mobil viel Text, der nicht
   gekürzt werden soll. Statt etwas wegzulassen steht er hier enger: weniger
   Innenabstand, knapperer Zeilen- und Absatzabstand. Gelesen wird weiterhin
   alles, der Block wird nur rund 100 px flacher. Weiter zusammenrücken sollte
   man ihn nicht – darunter leidet die Lesbarkeit am Stück. */
@media (max-width: 860px) {
  .devlead__text { padding: 22px 20px 24px; }
  .devlead__text p { line-height: 1.5; margin-bottom: .8em; }
  .devlead__more { margin-top: 10px; }
}

/* Der Insights-Kasten am Seitenende stand mobil eine Spur zu groß – die fette
   Zeile bei 1,02 rem, der Text bei 0,95 rem, die Verweise bei 0,86 rem. Im
   Vergleich zur Fußzeile direkt darunter wirkte er dadurch lauter als
   beabsichtigt. Jede Ebene ist hier eine Stufe zurückgenommen, die Rangfolge
   zwischen fetter Zeile, Text und Verweisen bleibt dieselbe. */
@media (max-width: 860px) {
  .kachel--insight { padding: 26px 22px 26px; }
  .kachel--insight .insight__lead { font-size: .92rem; margin-bottom: 16px; }
  .kachel--insight .insight__text {
    font-size: .86rem;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .kachel--insight .link-arrow { font-size: .78rem; }
  .insight__weg { margin-bottom: 10px; }
}

/* „News & Insights" und „Newsletter" stehen am Rechner untereinander. Auf dem
   Handy passen sie nebeneinander in eine Zeile – zusammen rund 275 px bei
   346 px verfügbarer Breite. Der Punkt dazwischen kommt aus dem Stylesheet,
   damit er am Rechner nicht erscheint. `flex-wrap` ist Absicht: Bei 320 px
   wird es knapp, dann rutscht „Newsletter" sauber in die nächste Zeile,
   statt überzulaufen. */
@media (max-width: 860px) {
  .insight__zeile { display: flex; flex-wrap: wrap; align-items: baseline; }
  .insight__zeile .insight__weg { margin-bottom: 10px; }
  .insight__zeile .insight__weg + .insight__weg::before {
    content: "·";
    margin: 0 8px;
    color: rgba(255, 255, 255, .5);
  }
}

/* Der Kasten „Ihre Entwicklung?" folgt auf dem Handy der Machart des
   Kontaktkastens am Ende der Startseite. Vorher stand die Überschrift klein,
   in Versalien und mit 0,14 em gesperrt – sie brach dadurch in zwei Zeilen und
   wirkte gedrängt. Auf der Startseite ist dieselbe Ebene größer, aber in
   gemischter Schreibweise und leicht gesetzt; das liest sich ruhiger.

   Übernommen sind die Werte von `.devhead__title` und `.kachel__text p`.
   Ändert sich dort etwas, sollte es hier mitgezogen werden.

   Nur für schmale Bildschirme. Am Rechner bleibt die Überschrift in Versalien
   wie die übrigen `block-title` auf der Seite. */
@media (max-width: 860px) {
  .cta { padding: 28px 22px 26px; }
  .cta .block-title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-head);
  }
  .cta p { font-size: .98rem; line-height: 1.75; }
  .cta .btn { margin-top: 24px; }
}

/* Kopfbereich der Unterseiten auf dem Handy flacher. Er war dort 320 px hoch
   bei 390 px Breite, also fast quadratisch, während die Motive quer liegen –
   sichtbar war nur rund die Hälfte der Bildbreite. Bei 220 px sind es 75 %,
   und weil weniger hineingezoomt wird, steigt die Pixeldichte von 2,10 auf
   3,05 – damit reicht sie auch für Bildschirme mit dreifacher Dichte.

   Der Bereich trägt auf den Unterseiten keinen Text, die geringere Höhe kostet
   also nichts. Betroffen sind alle Seiten mit `hero--sub`: die fünf Feldseiten,
   die Übersicht, die Kompetenzseiten, Kontakt, News und die Rechtstexte. */
@media (max-width: 860px) {
  .hero--sub { min-height: 220px; }
}

/* Die Projekttitel in der Spur wirkten größer als die Kacheltitel darunter,
   obwohl sie es kaum waren – 14,4 gegen 13,8 px. Den Eindruck machten der
   Fettdruck und die engere Sperrung: Die Kacheltitel sind mit 0,07 em weiter
   gesperrt und wirken dadurch leichter. Hier auf dieselbe Größe und dieselbe
   Sperrung gebracht.

   Steht nach den Regeln bei 760 und 400 px, damit es diese überschreibt. */
@media (max-width: 860px) {
  .projekt__name {
    font-size: .86rem;
    letter-spacing: .07em;
    line-height: 1.5;
  }
}

/* Keine automatische Silbentrennung in Projekttiteln. Sie verhinderte zwar
   Überläufe, trennte in Versalien aber an unschönen Stellen – „GE-MEINSAME",
   „EI-NEN". Mit `manual` gelten nur die weichen Trennstellen (`&shy;`), die im
   Text gesetzt sind.

   Geprüft: Das längste Wort ohne Trennstelle ist „ENTWICKLUNGSSTUFE" mit 167 px
   bei rund 180 px verfügbarer Breite auf einem 320-px-Gerät. Alle längeren
   Wörter tragen eine Trennstelle. `overflow-wrap: break-word` bleibt als
   letzte Sicherung bestehen.

   Bei neuen Projekttiteln mit langen Wörtern die Trennstelle mitsetzen –
   sonst bricht das Wort hart um, ohne Trennstrich. */
.projekt__name { hyphens: manual; -webkit-hyphens: manual; }

/* Seitenkopf auf dem Handy untereinander statt nebeneinander. Die Ziffer stand
   links, der Text daneben – dadurch begann er 108 px weiter rechts als alle
   Kästen darunter, die am linken Rand ansetzen. Jetzt steht die Ziffer über dem
   Text und beide fluchten mit dem übrigen Inhalt.

   Die Ziffer ist zugleich kleiner: 78 px sind auf einem 390-px-Schirm ein
   Fünftel der Breite. Betroffen sind alle Seiten mit `page-head`, also auch die
   Feldseiten, wo an derselben Stelle ein Symbol statt einer Ziffer steht. */
@media (max-width: 860px) {
  .page-head { flex-direction: column; gap: 18px; }
  .page-head__num { width: 56px; height: 56px; font-size: 1rem; }
  .page-head__num svg { width: 26px; height: 26px; }
}

/* Über uns: höherer Kopfbereich mit eigenem Handyausschnitt.

   Das Motiv zeigt einen weiten Raum mit Empfang und Sitzecke (1800 × 698).
   Im flachen 220-px-Streifen blieb davon ein Band, in dem nur der Tresen zu
   erkennen war. Hier gilt deshalb das Gegenteil der übrigen Unterseiten: Der
   Bereich ist höher, damit das Motiv größer steht.

   Damit dabei nicht der Browser entscheidet, welcher Teil wegfällt, liegt ein
   eigener Ausschnitt bereit – `ueber-uns-hero-mobil.jpg`, 825 × 698, genau auf
   390 × 330 geschnitten. Er zeigt Tresen, Korridor und die Sitzecke links.

   `hero--motiv` ist für Seiten gedacht, deren Kopfbild ein Motiv trägt, das man
   erkennen soll – im Gegensatz zu den rein dekorativen Streifen. Wird die Höhe
   geändert, muss der Ausschnitt neu erzeugt werden. */
@media (max-width: 860px) {
  .hero--motiv { min-height: 330px; }
}

/* Auf dem Rechner wechseln die Bild-Text-Blöcke die Seite: mal Text links, mal
   rechts (`story--flip`). Auf dem Handy wurde dieser Wechsel mitgenommen – beim
   gewechselten Block stand das Bild dadurch vor seiner eigenen Überschrift, die
   dann zwischen zwei Bildern hing.

   Untereinander gibt es kein Links und Rechts mehr, der Wechsel hat dort also
   keinen Zweck. Jeder Block steht jetzt gleich: erst Überschrift und Text,
   darunter das Bild. */
@media (max-width: 860px) {
  .story--flip .story__text { order: 0; }
  .story--flip .story__media { order: 0; }
}

/* Seiten mit `hero--motiv` bringen ihren Handyausschnitt als eigene Datei mit,
   der Ausschnitt steckt also schon im Bild. Eine seitliche Verschiebung wie bei
   `hero--rechts` würde ihn ein zweites Mal verschieben und die Lesende wieder
   an den Rand drücken. Deshalb hier mittig. */
@media (max-width: 860px) {
  .hero--motiv .hero__media img { object-position: center center; }
}


/* ======================================================================
   Fließtext der Unterseiten auf dem Handy
   ----------------------------------------------------------------------
   Die Vorgabe des Grafikers setzt den Fließtext auf 20,8 px. Daneben stehen
   Beschriftungen, Kleinzeilen und Knöpfe bei 12 bis 16 px – auf dem Handy
   wirken die beiden Maßsysteme wie ein Fehler: ein Absatz groß, die Zeile
   darunter klein. Deshalb gilt hier einheitlich 16 px, dieselbe Größe wie in
   den Projekttexten und auf der Startseite.

   Die Auswahl ist Zeichen für Zeichen dieselbe wie bei der Vorgabe. Das ist
   Absicht: Bei gleicher Gewichtung entscheidet die Reihenfolge, und dieser
   Block steht später in der Datei. Wird die Liste oben geändert, muss sie hier
   mitgeändert werden – sonst greift für die neue Stelle wieder 20,8 px.

   Am Rechner bleibt die Vorgabe des Grafikers unverändert.
   ====================================================================== */
@media (max-width: 860px) {
body:not(.startseite) :is(.devlead__text p,
.explore__intro p,
.gesch__text p,
.verlauf__text p,
.station__text p,
.insight__text,
.article__body p,
.article__lead,
.split__text p,
.legal__body p,
.contact__text p,
.benefit p,
.standort__text p:not(.standort__ort),
.job__body p,
.tile__text,
.pillar__lead,
.devcard__lead) {
  font-size: 16px;
  line-height: 1.65;
}
}

/* Anfahrtskarte auf der Kontaktseite.

   Die Fläche neben dem Text zeigt Bilder sonst füllend an und beschneidet sie
   dabei. Bei einer Karte geht das nicht – sie muss vollständig lesbar bleiben,
   sonst fehlen Straßennamen. Deshalb hier `contain` statt `cover`.

   Die Karte ist hochkant (1100 × 1556), die Fläche je nach Textlänge breiter.
   Der verbleibende Rand trägt die Hintergrundfarbe der Karte selbst (#005267),
   dadurch ist der Übergang nicht zu sehen. Bei einer neuen Karte mit anderem
   Hintergrund ist dieser Wert anzupassen. */
.split__media--karte { background: #005267; }
.split__media--karte img {
  object-fit: contain;
  object-position: center;
}

/* Der Kasten „Ihre Entwicklung?" am Rechner. Die Vorgabe des Grafikers setzt
   `block-title` auf 36 px; im Kasten steht daneben Fließtext mit 16 px und ein
   Knopf mit 13 px. Die Überschrift wirkt dadurch wie aus einer anderen Seite.
   Hier auf 1,6 rem zurückgenommen, Versalien und Sperrung bleiben.

   Nur dieser Kasten. Die übrigen `block-title` auf der Seite folgen weiter der
   Vorgabe. */
@media (min-width: 861px) {
  .cta { padding: 38px 44px; }
  .cta .block-title { font-size: 1.6rem; letter-spacing: .1em; }
}

/* Der zweite Absatz im Titelbereich steht etwas näher am ersten als ein
   gewöhnlicher Absatz – er gehört inhaltlich dazu, soll aber abgesetzt sein.
   Vorher stand dort nur ein Zeilenumbruch, dadurch klebten beide Sätze
   aneinander. */
.hero__quote--zweit { margin-top: -.35em; }

/* ======================================================================
   Zeilenausgleich in Überschriften und Kleinzeilen
   ----------------------------------------------------------------------
   Ohne diese Regel füllt der Browser die erste Zeile bis zum Anschlag und
   schiebt den Rest nach unten. Bei 92 Zeichen und 900 px Grenze blieb so ein
   einzelnes Wort allein in der zweiten Zeile stehen.

   `text-wrap: balance` verteilt den Text gleichmäßig auf die Zeilen. Aus
   „78 Zeichen + 1 Wort" werden zwei Zeilen zu je rund 46 Zeichen.

   Gilt für die Kleinzeilen aller drei Bauarten und für die Überschriften
   darüber, damit dort dasselbe nicht passiert. Ältere Browser kennen die
   Regel nicht und brechen wie bisher um – die Seite bleibt lesbar.
   ====================================================================== */
.page-head__claim, .devhead__claim, .feld__claim,
.page-head__title, .devhead__title, .feld__name,
.case__title, .block-title, .service__title {
  text-wrap: balance;
}

/* ======================================================================
   Mitlaufende Kopfzeile – nur am Rechner
   ----------------------------------------------------------------------
   Die Kopfzeile liegt normalerweise über dem Titelbild und ist dort weiß auf
   Bild. Beim Scrollen wäre sie auf hellem Grund unlesbar, deshalb bekommt sie
   erst ab dem Ende des Titelbereichs einen dunklen Grund und wird dort
   festgestellt. Die Klasse `is-fest` setzt das Skript.

   Sie fällt bewusst schmaler aus als oben und gleitet sanft ein, damit sie
   nicht stört. Wer „Bewegung reduzieren" eingestellt hat, bekommt sie ohne
   Bewegung.

   Auf dem Handy greift nichts davon – dort bleibt es beim bisherigen
   Verhalten mit dem Aufklappmenü.
   ====================================================================== */
@media (min-width: 861px) {
  .header.is-fest {
    position: fixed;
    inset: 0 0 auto 0;
    padding-block: 12px;
    background: rgba(8, 38, 46, .94);
    box-shadow: 0 2px 20px rgba(8, 38, 46, .18);
    animation: kopfEin .3s cubic-bezier(.22, .61, .36, 1) both;
  }
  /* Das Logo steht oben zweizeilig – Signet über Schriftzug. In der schmalen
     mitlaufenden Leiste nebeneinander und kleiner, sonst wird sie zu hoch. */
  .header.is-fest .brand { flex-direction: row; align-items: center; gap: 10px; }
  .header.is-fest .brand__signet { height: 20px; }
  .header.is-fest .brand__word { height: 20px; }
}

@keyframes kopfEin {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header.is-fest { animation: none; }
}

/* ======================================================================
   Aufklappfeld im Menü – nur am Rechner
   ----------------------------------------------------------------------
   „Kompetenzen" und „Entwicklungen" öffnen beim Darüberfahren ein Feld mit
   den vier bzw. fünf Bereichen, je Zeile ein Symbol, der Titel und ein kurzer
   Satz. Unten führt ein Verweis auf die Übersicht.

   Auf dem Handy bleibt alles beim bisherigen Aufklappmenü (`.nav__sub`), das
   Feld ist dort ausgeblendet.

   Die Symbole im Feld müssen eigens eingeschaltet werden: Grafiken im Menü
   sind grundsätzlich verborgen (`.nav__list svg { display: none }`).
   ====================================================================== */
.nav__group--mega { position: relative; }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 60;
  background: #fff;
  color: var(--c-ink);
  box-shadow: 0 18px 50px rgba(8, 38, 46, .18);
  padding: 22px 22px 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mega--vier  { width: 620px; }
.mega--fuenf { width: 760px; }

/* Unsichtbare Brücke nach oben: Ohne sie schließt das Feld, sobald der
   Mauszeiger den Abstand zwischen Menüpunkt und Feld überquert. */
.mega::before {
  content: "";
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}

.nav__group--mega:hover .mega,
.nav__group--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

.megazeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 2px;
  transition: background .18s ease;
}
.megazeile:hover,
.megazeile:focus-visible { background: var(--c-panel-blue); }

.megazeile__symbol {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--c-panel-blue);
  color: var(--c-head-deep);
}
.nav__list .megazeile__symbol svg { display: block; width: 20px; height: 20px; }

.megazeile__text { display: block; min-width: 0; }
.megazeile__titel {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.megazeile__satz {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--c-ink);
}

/* Nur noch im Aufklappfeld der Entwicklungen – bei den vier Bereichen führt
   der Verweis auf dieselbe Seite wie die erste Kachel und ist dort entfallen. */
.mega__alle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 13px 12px 3px;
  border-top: 1px solid #dfe5e3;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.mega__alle span { color: var(--c-accent); font-size: 1rem; }
.mega__alle:hover { color: var(--c-dark); }

@media (max-width: 1080px) { .mega--fuenf { width: 640px; } }
@media (max-width: 860px)  { .mega { display: none; } }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* ======================================================================
   Anfahrtskarte: Detailkreis beim Darüberfahren
   ----------------------------------------------------------------------
   Der Kreis unten rechts auf der Karte wird auf der Seite nur rund 262 px
   breit angezeigt – zu klein für die Straßennamen darin. Beim Darüberfahren
   erscheint er deshalb vergrößert und tritt dabei bewusst über den Rand der
   Karte hinaus, statt dort beschnitten zu werden.

   Die Werte sind am Bild gemessen: Der Kreis sitzt bei 67,7 % der Breite und
   74,2 % der Höhe und misst 50,3 % der Bildbreite. Daraus ergeben sich
   `background-size: 198.8%` und `background-position: 85.5% 87.5%`.
   **Bei einer neuen Karte müssen diese drei Werte neu bestimmt werden.**

   Nur am Rechner. Auf dem Handy gibt es kein Darüberfahren; dort bliebe die
   Lupe entweder dauerhaft sichtbar oder unerreichbar.
   ====================================================================== */
@media (min-width: 861px) {
  .split__media--karte { overflow: visible; }

  .karte__lupe {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 112%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.82);
    border-radius: 50%;
    background-image: url("../../bilder/anfahrt-karte.jpg?v=2");
    background-repeat: no-repeat;
    background-size: 198.8% auto;
    background-position: 85.5% 87.5%;
    box-shadow: 0 24px 60px rgba(6, 30, 38, .45), 0 0 0 6px rgba(255, 255, 255, .9);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
  }

  .split__media--karte:hover .karte__lupe {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .karte__lupe { transition: opacity .2s ease; }
  .split__media--karte:hover .karte__lupe { transform: translate(-50%, -50%) scale(1); }
}

/* Der Abschnitt „Über uns." auf der Startseite führt jetzt auf die Unterseite.
   Der Verweis sitzt unter dem letzten Absatz im Textteil. */
.split__more { margin: 22px 0 0; }


/* ======================================================================
   Anriss unter dem Projekttitel
   ----------------------------------------------------------------------
   Unter der fetten Titelzeile steht der erste Absatz des Textes – zugeklappt
   auf zwei Zeilen begrenzt, geöffnet vollständig. So weiß man vor dem Klick,
   worum es geht.

   Der Anriss ist kein zweiter Text: Der erste Absatz wurde aus `projekt__text`
   herausgenommen und sitzt jetzt hier. Im aufgeklappten Zustand folgen die
   übrigen Absätze neben dem Bild. **Beim Anlegen neuer Projekte den ersten
   Absatz entsprechend hierher setzen, nicht doppelt pflegen.**

   Gesetzt ist er bewusst wie Fließtext – klein, mager, gemischte
   Schreibweise – im Gegensatz zur gesperrten Versalzeile darüber.
   ====================================================================== */
.projekt__anriss {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 14px;
  max-width: 68ch;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  color: var(--c-ink);
}
.projekt.is-offen .projekt__anriss {
  -webkit-line-clamp: unset;
  display: block;
}

/* ======================================================================
   Aufgeklapptes Projekt: Text links, Bild rechts
   ----------------------------------------------------------------------
   Vorher stand das Bild links und der Text rechts; darunter lief der
   Leistungsumfang zweispaltig, Punkte links und Schlagworte rechts. Der Text
   sprang dadurch von rechts nach links.

   Jetzt läuft alles an einer Kante: Der Anriss unter dem Titel, darunter der
   restliche Text, darunter der Leistungsumfang und zuletzt die Schlagworte –
   alles linksbündig. Rechts steht nur das Bild.

   Das Bild bekommt die breitere Spalte (1,12 gegen 1), weil die Textmenge
   durch den Anriss oben kleiner geworden ist.
   Nur am Rechner. Auf dem Handy stehen die Dinge untereinander, dort bleibt
   das Bild oben – sonst spränge es beim Aufklappen unter den Text.
   ====================================================================== */
@media (min-width: 761px) {
  .projekt__bild { order: 0; }
}

/* Reihenfolge im aufgeklappten Zustand: erst die Schlagworte, darunter der
   Leistungsumfang mit Überschrift und Punkteliste.

   Im Markup stehen die Schlagworte hinter der Punkteliste – das bleibt so,
   weil sie dort inhaltlich hingehören und Vorleseprogramme der Markup-Reihe
   folgen. Umgestellt wird nur die Darstellung: `.umfang` ist eine Spalte,
   `.umfang__spalten` reicht seine Kinder durch (`display: contents`), und die
   Schlagworte bekommen `order: -1`.

   `.projekt.is-offen .umfang` weiter oben setzt `display: grid` und wiegt mit
   drei Klassen schwerer – deshalb hier dieselbe Schreibweise. */
.umfang,
.projekt.is-offen .umfang {
  display: flex;
  flex-direction: column;
}
.umfang__spalten { display: contents; }

.umfang__schlag {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 40px;
  max-width: 68ch;
}
.umfang__schlag li {
  margin: 0;
  font-weight: 600;
  color: var(--c-head-deep);
}

@media (max-width: 860px) {
  .umfang__schlag { gap: 8px 20px; margin-bottom: 30px; }
}



/* ======================================================================
   Weitere zu enge Breitenvorgaben
   ----------------------------------------------------------------------
   Dieselbe Ursache wie bei der Kleinzeile und der Beitragsüberschrift: Die
   Einheit `ch` misst die Breite der Ziffer Null und liegt deutlich unter der
   mittleren Zeichenbreite – erst recht bei Versalien mit Sperrung. Die Texte
   brachen dadurch in viele kurze Zeilen.

   Gemessen: `.story__title` hat bis zu 44 Zeichen, `.insight__lead` 71.
   ====================================================================== */
.story__title { max-width: 430px; text-wrap: balance; }
.insight__lead { max-width: 470px; text-wrap: balance; }

/* ======================================================================
   Nachrichtenbeitrag: Bild im Kopfbereich, Text in einer Lesespalte
   ----------------------------------------------------------------------
   Vorher stand das Bild mit 340 px schmal links neben dem Text; darunter
   blieb eine große leere Spalte, und der Text lief über rund 90 Zeichen je
   Zeile – deutlich mehr, als sich angenehm liest.

   Jetzt sitzt das Bild rechts neben Titel und Rubrik im getönten Band und
   schiebt sich unten daraus hervor. Das verbindet Kopf und Inhalt. Der Text
   darunter läuft in einer Lesespalte von 68 Zeichen.

   Das Bild ist bewusst auf 420 px begrenzt: Die Beitragsbilder sind nur
   400 bis 660 px breit, größer würden sie weich.
   ====================================================================== */
.article-head { padding-bottom: 0; }

.article__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: end;
}
.article__kopftext { padding-bottom: 46px; }

.article__kopf .article__figure {
  margin: 0;
  position: relative;
  z-index: 2;
  transform: translateY(56px);
  box-shadow: 0 20px 44px rgba(8, 38, 46, .16);
}
.article__kopf .article__figure img { display: block; width: 100%; height: auto; }

/* Der Inhalt braucht unten Luft, weil das Bild hineinragt. */
.article.article--lese {
  display: block;
  padding-top: 92px;
}
.article--lese .article__body { max-width: 68ch; }

@media (max-width: 860px) {
  .article__kopf { grid-template-columns: 1fr; gap: 0; }
  .article__kopftext { padding-bottom: 26px; }
  .article__kopf .article__figure { transform: translateY(30px); max-width: 100%; }
  .article.article--lese { padding-top: 56px; }
}

/* Knopf unter der Kleinzeile auf News & Insights. Er soll auffallen, aber den
   Seitentitel nicht erschlagen – deshalb eine kleinere Fassung des normalen
   Knopfes.

   Das Ziel ist vorerst `newsletter.html`. Sobald der Anmeldeweg über Mailchimp
   steht, hier die Adresse eintragen – entweder die fertige Anmeldeseite
   (`…list-manage.com/subscribe?u=…&id=…`) oder weiterhin die eigene Seite mit
   eingebettetem Formular. */
.page-head__aktion { margin: 24px 0 0; }

.btn--klein {
  margin-top: 0;
  padding: 11px 20px;
  font-size: .76rem;
  letter-spacing: .1em;
}

/* Abstand über dem Block „Weitere Beiträge" am Ende eines Beitrags. Er grenzt
   ihn vom Text ab, ohne eine Linie zu brauchen – die Kacheln setzen sich durch
   ihre Fläche ohnehin ab. */
.weitere { margin-top: 18px; }
.weitere .eyebrow { margin-bottom: 20px; }

/* Die Beitragskacheln standen bei 1,18 rem Überschrift und 0,93 rem Text – im
   Verhältnis zur Überschrift wirkte der Text zu schwer. Beide Ebenen hier eine
   Stufe kleiner, der Abstand zwischen ihnen bleibt gleich.

   Gilt auf der Übersicht und in den Blöcken „Weitere Beiträge" am Ende der
   Beiträge, weil es dieselbe Kachel ist. */
.newscard__title { font-size: 1.05rem; }
.newscard__teaser { font-size: .85rem; line-height: 1.6; }
.newscard .link-arrow { font-size: .76rem; }

/* Die Einleitung der Karriereseite läuft zweispaltig: zwei Absätze
   nebeneinander statt untereinander. Das halbiert die Höhe, und der Abschnitt
   darunter rückt entsprechend nach oben.

   Nur hier – `page-intro` wird auch auf Compliance und Newsletter verwendet,
   dort steht jeweils nur ein Absatz, der zweispaltig seltsam aussähe.

   Der letzte Absatz verliert seinen unteren Abstand, sonst entstünde unter der
   kürzeren Spalte eine Lücke. */
.page-intro--zwei {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
}
.page-intro--zwei p { margin: 0; }

@media (max-width: 860px) {
  .page-intro--zwei { grid-template-columns: 1fr; gap: 18px; }
}

/* Der Standortblock teilte sich bei 52,5 % (`1.05fr / .95fr`), die beiden
   Kästen darüber bei genau 50 %. Dadurch sprang die Kante zwischen Bild und
   Textfeld sichtbar gegenüber der Fuge darüber.

   Rechnung: Die Kästen liegen in sechs gleichen Spalten mit 20 px Abstand und
   belegen je drei. Die Fuge zwischen ihnen liegt damit genau in der Mitte.
   Der Standortblock steht jetzt ebenfalls auf zwei gleichen Spalten. */
.standort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Der Einführungskasten bei den Entwicklungen ist kein Verweis mehr. Direkt
   darunter stehen die fünf Kacheln, die auf dieselben Seiten führen – der
   Kasten war damit doppelt.

   Deshalb hier die Gestaltung zurücknehmen, die ihn als anklickbar auswies:
   kein Anheben beim Darüberfahren, kein Schatten, kein Heranzoomen des Bildes
   und kein Strich oben. Die Kacheln darunter behalten all das. */
.devlead { cursor: default; }
.devlead:hover, .devlead:focus-visible { transform: none; }
.devlead:hover .devlead__media,
.devlead:hover .devlead__text,
.devlead:focus-visible .devlead__media,
.devlead:focus-visible .devlead__text { box-shadow: none; }
.devlead:hover .devlead__media img,
.devlead:focus-visible .devlead__media img { transform: none; }
.devlead__text::before { display: none; }

/* ======================================================================
   Entwicklungen auf der Startseite: ein durchgehender Block
   ----------------------------------------------------------------------
   Vorher standen der Einführungskasten und die fünf Kacheln als einzelne
   Flächen mit weißen Fugen dazwischen. Jetzt bilden sie eine zusammenhängende
   helle Fläche: Die Fugen entfallen, der Hintergrund liegt einmal unter dem
   ganzen Block, und die Kästen selbst sind durchsichtig.

   Getrennt bleiben die Kacheln trotzdem – durch ihren eigenen Innenabstand,
   nicht durch Zwischenräume.

   Nur am Rechner. Auf dem Handy stehen die Kacheln in Zeilenform untereinander;
   dort trennen die Fugen sinnvoll und bleiben erhalten.
   ====================================================================== */
@media (min-width: 861px) {
  .devlead {
    gap: 0;
    background: var(--c-panel-blue);
    padding: 20px 20px 0;
  }
  .devlead__text { background: transparent; }

  .devcards--fuenf {
    margin-top: 0;
    gap: 0;
    background: var(--c-panel-blue);
    padding: 0 20px 20px;
  }
  .devcards--fuenf .devcard { background: transparent; }

  /* Der Strich oben und das Anheben würden die Fläche aufbrechen – beides
     bleibt, wirkt aber nur noch innerhalb der Kachel. */
  .devcards--fuenf .devcard:hover,
  .devcards--fuenf .devcard:focus-visible { transform: none; }
}

/* Zeile unter dem Stellentitel für den Arbeitsumfang, etwa „Teilzeit – ab 24
   Std./Woche". Bewusst kleiner und zurückgenommen als der Satz darüber – sie
   ist eine Randangabe, keine Aussage über die Stelle. */
.job__umfang {
  margin: 8px 0 0;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* ======================================================================
   Newsletter-Anmeldung (Formular von Mailchimp)
   ----------------------------------------------------------------------
   Das Formular kommt ohne eigene Gestaltung von Mailchimp – die Einstellung
   „CSS-Stile entfernen" war eingeschaltet. Deshalb wird es hier vollständig
   im Bild der Seite gesetzt.

   Die Namen der Klassen und Kennungen stammen von Mailchimp (`mc-field-group`,
   `mce-responses` und so weiter) und dürfen nicht geändert werden – das
   Formular und die Rückmeldungen hängen daran.

   Beim Absenden wechselt der Besucher auf eine Seite von Mailchimp mit der
   Bestätigung. Danach kommt die E-Mail mit dem Bestätigungslink.
   ====================================================================== */
.mcform { margin-top: 44px; max-width: 620px; }
.mcform__lead { margin: 0 0 28px; font-size: .96rem; line-height: 1.7; }

.mcform__felder { display: grid; gap: 18px; }

.mc-field-group { display: grid; gap: 7px; }
.mc-field-group label {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-head-deep);
}
.mc-field-group input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #c9d4d3;
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--c-ink);
  border-radius: 0;
}
.mc-field-group input:focus-visible {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 2px rgba(0, 82, 103, .14);
}

.mcform .asterisk { color: var(--c-accent); }
.mcform__pflicht { margin: 12px 0 0; font-size: .78rem; color: var(--c-ink-soft); }

.mcform__knopf { margin-top: 26px; border: 0; cursor: pointer; }

/* Rückmeldungen von Mailchimp bei fehlerhafter oder erfolgreicher Eingabe */
#mce-responses { margin-top: 18px; }
#mce-responses .response { padding: 12px 15px; font-size: .9rem; }
#mce-error-response { background: #fbeae7; color: #8a2d1a; }
#mce-success-response { background: var(--c-panel-green); color: var(--c-head-deep); }

.mcform__hinweis {
  margin: 26px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.mcform__hinweis a { text-decoration: underline; }

/* ======================================================================
   Knopf beim Darüberfahren
   ----------------------------------------------------------------------
   Bisher wurde der Knopf durchsichtig mit weißem Rand und weißer Schrift.
   Das passt zum dunklen Titelbild – auf weißem oder hellblauem Grund
   verschwand er dagegen vollständig. Betroffen waren zehn der elf Knöpfe:
   die Kästen „Gemeinsam Neues entwickeln", die Bewerbungs- und
   Kontaktknöpfe, der Newsletter-Knopf und die Anmeldung.

   Jetzt wird der Knopf dunkler statt durchsichtig. Die alte Darstellung
   bleibt genau dort, wo sie hingehört: im Titelbereich der Startseite.
   ====================================================================== */
.btn:hover,
.btn:focus-visible {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: #fff;
}

.hero .btn:hover,
.hero .btn:focus-visible {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* Seite nach der Newsletter-Anmeldung. Sie wird nicht verlinkt – Mailchimp
   ruft sie auf, nachdem das Formular abgeschickt wurde. Die Adresse dafür
   wird in Mailchimp hinterlegt (Zielgruppe → Anmeldeformulare → Formular
   gestalten → Seite nach der Anmeldung). */
.danke { margin-top: 36px; max-width: 620px; }
.danke p { font-size: .96rem; line-height: 1.75; margin: 0 0 18px; }
.danke__schritt {
  padding: 20px 22px;
  background: var(--c-panel-blue);
}
.danke a { text-decoration: underline; }
.danke__weiter a { text-decoration: none; }

/* ======================================================================
   Vorgaben des Grafikers
   ----------------------------------------------------------------------
   1. Überschriften durchgehend in #0f5268. Gesetzt über die beiden
      Farbvariablen weiter oben, damit es überall greift.

   2. In den Kompetenzkacheln waren Gewichte vertauscht: Der Name stand
      mager, der Satz darunter fett. Jetzt umgekehrt.

   3. Die Kleinzeile unter dem Feldtitel stand kleiner als der Fließtext.
      Jetzt auf dessen Größe.

   4. Feldtitel im mittleren Schnitt statt mager.
   ====================================================================== */

/* 2 – Gewichte in den Kompetenzkacheln tauschen */
.pillar__title { font-weight: 600; }
.pillar__lead { font-weight: 400; }

/* 3 – Kleinzeile unter dem Feldtitel auf Fließtextgröße */
.feld__claim { font-size: .96rem; }

/* 4 – Feldtitel im mittleren Schnitt */
.feld__name { font-weight: 500; }

/* ======================================================================
   Absätze innerhalb eines Stellenaufklappers
   ----------------------------------------------------------------------
   Die Vorgabe des Grafikers setzt den Fließtext der Unterseiten auf 20,8 px
   und nennt dabei auch `.job__body p`. Im Stellenaufklapper stehen diese
   Absätze aber unmittelbar neben Aufzählungspunkten mit 0,93 rem – also rund
   14,9 px. Der Sprung war fast das Anderthalbfache und wirkte wie ein
   Fremdkörper.

   Hier deshalb dieselbe Größe wie die Punkte darüber. Die Vorgabe bleibt für
   alle anderen Fließtexte unverändert.

   Zur Gewichtung: Die Regel des Grafikers nutzt `:is()`, dort zählt der
   gewichtigste Eintrag der Liste – `.standort__text p:not(.standort__ort)`.
   Zusammen mit `body:not(.startseite)` ergibt das drei Klassen und zwei
   Elemente. Die Gegenregel braucht mehr, deshalb die lange Kette.
   ====================================================================== */
body:not(.startseite) .jobs .job .job__body p {
  font-size: .93rem;
  line-height: 1.7;
}
body:not(.startseite) .jobs .job .job__body .job__apply { font-size: .82rem; }

/* ======================================================================
   Symbole auf den Kacheln
   ----------------------------------------------------------------------
   Die Kacheln trugen früher Ziffern als Merkmal. Die sind entfallen; an ihre
   Stelle tritt dasselbe Symbol, das der jeweilige Bereich im Aufklappfeld des
   Menüs hat. So erkennt man die Kachel wieder, ohne dass eine Nummerierung
   nötig wäre.

   Bewusst zurückhaltend: klein, oben links, in der Flächenfarbe der Kachel
   abgesetzt. Beim Darüberfahren färbt es sich mit – mehr nicht.

   Grafiken im Menü sind grundsätzlich verborgen; hier müssen sie eigens
   eingeschaltet werden.
   ====================================================================== */
.pillar__symbol,
.devcard__symbol {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 16px;
  background: rgba(15, 82, 104, .08);
  color: var(--c-head);
  transition: background .25s ease, color .25s ease;
}
.pillar__symbol svg,
.devcard__symbol svg { display: block; width: 18px; height: 18px; }

.pillar:hover .pillar__symbol,
.pillar:focus-visible .pillar__symbol,
.devcard:hover .devcard__symbol,
.devcard:focus-visible .devcard__symbol {
  background: rgba(15, 82, 104, .16);
}

/* In den fünf schmalen Entwicklungskacheln eine Spur kleiner */
.devcards--fuenf .devcard__symbol {
  width: 30px; height: 30px;
  margin-bottom: 13px;
}
.devcards--fuenf .devcard__symbol svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .pillar__symbol, .devcard__symbol { width: 28px; height: 28px; margin-bottom: 11px; }
  .pillar__symbol svg, .devcard__symbol svg { width: 15px; height: 15px; }
}

/* ======================================================================
   Breite des Call-to-Action-Kastens
   ----------------------------------------------------------------------
   Bisher lief der Text mit `max-width: 70ch` nur über rund 560 der 1096
   nutzbaren Pixel – knapp die Hälfte des Kastens blieb leer.

   Ein Versuch mit zwei Spalten füllte den Kasten zwar, verteilte die beiden
   Absätze aber sehr ungleich: links ein Satz, rechts ein ganzer Block.

   Jetzt eine Spalte, aber breiter: 820 px statt 560. Das sind rund 103 Zeichen
   je Zeile. Die volle Breite ergäbe 137 und wäre unangenehm zu lesen.

   Gilt für beide Kästen dieser Bauart – „Gemeinsam Neues entwickeln" auf den
   Entwicklungsseiten und „Ihr nächster Schritt" auf der Karriereseite.
   ====================================================================== */
.cta p { max-width: 820px; }

/* Der Knopf im Call-to-Action-Kasten saß dicht unter dem Text. Jetzt mit
   deutlichem Abstand darüber, und der Kasten bekommt unten mehr Raum, damit
   der Knopf nicht an der Kante klebt. */
.cta { padding-bottom: 54px; }
.cta .btn { margin-top: 34px; }

/* ======================================================================
   Hinweis auf dem Handy, dass die Kacheln anklickbar sind
   ----------------------------------------------------------------------
   Am Rechner zeigen „weiterlesen…" und ein Pfeil in der Ecke, dass eine
   Kachel zu einer Seite führt. Auf dem Handy sind beide ausgeblendet, weil
   dort kein Platz ist und es kein Darüberfahren gibt – damit fehlte jeder
   Hinweis.

   Deshalb unten rechts ein kleiner Pfeil, dauerhaft sichtbar. Dasselbe
   Zeichen wie am Rechner, nur ohne Bewegung.
   ====================================================================== */
@media (max-width: 860px) {
  .devcard__arrow {
    display: block;
    opacity: 1;
    transform: none;
    top: auto;
    bottom: 10px;
    right: 14px;
    font-size: 1rem;
    color: var(--c-teal);
  }

  /* Die Kompetenzkacheln haben kein eigenes Pfeil-Element – hier erzeugt. */
  .pillar::after {
    content: "\2197";
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 1rem;
    line-height: 1;
    color: var(--c-teal);
  }
}