/* ==========================================================================
   Vectron Logistics
   Entwurf 2026-08-05
   Leitmotiv: technische Bemassung. Masslinien, Masszahlen in Monospace,
   Bemassungen tragen echte Werte.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */

@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-500-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-600-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin-700-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/* Kontrastwerte gegen den jeweiligen Grund, gerechnet nach WCAG 2.1:
   text auf weiss 5.85:1 · text auf tint 5.39:1 · ink auf weiss 10.8:1
   accent-deep auf weiss 4.68:1 · ink-deep auf accent 6.08:1
   accent-light auf ink 5.26:1 · on-ink auf ink 6.88:1 · text-mute auf weiss 4.56:1
   Reines Petrol traegt weder weisse noch normale Tinte-Schrift (2.67 bzw. 4.05),
   deshalb ink-deep auf Petrolflaechen und accent-light auf dunklem Grund. */
:root {
  --accent:      #00AEC7;   /* Pantone 3125 */
  --accent-deep: #00808F;   /* Petrol fuer Text auf Weiss */
  --accent-light:#33C6DB;   /* Petrol fuer Text auf dunklem Grund */
  --accent-wash: #E5F7FA;
  --ink:         #333F48;   /* Pantone 432 */
  --ink-deep:    #232B31;   /* Schrift auf Petrolflaechen */
  --ink-soft:    #4A5761;
  --text:        #5C6670;
  --text-mute:   #6E777E;
  --tint:        #F4F6F7;
  --line:        #DCE2E5;
  --line-ink:    #4A5761;
  --white:       #FFFFFF;
  --on-ink:      #C6D0D6;

  --font: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  --wrap: 1240px;
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 96px;  --s8: 128px;
}

/* --- Grundlagen --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.14; margin: 0 0 var(--s3); }

h1 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
}

h2 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
}

h3 { font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.01em; }

p { margin: 0 0 var(--s3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

ul { margin: 0; padding: 0; }

/* --- Hilfsklassen ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: var(--white); }

.lead { font-size: 1.1875rem; line-height: 1.6; max-width: 56ch; }

.section__head { max-width: 58ch; margin-bottom: var(--s5); }
.section__head p:last-child { margin-bottom: 0; }
.section__head h2:last-child { margin-bottom: 0; }

/* Zweispaltiger Textabschnitt: Ueberschrift links, Fliesstext rechts */
.intro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s6); }
.intro .section__head { margin-bottom: 0; }
.intro__body p { max-width: 60ch; }

/* Vorzeile: Masszahl-Optik aus der technischen Zeichnung */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--s2);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.section--ink .eyebrow { color: var(--accent-light); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: var(--s2) var(--s3);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--ink :where(a, button):focus-visible { outline-color: var(--accent); }

/* --- Schaltflaechen ----------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary { background: var(--accent); color: var(--ink-deep); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.btn--on-ink { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--on-ink:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

/* Pfeilverweis */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--accent-deep);
}
.arrow-link::after { content: "→"; transition: transform .18s ease; }
.arrow-link:hover::after { transform: translateX(4px); }

/* --- Kopfbereich -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 78px;
}

.site-header__logo { flex: none; display: block; line-height: 0; }
.site-header__logo img { height: 38px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-inline-start: auto;
  list-style: none;
}

.nav__item {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
a.nav__item:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__item.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.nav__item--soon { color: var(--text-mute); cursor: default; }

.langswitch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  padding-inline-start: var(--s4);
  border-inline-start: 1px solid var(--line);
}
.langswitch__current { color: var(--ink); font-weight: 600; }
.langswitch__other { color: var(--text-mute); text-decoration: none; }
.langswitch__other:hover { color: var(--accent-deep); }

.site-header .btn { padding: 11px 22px; font-size: 0.8125rem; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 9px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

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

.hero-section { padding-block: var(--s7) 0; overflow: hidden; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--s7);
}

.hero__text { padding-bottom: var(--s7); }
.hero__text h1 { margin-bottom: var(--s4); }
.hero__lead { font-size: 1.25rem; line-height: 1.55; max-width: 34ch; margin-bottom: var(--s5); }

/* Bild laeuft rechts aus dem Raster bis zum Rand des Fensters */
.hero__media {
  position: relative;
  display: block;
  margin-inline-end: calc((100vw - min(100vw, var(--wrap))) / -2 - var(--s3));
  align-self: stretch;
}
.hero__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

/* Bemassung ueber dem Herobild: traegt echte Werte */
.hero__dim {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(51, 63, 72, .88);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  backdrop-filter: blur(2px);
}
.hero__dim span { color: var(--accent); }

/* --- Seitenkopf der Unterseiten ----------------------------------------- */

.page-head { padding-block: var(--s6) var(--s5); }
.page-head h1 { max-width: 16ch; margin-bottom: var(--s3); }
.page-head .lead { max-width: 52ch; margin-bottom: 0; }

/* Bildstreifen ueber die volle Fensterbreite */
.bleed-media { margin: 0; }
.bleed-media img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }

/* Scroll-Karte: Der Bildstreifen loest sich beim Scrollen leicht als Karte vom
   Seitenrand ab. Die beiden Variablen setzt assets/js/scroll-card.js. Der
   Schatten ist konstant und wird erst sichtbar, sobald die Karte einrueckt. */
[data-scroll-card] {
  transform-origin: center top;
  border-radius: var(--scroll-card-radius, 0px);
  transform: scale(var(--scroll-card-scale, 1));
  box-shadow: 0 20px 45px -14px rgba(51, 63, 72, .28);
  overflow: hidden;
  will-change: transform, border-radius;
}

/* --- Kennzahlen mit Masslinie ------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  list-style: none;
}

.metric { position: relative; padding-top: var(--s3); }

/* Masslinie: waagrechte Linie mit Endstrichen, wie eine Bemassung */
.metric::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
}
.metric::after {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: 0;
  width: 1px;
  height: 9px;
  background: var(--accent);
}

.metric__value {
  display: block;
  font-size: clamp(1.75rem, 3.1vw, 2.375rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-bottom: 10px;
}
.metric__value em { font-style: normal; font-size: 0.7em; color: var(--accent-deep); }

.metric__label {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 24ch;
}

.section--ink .metric__value { color: var(--white); }
.section--ink .metric__value em { color: var(--accent-light); }
.section--ink .metric__label { color: var(--on-ink); }

/* Auftritt der Masslinie beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .js .metric::before {
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.2, .7, .3, 1) var(--draw-delay, 0ms);
  }
  .js .metric.is-drawn::before { transform: scaleX(1); }
  .js .metric::after {
    opacity: 0;
    transition: opacity .3s ease calc(var(--draw-delay, 0ms) + 420ms);
  }
  .js .metric.is-drawn::after { opacity: 1; }
}

/* Auftritt der Abschnittskoepfe. Der Massstrich vor der Vorzeile waechst aus
   dem Nichts, Ueberschrift und Text steigen leicht auf. Die Klasse js-reveal
   setzt nav.js erst, wenn beobachtet wird: ohne JavaScript oder bei
   reduzierter Bewegung steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .section__head .eyebrow::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
  }
  .js-reveal .section__head.is-in .eyebrow::before { transform: scaleX(1); }

  .js-reveal .section__head .eyebrow,
  .js-reveal .section__head h1,
  .js-reveal .section__head h2,
  .js-reveal .section__head h3,
  .js-reveal .section__head p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }
  .js-reveal .section__head .eyebrow { transition-delay: 0ms; }
  .js-reveal .section__head h2,
  .js-reveal .section__head h3 { transition-delay: 80ms; }
  .js-reveal .section__head p { transition-delay: 150ms; }

  .js-reveal .section__head.is-in .eyebrow,
  .js-reveal .section__head.is-in h1,
  .js-reveal .section__head.is-in h2,
  .js-reveal .section__head.is-in h3,
  .js-reveal .section__head.is-in p {
    opacity: 1;
    transform: none;
  }
}

/* --- Signatur: der Baukasten zum Zusammenstellen ------------------------ */

.rig {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s6);
  align-items: stretch;
}

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

/* Umschalter */
.picker { border: 0; padding: 0; margin: 0 0 var(--s4); }
.picker__legend {
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.picker__set { display: flex; flex-wrap: wrap; gap: 0; }

.picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.picker label {
  display: block;
  padding: 11px 22px;
  border: 1px solid var(--line);
  margin-inline-start: -1px;
  background: var(--white);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.picker label:first-of-type { margin-inline-start: 0; }

/* Stufen, die zur gewaehlten Ladung nicht passen, blendet rig.js per hidden
   aus. Ohne diese Regel bliebe display:block von oben wirksam und das
   Attribut ohne Wirkung. */
.picker label[hidden] { display: none; }
.picker label:hover { color: var(--ink); border-color: var(--text-mute); position: relative; z-index: 1; }

.picker input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  position: relative;
  z-index: 2;
}
.picker input:focus-visible + label {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  position: relative;
  z-index: 3;
}

.picker__hint {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 46ch;
}

/* Kennwerte */
.readout { margin: var(--s2) 0 0; border-top: 1px solid var(--line); }
.readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s3);
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.readout dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.readout dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  text-align: end;
}
.readout .readout__lead dd { font-size: 1.375rem; font-weight: 700; color: var(--accent-deep); }

/* Silhouette mit Hoehenachse */
.rig__figure {
  position: relative;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s4) var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
}

.rig__svg { width: 100%; height: auto; display: block; flex: 1; }

/* Die Zeichnung baut assets/js/rig.js auf. Farben und Strichstaerken stehen
   hier, damit sie zum Rest der Seite passen. */
/* Regal als ruhige Flaeche, nicht als Strichgitter: sonst konkurriert das
   Raster mit dem Geraet um Aufmerksamkeit. */
.rg-block { fill: var(--tint); }
.rg-level { fill: #E4E9EC; }

/* Der Wechsel zwischen zwei Bauhoehen laeuft, statt zu springen. Animiert
   werden die Geometrie der Rechtecke und die Verschiebung der Beschriftung.
   Wo ein Browser Geometrie nicht animiert, springt die Zeichnung wie bisher. */
@media (prefers-reduced-motion: no-preference) {
  .rg-anim {
    transition: y .45s cubic-bezier(.2, .7, .3, 1),
                x .45s cubic-bezier(.2, .7, .3, 1),
                height .45s cubic-bezier(.2, .7, .3, 1),
                width .45s cubic-bezier(.2, .7, .3, 1),
                transform .45s cubic-bezier(.2, .7, .3, 1),
                opacity .3s ease;
  }
  .rg-mark { transition: opacity .3s ease; }
}
/* Beim ersten Aufbau steht die Zeichnung sofort da. */
.rig__svg.is-still .rg-anim, .rig__svg.is-still .rg-mark { transition: none; }

/* Geraet als geschlossene Silhouette */
.rg-solid { fill: var(--ink); }
.rg-rail  { fill: var(--line); }
.rg-belt  { stroke: #7C8791; stroke-width: 1.5; }
.rg-load  { fill: var(--accent); }

/* Hoehenskala rechts. Die Striche sind Rechtecke, nicht Linien: nur deren
   Geometrie laesst sich beim Wechsel der Bauhoehe animieren. */
.rg-scale rect { fill: var(--line); }
.rg-scale rect.is-current { fill: var(--accent); }
.rg-scale text {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--text-mute);
}
.rg-scale text.is-current {
  font-size: 17px;
  font-weight: 700;
  fill: var(--accent-deep);
}

.rig__note {
  margin: var(--s3) 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  max-width: none;
}

.rig__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  align-items: center;
  margin: var(--s5) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .rig__mast, .rig__head, .rig__load { transition: none; }
}

/* --- Karten ------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .18s ease;
}
.card:hover { border-color: var(--accent); }

/* Die ganze Karte fuehrt zur Unterseite. Statt eines zweiten Verweises legt
   sich der vorhandene Link unsichtbar ueber die Karte: So bleibt es ein
   einziger Link, nichts verschachtelt sich, und die Tastaturbedienung aendert
   sich nicht. */
.card { position: relative; }
.card .arrow-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:hover .card__media img { transform: scale(1.03); }
.card:focus-within { border-color: var(--accent); }

/* Quadratisch statt 4:3: In der Reihe steht ein hochformatiges Rendering,
   das im flachen Rahmen winzig wirkt. Die beiden Fotos vertragen den
   engeren Ausschnitt. */
.card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

/* Freigestellte Darstellungen stehen auf Flaeche, nicht randlos */
.card__media--plate { background: var(--tint); padding: var(--s2); }
.card__media--plate img { object-fit: contain; }

.card__body { padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { font-size: 0.9375rem; margin-bottom: var(--s3); }
.card__body .arrow-link, .card__soon { margin-top: auto; }

.card__soon {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

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

.quote { max-width: 46rem; margin-inline: auto; text-align: center; }

.quote__mark {
  width: 26px;
  height: 23px;
  margin: 0 auto var(--s4);
  background: var(--accent);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.quote blockquote { margin: 0; }
.quote blockquote p {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  line-height: 1.42;
  font-weight: 500;
  color: var(--ink);
  max-width: none;
  margin-bottom: var(--s4);
}

.quote__author { font-size: 0.9375rem; color: var(--text); max-width: none; }
.quote__author strong { display: block; color: var(--ink); font-weight: 600; }

/* --- Merkmale ----------------------------------------------------------- */

.features { display: grid; gap: var(--s8); }

.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7);
  align-items: center;
}
.feature--reverse .feature__media { order: -1; }

/* Steht in der Bildspalte ein Wechsler, ist sie hoeher als der Text. Bei
   mittiger Ausrichtung klafft dann unter der Ueberschrift eine Luecke. */
.feature--top { align-items: start; }

/* Der Abschnittskopf steht hier nicht ueber beiden Spalten, sondern in der
   Textspalte. Nur so beginnt das Bild ganz oben statt erst unter der
   Ueberschrift. */
.feature--head .section__head { margin-bottom: var(--s4); }
.feature--head .section__head h2 { margin-bottom: 0; }

/* Das Rendering sitzt hoeher als der Satzspiegel und endet knapp ueber dem
   Abschnittsrand: sonst steht ueber und unter dem Geraet mehr Flaeche als
   neben ihm. */
.feature--top.feature--head .feature__media { margin-top: calc(var(--s3) * -1); }
.feature--top.feature--head .carousel { margin-bottom: calc(var(--s3) * -1); }

/* Folgt der Merkmalliste noch ein Absatz, braucht er denselben Abstand wie
   zwischen zwei Absaetzen. Sonst klebt er an der letzten Zeile. */
.feature__text .speclist + p { margin-top: var(--s3); }

.feature__index {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: var(--s2);
}

.feature__text h3 { font-size: 1.5rem; }
.feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Freigestellte Renderings stehen auf der Flaeche statt in einem Bildrahmen.
   Der 3:2-Beschnitt wuerde dem Geraet oben und unten etwas abschneiden. Bei
   einem Foto faellt das nicht auf, bei einer Zeichnung sehr wohl. */
.feature__media--uncropped img {
  aspect-ratio: auto;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* Hochformatiges Rendering neben Text. Anders als .feature wird das Bild
   hier nicht beschnitten: Bei einem Seitenverhaeltnis von 1:3 waere davon
   nichts uebrig. */
.tallfeature {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: var(--s7);
  align-items: center;
}
.tallfeature__media { margin: 0; }
.tallfeature__media img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  margin-inline: auto;
}
.tallfeature__text .speclist { margin-top: var(--s3); }

/* --- Stärkenliste ------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  list-style: none;
}

.pillar { padding-top: var(--s3); border-top: 1px solid var(--line); }
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 0.9375rem; margin-bottom: 0; }

/* --- Gegenüberstellung -------------------------------------------------- */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }

.panel { background: var(--white); border: 1px solid var(--line); padding: var(--s5) var(--s4); }
.panel > h3 { font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.panel > p { font-size: 0.9375rem; margin-bottom: var(--s4); }

/* Zwischenueberschrift im Panel, etwa "Wir tauschen" gegen "Das bleibt".
   Kleiner als die Panelueberschrift und mit Luft nach oben, sonst klebt sie
   an der Liste davor. */
.panel > h4 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: var(--s4) 0 var(--s2);
}

.speclist { list-style: none; display: grid; gap: 12px; }
.speclist li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.speclist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 9px;
  height: 8px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- Referenzen ---------------------------------------------------------- */

.refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); list-style: none; }

.ref {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s4) var(--s3) var(--s3);
  transition: border-color .15s ease;
}
.ref:hover { border-color: var(--accent); }

/* Kundenlogo: klein und entsaettigt, damit die sechs sehr unterschiedlichen
   Logos die Karten nicht auseinanderreissen. Beim Ueberfahren echte Farbe. */
.ref__logo {
  display: block;
  height: 30px;
  margin-bottom: var(--s3);
}
.ref__logo img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: .8;
  transition: filter .18s ease, opacity .18s ease;
}
.ref:hover .ref__logo img { filter: none; opacity: 1; }

/* Ohne Zeigergeraet gibt es kein Hover, die Logos blieben also dauerhaft
   blass. Auf Touch deshalb von vornherein in Farbe. Die Abfrage zielt auf die
   Eingabeart, nicht auf die Bildschirmbreite: Auch ein grosses Touch-Notebook
   hat kein Hover. */
@media (hover: none) {
  .ref__logo img { filter: none; opacity: 1; }
}

.ref__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s2);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.ref__name { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.ref__place {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}

.ref__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid var(--accent);
  padding: 2px 9px;
  margin-bottom: var(--s3);
  align-self: flex-start;
}

.ref__specs { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.ref__specs div {
  display: flex;
  gap: var(--s2);
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.ref__specs dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex: none;
}
.ref__specs dd { margin: 0; font-size: 0.9375rem; color: var(--ink); text-align: end; }

/* Verweis auf ein Video zur Anlage, unter den Kennzahlen der Karte. Als
   Knopf mit Abspielzeichen, ein Textlink ging zwischen den Kennzahlen unter. */
.ref__video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: var(--s3);
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-deep);
  transition: background .15s ease, color .15s ease;
}
.ref__video::before {
  content: "";
  border-block: 6px solid transparent;
  border-inline-start: 10px solid currentColor;
  border-inline-end: 0;
  flex: none;
}
.ref__video:hover { background: var(--accent); color: var(--ink-deep); }

/* --- Videos --------------------------------------------------------------
   Die Videos liegen auf YouTube, eingebettet wird nichts. Die Vorschaubilder
   liegen bei uns, damit beim Aufruf der Seite keine Anfrage an Google geht.
   Erst der Klick fuehrt hinueber. Deshalb kommt die Seite ohne Einwilligung
   fuer Fremdinhalte aus. */

.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }

.videocard {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .15s ease;
}
.videocard:hover { border-color: var(--accent); color: inherit; }

.videocard__media { display: block; position: relative; }
.videocard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Abspielzeichen: Kreis mit Dreieck, ohne Grafikdatei. */
.videocard__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 16px rgba(35, 43, 49, .28);
  transition: background .18s ease, transform .18s ease;
}
.videocard__play::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 54%;
  transform: translate(-50%, -50%);
  border-block: 12px solid transparent;
  border-inline-start: 20px solid var(--ink);
  border-inline-end: 0;
}
.videocard:hover .videocard__play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.videocard:hover .videocard__play::after { border-inline-start-color: var(--ink-deep); }

/* Die Kachel besteht aus Spans, damit sie in einen Link darf. Ohne
   display: block bleibt der Innenabstand wirkungslos und der Text klebt
   an der Bildkante. */
.videocard__body { display: block; padding: var(--s3) var(--s4) var(--s4); }
.videocard__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.videocard__meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.videos__note { font-size: 0.875rem; color: var(--text-mute); margin-top: var(--s3); }

/* --- Bildwechsler ---------------------------------------------------------
   Drei Ansichten desselben Geraets. Ohne JavaScript bleibt die Reihe
   waagrecht scrollbar, mit JavaScript kommen Pfeile und Punkte dazu. */

.carousel { position: relative; }

/* Der Kopf steht sonst 48 px ueber dem Inhalt. Ueber einem Wechsler wirkt
   das wie ein Loch, weil die Bildspalte ohnehin Luft mitbringt. */
.section__head--tight { margin-bottom: var(--s3); }

/* Der Abstand zwischen den Bildern ist nicht Gestaltung, sondern Notwehr:
   Die Snap-Position faellt oft auf einen halben Pixel, dann blitzt die Kante
   des Nachbarbilds als Strich hervor. Mit der Luecke bleibt dort der
   Abschnittshintergrund. */
.carousel__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
/* Ohne aspect-ratio: auto zwingt .feature__media img das Rendering in ein
   3:2-Fenster. Das Geraet steht hochkant und schrumpft darin auf die halbe
   Spaltenbreite zusammen. */
.carousel__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: 600px;
  object-fit: contain;
}

.carousel__caption {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  text-align: center;
  margin-top: var(--s2);
  min-height: 2.4em;
}

/* Pfeile und Punkte entstehen erst im Skript, deshalb hier nur ihr Aussehen. */
.carousel__nav {
  position: absolute;
  inset-block-start: 45%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.carousel__nav:hover { border-color: var(--accent); background: var(--white); }
.carousel__nav--prev { inset-inline-start: 0; }
.carousel__nav--next { inset-inline-end: 0; }
.carousel__nav::before {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 15px;
  width: 10px;
  height: 10px;
  border-inline-start: 2px solid var(--ink);
  border-block-start: 2px solid var(--ink);
}
.carousel__nav--prev::before { transform: rotate(-45deg); }
.carousel__nav--next::before { transform: rotate(135deg); inset-inline-start: 11px; }

.carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s2); }
.carousel__dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: background .2s ease;
}
.carousel__dot.is-current { background: var(--accent); }
.carousel__dot:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* --- Bildreihe ------------------------------------------------------------
   Drei Aufnahmen nebeneinander. Jede fuehrt auf die grosse Fassung, die
   lightbox.js im Dialogfenster oeffnet. */

/* Steht die Bildreihe als Anhang unter einem Abschnitt, braucht sie eine
   eigene Zeile mit Abstand nach oben, aber keine zweite Ueberschrift. */
.gallery-head { margin: var(--s6) 0 var(--s3); }

/* Fotos aus der Kamera stehen im Verhaeltnis 3:2. Im 4:3-Fenster der
   Standardgalerie fehlt links und rechts ein Streifen. */
.gallery--wide .gallery__item img { aspect-ratio: 3 / 2; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; }

/* Die Ecken kommen aus dem Stylesheet, nicht aus den Bilddateien. Ein Teil der
   Fotos trug frueher eine eingebrannte Rundung, jedes mit einem anderen
   Radius, was in der Reihe nebeneinander auffiel. 1px ist der Wert, den auch
   Schaltflaechen und Eingabefelder verwenden. */
.gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: var(--tint);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}
.gallery__item:hover img { transform: scale(1.03); }

/* Lupenzeichen, damit erkennbar ist, dass sich das Bild oeffnen laesst. */
.gallery__item::after {
  content: "";
  position: absolute;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 8px rgba(35, 43, 49, .24);
  opacity: 0;
  transition: opacity .18s ease;
}
.gallery__item::before {
  content: "+";
  position: absolute;
  z-index: 1;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transition: opacity .18s ease;
}
.gallery__item:hover::after,
.gallery__item:hover::before,
.gallery__item:focus-visible::after,
.gallery__item:focus-visible::before { opacity: 1; }

@media (hover: none) {
  .gallery__item::after, .gallery__item::before { opacity: 1; }
}

/* --- Bild im Dialogfenster ----------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(23, 28, 32, .92); }

.lightbox__img, .lightbox__video {
  max-width: min(1400px, 92vw);
  max-height: 86vh;
  width: auto;
  margin: 7vh auto 0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
/* Ohne Seitenverhaeltnis waere der Player 150 px hoch, solange die Metadaten
   des Videos noch nicht da sind. */
.lightbox__video {
  display: block;
  width: min(1400px, 92vw);
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__video[hidden], .lightbox__img[hidden] { display: none; }

.lightbox__close, .lightbox__nav {
  position: absolute;
  font: inherit;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); color: var(--ink-deep); }

.lightbox__close { inset-block-start: 20px; inset-inline-end: 20px; width: 44px; height: 44px; }
.lightbox__close::before, .lightbox__close::after {
  content: "";
  position: absolute;
  inset-block-start: 21px;
  inset-inline-start: 12px;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

.lightbox__nav { inset-block-start: 50%; transform: translateY(-50%); width: 48px; height: 64px; }
.lightbox__nav--prev { inset-inline-start: 16px; }
.lightbox__nav--next { inset-inline-end: 16px; }
.lightbox__nav::before {
  content: "";
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 18px;
  width: 14px;
  height: 14px;
  border-inline-start: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
}
.lightbox__nav--prev::before { transform: rotate(-45deg); }
.lightbox__nav--next::before { transform: rotate(135deg); inset-inline-start: 14px; }

.lightbox__count {
  position: absolute;
  inset-block-end: 24px;
  inset-inline: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--on-ink);
  margin: 0;
  max-width: none;   /* sonst greift die Breitenbegrenzung fuer Absaetze */
}

@media (max-width: 640px) {
  .lightbox__nav { width: 40px; height: 52px; }
  .lightbox__img { max-height: 74vh; margin-top: 12vh; }
}

/* --- Schrittfolge (Retrofit) -------------------------------------------- */

/* Zwei Spalten als Textsatz, nicht als Raster: Im Raster bestimmt der
   laengste Eintrag einer Zeile die Hoehe, darunter klafft in der anderen
   Spalte eine Luecke. Im Spaltensatz fliesst der naechste Eintrag nach. */
.steps {
  columns: 2;
  column-gap: var(--s6);
  list-style: none;
}
.steps .step { break-inside: avoid; margin-bottom: var(--s5); }
.steps .step:last-child { margin-bottom: 0; }

.step { display: grid; grid-template-columns: 46px 1fr; gap: var(--s3); align-items: start; }
.step__no {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-deep);
  padding-top: 3px;
  border-top: 2px solid var(--accent);
}
.step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.step p { font-size: 0.9375rem; margin-bottom: 0; }

/* --- Stellenanzeige ------------------------------------------------------ */

.job { border: 1px solid var(--line); padding: var(--s5); }
.job__head { border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.job__head h2 { margin-bottom: var(--s2); }
.job__tags { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0; }
.job__tags li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.job__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.job__cols h3 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s3);
}
.job__foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.job__salary { font-size: 0.9375rem; }
.job__salary strong { color: var(--ink); }

/* --- Stellenliste (Akkordeon, ohne JavaScript) --------------------------- */

.vacancies { display: grid; gap: var(--s3); }

.vacancy {
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .15s ease;
}
.vacancy:hover { border-color: var(--text-mute); }
.vacancy[open] { border-color: var(--accent); }

.vacancy__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s7) var(--s4) var(--s4);
  position: relative;
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}
.vacancy__head::-webkit-details-marker { display: none; }
.vacancy__head:hover { background: var(--tint); }
.vacancy__head:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; }

.vacancy__title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 22ch;
}
.vacancy__meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Plus, das sich beim Aufklappen zum Minus dreht */
.vacancy__head::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--s4);
  top: calc(var(--s4) + 8px);
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--accent-deep), var(--accent-deep)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) center / 2px 100% no-repeat;
  transition: transform .25s ease;
}
.vacancy[open] .vacancy__head::after {
  background: linear-gradient(var(--accent-deep), var(--accent-deep)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

.vacancy__body { padding: 0 var(--s4) var(--s5); }
.vacancy__body > p:first-child { margin-top: 0; }

.vacancy__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s6);
  margin-top: var(--s4);
}
.vacancy__cols h4 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s2);
}

.vacancy__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.vacancy__pay { font-size: 0.9375rem; margin: 0; max-width: 46ch; }
.vacancy__pay strong { color: var(--ink); }

/* --- Kontakt ------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); align-items: start; }

.contact__direct { margin-bottom: var(--s5); }
.contact__direct a { font-size: 1.25rem; font-weight: 500; text-decoration: none; }
.contact__direct a:hover { text-decoration: underline; }

/* Erreichbarkeit unter dem direkten Draht: kleiner als die Nummer, sonst
   konkurriert die Zeile mit ihr. */
.contact__hours { font-size: 0.875rem; color: var(--text-mute); margin-top: var(--s2); }
.contact__hours a { font-size: inherit; font-weight: 600; text-decoration: underline; }

.sites { display: grid; gap: var(--s4); }
.site-card { border-top: 1px solid var(--line); padding-top: var(--s3); }
.site-card h3 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.site-card address { font-style: normal; margin-bottom: 10px; }

/* Statisches Kartenbild statt eingebetteter Karte: laedt vom eigenen Server,
   setzt kein Cookie und uebertraegt nichts an Dritte. Erst der Klick fuehrt
   zum Kartendienst, und das ist dann eine Entscheidung des Besuchers. */
.site-card__map {
  display: block;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  line-height: 0;
  transition: border-color .18s ease;
}
.site-card__map:hover { border-color: var(--accent); }
.site-card__map img { width: 100%; height: auto; aspect-ratio: 960 / 420; object-fit: cover; }

/* Formular */
.form { display: grid; gap: var(--s3); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.field label .req { color: var(--accent-deep); }
.field input, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 12px 14px;
  width: 100%;
}
.field input:hover, .field textarea:hover { border-color: var(--text-mute); }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent-deep);
  outline-offset: 1px;
  border-color: var(--accent-deep);
}
.field textarea { min-height: 160px; resize: vertical; }
.form__note { font-size: 0.8125rem; color: var(--text-mute); margin: 0; }

/* Koederfeld gegen Skripte. Es muss fuer den Browser vorhanden und ausfuellbar
   bleiben, darf aber niemandem begegnen: display:none wuerde von manchen
   Skripten erkannt, deshalb steht es ausserhalb des sichtbaren Bereichs.
   Vorlesende Hilfsmittel ueberspringen es ueber aria-hidden im Markup. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldung nach dem Absenden. Bleibt leer, bis es etwas zu sagen gibt. */
.form__status { margin: 0; font-size: 0.9375rem; }
.form__status:empty { display: none; }
.form__status--ok { color: var(--accent-deep); }
/* Eigener Rotton: die Palette kennt keine Fehlerfarbe, und das Petrol der
   Marke taugt nicht dafuer. */
.form__status--fehler { color: #B3261E; }

/* --- Prosa (Impressum, AGB) --------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 { font-size: 1.125rem; margin-top: var(--s6); margin-bottom: var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1rem; margin-top: var(--s4); margin-bottom: var(--s1); }
.prose p, .prose li { font-size: 0.9375rem; }
.prose ul { list-style: disc; padding-inline-start: 20px; margin-bottom: var(--s3); }
.prose li { margin-bottom: 6px; }
/* Eine Merkmalsliste bringt ihr eigenes Zeichen mit, sonst stehen zwei da. */
.prose .speclist { list-style: none; padding-inline-start: 0; }

.factlist { display: grid; gap: 0; margin: 0 0 var(--s4); border-top: 1px solid var(--line); }
.factlist div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s3);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.factlist dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 3px;
}
.factlist dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }

.callout {
  border-inline-start: 3px solid var(--accent);
  background: var(--tint);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.callout p { font-size: 0.9375rem; margin-bottom: 0; }

/* --- Abschluss-Band ----------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { margin-bottom: var(--s2); }
.cta-band p { margin-inline: auto; margin-bottom: var(--s5); max-width: 46ch; }
.cta-band .btn-row { justify-content: center; }

/* --- Fussbereich -------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--s7) var(--s4);
  border-top: 1px solid var(--line-ink);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s5) var(--s4);
}

.site-footer h4 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--s2);
}

.site-footer p, .site-footer address {
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--accent-light); text-decoration: underline; }

.site-footer__logo { height: 68px; width: auto; margin-bottom: var(--s3); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-ink);
  font-size: 0.8125rem;
  color: #A9B4BB;
}
.site-footer__legal ul { display: flex; gap: var(--s3); list-style: none; }
.site-footer__legal .is-soon { color: #929DA5; }

/* Zugang zur Stellenverwaltung: da, aber nicht aufdringlich. */
.site-footer__login { color: #7E8A93 !important; text-decoration: none; }
.site-footer__login:hover { color: var(--accent-light) !important; text-decoration: underline; }

/* --- Sprachweiche ------------------------------------------------------- */

.langgate { min-height: 100dvh; display: grid; place-items: center; text-align: center; }
.langgate img { margin: 0 auto var(--s5); }
.langgate p { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.875rem; }

/* --- Bruchpunkte -------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero { gap: var(--s5); }
  .feature { gap: var(--s5); }
  .scale { gap: var(--s5); }
}

@media (max-width: 900px) {
  :root { --s7: 64px; --s8: 80px; }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--s2) var(--s3) var(--s3);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(51, 63, 72, .08);
  }
  .nav.is-open { display: flex; }
  .nav__item { width: 100%; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .nav__item.is-active { border-bottom-color: var(--accent); }

  /* Der Kopfbereich muss auf 360 px passen: Logo kleiner, Abstaende enger,
     Sprachumschalter ohne Trennlinie. */
  .site-header__inner { position: relative; gap: var(--s2); min-height: 66px; }
  .site-header__logo img { height: 30px; }
  .site-header .langswitch {
    order: 3;
    gap: 6px;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .nav-toggle { padding: 8px 11px; }
  .site-header > .wrap > .btn { display: none; }

  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__text { padding-bottom: 0; }
  .hero__media {
    margin-inline: calc(var(--s3) * -1);
    order: -1;
    margin-bottom: 0;
  }
  .hero__media img { min-height: 0; aspect-ratio: 16 / 10; }
  .hero-section { padding-bottom: var(--s7); }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .intro { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .rig { grid-template-columns: minmax(0, 1fr); }
  .rig__figure { order: -1; }
  .readout { margin-top: var(--s4); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .tallfeature { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tallfeature__media { order: -1; }
  .tallfeature__media img { max-height: 420px; }
  .feature__media--uncropped img { max-height: 380px; }
  .feature .feature__media, .feature--reverse .feature__media { order: -1; }
  /* Traegt die Textspalte den Abschnittskopf, darf das Bild nicht davor
     rutschen: sonst steht das Rendering vor seiner eigenen Ueberschrift. */
  .feature--head .feature__media { order: 0; margin-top: 0; }
  .feature--top.feature--head .carousel { margin-bottom: 0; }
  .carousel__slide img { max-height: 440px; }
  .bleed-media img { aspect-ratio: 16 / 9; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .steps { columns: 1; }
  .steps .step { margin-bottom: var(--s4); }
  .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .job { padding: var(--s4) var(--s3); }
  .job__cols { grid-template-columns: minmax(0, 1fr); }
  .vacancy__cols { grid-template-columns: minmax(0, 1fr); }
  .vacancy__head { padding: var(--s3) var(--s6) var(--s3) var(--s2); }
  .vacancy__head::after { inset-inline-end: var(--s2); top: calc(var(--s3) + 6px); }
  .vacancy__body { padding: 0 var(--s2) var(--s4); }
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .factlist div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }

  .gallery { grid-template-columns: minmax(0, 1fr); }
  .videocard__play { width: 54px; height: 54px; }

  /* Kennwertzeilen umbrechen sonst uneinheitlich: kurze Werte rechts,
     lange links. Untereinander ist auf dem Handy ohnehin besser lesbar. */
  .readout div,
  .ref__specs div,
  .vacancy__head { display: block; }
  .readout dd,
  .ref__specs dd { text-align: start; margin-top: 2px; }
  .readout .readout__lead dd { margin-top: 4px; }
  /* Sechs Karten untereinander sind auf dem Handy sechs Bildschirmhoehen.
     Stattdessen waagrecht wischen, mit Einrastpunkten.

     Die Karte rastet in der Mitte ein, nicht am linken Rand: Links und rechts
     bleibt gleich viel von den Nachbarn stehen, dadurch steht die aktuelle
     Karte mittig im Bild und man sieht nach beiden Seiten, dass es weitergeht.
     Das seitliche Polster ist genau die halbe Differenz zur Kartenbreite,
     sonst koennten erste und letzte Karte nicht in die Mitte rutschen. */
  .refs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: var(--s2);
    margin-inline: calc(var(--s3) * -1);
    padding-inline: 11%;
    padding-bottom: var(--s2);
  }
  .refs::-webkit-scrollbar { height: 4px; }
  .refs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  .refs:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }

  .ref {
    /* volle Breite des Innenbereichs, also Bildschirm minus der beiden
       Polster: die Karte fuellt das Bild, die Nachbarn schauen heraus */
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .site-header__logo img { height: 26px; }
  .nav-toggle { font-size: 0.75rem; padding: 8px 10px; }
  .langswitch { font-size: 0.75rem; }
  .metrics { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .site-header .btn { width: auto; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .picker__set { flex-direction: column; }
  .picker label { margin-inline-start: 0; margin-block-start: -1px; text-align: center; }
  .picker label:first-of-type { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Kein Scroll-Morphing, stattdessen eine konstant eingerueckte Karte. */
  [data-scroll-card] {
    --scroll-card-scale: 0.98;
    --scroll-card-radius: 10px;
  }
}

@media print {
  .site-header, .nav-toggle, .cta-band { display: none; }
  body { color: #000; }
}