/* ==========================================================================
   Das Design-System. Alle Werte kommen aus tokens.css.
   Hier steht keine einzige Farbe und keine einzige Schriftgroesse als Zahl.
   ========================================================================== */

/* --- Grundlage ---------------------------------------------------------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: var(--text-m);
  line-height: var(--lh-text);
  font-weight: var(--gewicht-text);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--gewicht-titel);
  line-height: var(--lh-titel);
  letter-spacing: var(--ls-titel);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

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

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary-fest); color: var(--primary-kontra);
  padding: var(--s-3) var(--s-5);
}
.sprung:focus { left: 0; }

/* --- Raster ------------------------------------------------------------- */

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

.voll { width: 100%; }

.sek { padding-block: var(--sek); }
.sek--eng { padding-block: var(--sek-eng); }

.sek--dunkel {
  background: var(--kontrast);
  color: var(--kontrast-tinte);
  padding-block: var(--sek);
}
.sek--dunkel .label { color: var(--kontrast-tinte); opacity: .7; }

.sek--hell { background: var(--flaeche); padding-block: var(--sek); }

.sek--akzent {
  background: var(--primary-fest);
  color: var(--primary-kontra);
  padding-block: var(--sek);
}

.sek-kopf { max-width: 62ch; margin-bottom: var(--s-7); }
.sek-kopf h2 { margin-bottom: var(--s-4); }

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 var(--s-3);
}

.vorspann { font-size: var(--text-l); color: var(--tinte-leise); }

.fliesstext { max-width: 68ch; }
.fliesstext p + p { margin-top: var(--s-4); }

.sek--zweispaltig > .wrap {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: var(--spalt);
  align-items: start;
}
.klebend { position: sticky; top: calc(var(--knopf-hoehe) + var(--s-7)); }

.trenner { border: 0; border-top: 1px solid var(--linie); margin: 0; }

/* --- Knoepfe ------------------------------------------------------------ */

.knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--knopf-hoehe);
  padding: 0 var(--s-6);
  background: var(--primary-fest);
  color: var(--primary-kontra);
  border: 1px solid var(--primary-fest);
  border-radius: var(--radius-knopf);
  font-family: var(--font-text);
  font-size: var(--text-s);
  font-weight: var(--gewicht-stark);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn:active { transform: translateY(1px); }

.btn--leer {
  background: transparent;
  color: currentColor;
  border-color: var(--linie);
}
.btn--leer:hover { background: transparent; border-color: currentColor; }

.btn--klein { min-height: calc(var(--knopf-hoehe) - 8px); padding: 0 var(--s-5); font-size: var(--text-xs); }

/* --- Kopf --------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: transform var(--dauer-lang) var(--kurve);
}
.kopf--weg { transform: translateY(-100%); }

.kopf-innen {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 76px;
}

.logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo svg, .logo-bild { height: 36px; width: auto; }
.wortmarke {
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--ls-titel);
}

.nav { margin-left: auto; }
.nav > ul {
  display: flex; align-items: center; gap: var(--s-6);
  list-style: none; margin: 0; padding: 0;
}
.nav a, .nav-knopf {
  font-size: var(--text-s);
  text-decoration: none;
  color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.nav a:hover, .nav-knopf:hover { color: var(--primary-text); }
.nav a[aria-current="page"] { color: var(--primary-text); }

.nav-gruppe { position: relative; }
.nav-pfeil {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dauer) var(--kurve);
}
.nav-knopf[aria-expanded="true"] .nav-pfeil { transform: rotate(225deg) translateY(-2px); }

.nav-unter {
  position: absolute; top: calc(100% + var(--s-4)); left: calc(var(--s-4) * -1);
  min-width: 240px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  list-style: none; margin: 0; padding: var(--s-3);
  display: none;
}
.nav-knopf[aria-expanded="true"] + .nav-unter { display: block; }
.nav-unter a { display: block; padding: var(--s-3) var(--s-4); border-radius: var(--radius-klein); }
.nav-unter a:hover { background: var(--flaeche); }

.kopf-aktion { display: flex; align-items: center; gap: var(--s-4); }
.kopf-tel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
}

.burger {
  color: inherit;
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px; padding: 0;
}
.burger span {
  display: block; height: 1.5px; width: 24px; background: currentColor;
  transition: transform var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobilnav {
  display: none;
  border-top: 1px solid var(--linie);
  padding: var(--s-5) var(--rand) var(--s-7);
}
.mobilnav ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.mobilnav li + li { border-top: 1px solid var(--linie); }
.mobilnav a { display: block; padding: var(--s-4) 0; text-decoration: none; font-size: var(--text-l); }
.mobilnav .nav-knopf { padding: var(--s-4) 0; font-size: var(--text-l); }
.mobilnav .nav-unter { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 var(--s-3) var(--s-5); }
.mobilnav .btn { width: 100%; }

/* --- Held --------------------------------------------------------------- */

.held { position: relative; padding-block: calc(var(--sek) * 1.4) var(--sek); overflow: clip; }
/* .held-inhalt ist zugleich .wrap. Ein max-width hier wuerde die Containerbreite
   ueberschreiben und die Buehne gegenueber allen anderen Sektionen einruecken.
   Begrenzt wird deshalb der Text, nicht der Rahmen. */
.held-inhalt { position: relative; z-index: 2; }
.held-titel { font-size: var(--h1); margin-bottom: var(--s-5); max-width: 20ch; }
.held-text { font-size: var(--text-l); max-width: 58ch; }

.held--voll { min-height: min(84vh, 760px); display: flex; align-items: flex-end; }
.held--voll .held-medium { position: absolute; inset: 0; z-index: 1; }
.held--voll .held-medium img,
.held--voll .held-medium video { width: 100%; height: 100%; object-fit: cover; }
/* Schleier und weisse Schrift haengen am Medium, nicht an der Bauform.
   Eine Buehne ohne Bild bleibt Schrift auf Papier. */
.held--voll.held--medium::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .15) 60%, transparent);
}
.held--voll.held--medium .held-inhalt { color: #fff; padding-bottom: var(--s-6); }
.held--voll.held--medium .label { color: #fff; opacity: .85; }
.held--voll:not(.held--medium) { align-items: center; min-height: min(70vh, 640px); }

.held--geteilt > .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt); align-items: center; }
.held--geteilt .held-medium { border-radius: var(--radius); overflow: hidden; }

.held--ruhig { padding-block: calc(var(--sek) * 1.1) var(--sek-eng); }
.held--ruhig .held-inhalt { max-width: 26ch; }
.held--ruhig .held-titel { font-size: var(--h1); }

.held--dunkel { background: var(--kontrast); color: var(--kontrast-tinte); }
.held--dunkel .label { color: var(--kontrast-tinte); opacity: .7; }

/* --- Raster und Karten -------------------------------------------------- */

.raster { display: grid; gap: var(--spalt); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

.karte {
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition: border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.karte--link:hover { border-color: var(--primary); transform: translateY(-3px); }
.karte-bild { aspect-ratio: 4 / 3; overflow: hidden; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-lang) var(--kurve); }
.karte--link:hover .karte-bild img { transform: scale(1.04); }
.karte-inhalt { padding: var(--s-6); flex: 1; }
.karte-inhalt h3 { font-size: var(--h4); margin-bottom: var(--s-3); }
.karte-inhalt p { font-size: var(--text-s); color: var(--tinte-leise); }
.karte-punkte { list-style: none; margin: var(--s-4) 0 0; padding: 0; font-size: var(--text-s); }
.karte-punkte li { padding-left: var(--s-5); position: relative; margin-bottom: var(--s-2); }
.karte-punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--primary);
}
.karte-pfeil {
  position: absolute; right: var(--s-6); bottom: var(--s-6);
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--primary); border-right: 1.5px solid var(--primary);
  transform: rotate(45deg);
  transition: transform var(--dauer) var(--kurve);
}
.karte--link:hover .karte-pfeil { transform: rotate(45deg) translate(3px, -3px); }

/* --- Zahlen ------------------------------------------------------------- */

.zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spalt);
  border-top: 1px solid var(--linie);
  padding-top: var(--s-7);
}
.zahl { display: flex; flex-direction: column; gap: var(--s-2); }
.zahl-wert {
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: var(--gewicht-titel);
  line-height: 1;
  color: var(--primary);
}
.zahl-label { font-size: var(--text-s); color: var(--tinte-leise); max-width: 22ch; }

/* --- Bild neben Text ---------------------------------------------------- */

.bild-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt); align-items: center; }
.bt-bild { border-radius: var(--radius); overflow: hidden; }
.bt-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bt-text .sek-kopf { margin-bottom: var(--s-5); }

/* --- Galerie ------------------------------------------------------------ */

.galerie { display: grid; gap: var(--spalt); }
.galerie--2 { grid-template-columns: repeat(2, 1fr); }
.galerie--3 { grid-template-columns: repeat(3, 1fr); }
.galerie--4 { grid-template-columns: repeat(4, 1fr); }
.galerie-item { margin: 0; }
.galerie-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-klein); }
.galerie-item figcaption {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--tinte-leise); margin-top: var(--s-3);
}

/* --- Listen, Tabellen, Zitate ------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.liste--zwei { columns: 2; column-gap: var(--spalt); max-width: none; }
.liste li {
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  border-top: 1px solid var(--linie);
  position: relative;
  break-inside: avoid;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s-4) + .62em);
  width: 12px; height: 1px; background: var(--primary);
}
ol.liste { counter-reset: pos; }
ol.liste li::before {
  counter-increment: pos; content: counter(pos, decimal-leading-zero);
  background: none; width: auto; top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--primary-text);
}

.tabelle-rolle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
.tabelle th, .tabelle td {
  text-align: left; padding: var(--s-4) var(--s-5) var(--s-4) 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.tabelle th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--tinte-leise); font-weight: var(--gewicht-text);
}

.zitat { margin: 0; max-width: 40ch; }
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: var(--lh-titel);
  text-wrap: balance;
}
.zitat-quelle {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--tinte-leise); margin-top: var(--s-5);
}

.logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-7);
}
.logos img { height: 40px; width: auto; opacity: .65; filter: grayscale(1); }
.logos span {
  font-family: var(--font-mono); font-size: var(--text-s);
  color: var(--tinte-leise);
}

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

.person { text-align: left; }
.person-bild {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); margin-bottom: var(--s-4);
  filter: grayscale(1); transition: filter var(--dauer-lang) var(--kurve);
}
.person:hover .person-bild { filter: grayscale(0); }
.person h3 { font-size: var(--h4); margin-bottom: var(--s-1); }
.person-rolle { font-size: var(--text-s); color: var(--tinte-leise); margin-bottom: var(--s-3); }
.person-kontakt { font-family: var(--font-mono); font-size: var(--text-xs); }

/* --- Schritte ----------------------------------------------------------- */

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritt {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--s-5);
  padding: var(--s-6) 0; border-top: 1px solid var(--linie);
}
.schritt-nr {
  font-family: var(--font-mono); font-size: var(--text-s);
  color: var(--primary-text);
}
.schritt h3 { font-size: var(--h4); margin-bottom: var(--s-3); }
.schritt p { color: var(--tinte-leise); max-width: 60ch; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { max-width: 80ch; border-top: 1px solid var(--linie); }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary {
  cursor: pointer; list-style: none;
  padding: var(--s-5) var(--s-7) var(--s-5) 0;
  font-family: var(--font-display); font-size: var(--h4);
  position: relative;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: ""; position: absolute; right: var(--s-2); top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dauer) var(--kurve);
}
.faq-eintrag[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq-antwort { padding-bottom: var(--s-6); max-width: 68ch; color: var(--tinte-leise); }

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

.formular {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  max-width: 760px;
}
.feld { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.feld--voll { grid-column: 1 / -1; }
.feld label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--tinte-leise);
}
.feld abbr { text-decoration: none; color: var(--primary-text); }
.feld input, .feld textarea, .feld select {
  font-family: var(--font-text); font-size: var(--text-s);
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: var(--s-4);
  width: 100%;
}
.feld textarea { resize: vertical; min-height: 160px; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.hinweis {
  border-left: 2px solid var(--primary);
  padding: var(--s-4) var(--s-5);
  background: var(--flaeche);
  max-width: 60ch;
}

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

.sek--cta { background: var(--kontrast); color: var(--kontrast-tinte); padding-block: var(--sek); }
.cta { max-width: 56ch; }
.cta h2 { font-size: var(--h2); }
.cta-text { font-size: var(--text-l); opacity: .85; }
.sek--cta .label { color: var(--kontrast-tinte); opacity: .7; }
.sek--cta .btn--leer { border-color: color-mix(in srgb, var(--kontrast-tinte) 40%, transparent); }

/* --- Fuss --------------------------------------------------------------- */

.fuss {
  background: var(--kontrast);
  color: var(--kontrast-tinte);
  padding-top: var(--sek);
  margin-top: var(--sek);
}
/* Endet die Seite bereits auf einer dunklen Flaeche, gibt es keine Fuge.
   Abschluss und Fuss sind keine Geschwister, der Abschluss steht in <main>. */
main:has(> .sek--cta:last-child) + .fuss,
main:has(> .sek--dunkel:last-child) + .fuss,
main:has(> .sek--akzent:last-child) + .fuss { margin-top: 0; }
.fuss-innen {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--spalt);
  padding-bottom: var(--s-8);
}
.fuss-spalte h2 {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  opacity: .6; margin-bottom: var(--s-4); font-weight: var(--gewicht-text);
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li { margin-bottom: var(--s-3); }
.fuss-spalte a { text-decoration: none; font-size: var(--text-s); }
.fuss-spalte a:hover { text-decoration: underline; }
.fuss address { font-style: normal; font-size: var(--text-s); line-height: 1.7; }
.fuss-marke svg, .fuss-marke .logo-bild { height: 34px; width: auto; margin-bottom: var(--s-4); }
.fuss-claim { font-size: var(--text-s); opacity: .7; max-width: 30ch; }
.fuss-zeile {
  display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, var(--kontrast-tinte) 20%, transparent);
  padding-block: var(--s-5);
  font-family: var(--font-mono); font-size: var(--text-xs);
  opacity: .7;
}
.fuss-zeile p { margin: 0; }
.fuss-recht a, .fuss-social a { text-decoration: none; margin-right: var(--s-4); }

/* --- Bewegung ----------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve);
}
.js [data-reveal].sichtbar { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-verzug="1"] { transition-delay: 90ms; }
.js [data-reveal][data-reveal-verzug="2"] { transition-delay: 180ms; }
.js [data-reveal][data-reveal-verzug="3"] { transition-delay: 270ms; }

/* --- Schirme ------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root { --h1: clamp(38px, 6vw, 64px); }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .fuss-innen { grid-template-columns: 1fr 1fr; row-gap: var(--s-7); }
}

@media (max-width: 991px) {
  /* "Kommunikationskonzept" ist bei 46px breiter als ein Handy. Ohne Trennung
     laeuft das Wort aus dem Bild, und overflow:clip versteckt den Fehler auch
     noch. Das lang-Attribut der Seite steuert, wo getrennt wird.
     Nur auf schmalen Schirmen: auf dem Desktop trennt dieselbe Regel auch
     gewoehnliche Woerter ("Maschi-nen"), und das sieht schlechter aus als
     eine etwas ungleiche Zeile. */
  h1, h2, h3, h4 { hyphens: auto; }
}

@media (max-width: 860px) {
  .nav, .kopf-tel { display: none; }
  .burger { display: flex; }
  .kopf-innen { gap: var(--s-4); }
  .kopf-aktion { margin-left: auto; }
  .mobilnav[data-offen] { display: block; }
  .raster--3, .raster--2, .galerie--3, .galerie--4 { grid-template-columns: repeat(2, 1fr); }
  .bild-text, .held--geteilt > .wrap { grid-template-columns: 1fr; }
  .bild-text--rechts .bt-bild { order: -1; }
  .sek--zweispaltig > .wrap { grid-template-columns: 1fr; }
  .klebend { position: static; }
  .liste--zwei { columns: 1; }
}

@media (max-width: 560px) {
  :root { --sek: 56px; --sek-eng: 40px; --spalt: 16px; --rand: 18px; }
  /* Auf dem Handy zaehlt der Daumen, nicht die Eleganz. Unter 44px trifft
     man die Schaltflaeche im Stehen, im Handschuh oder im Bus nicht mehr. */
  .btn--klein { min-height: 44px; }
  .logo { min-height: 44px; }
  .fuss-spalte a, .fuss address a { display: inline-block; padding-block: 4px; }
  .raster--3, .raster--2, .raster--4, .galerie--2, .galerie--3, .galerie--4 { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; }
  .held--voll { min-height: 76vh; }
  .zahlen { grid-template-columns: 1fr 1fr; }
  .schritt { grid-template-columns: 1fr; gap: var(--s-2); }
  .fuss-innen { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .kopf, .mobilnav, .sprung, .knoepfe { display: none; }
  body { color: #000; background: #fff; }
}

/* ========================================================================
   Nuvora × Omnis
   Die folgenden Regeln uebersetzen die gemessene Omnis-Grammatik in die
   fiktive Nuvora-Marke: grosse leichte Schrift, technische Linien, dunkle
   Buehnen und ein sparsamer Türkis-Akzent.
   ======================================================================== */

section[id] { scroll-margin-top: 76px; }

.seitennaht {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  pointer-events: none;
}

.seitennaht span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.kopf {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  color: var(--kontrast-tinte);
  background: color-mix(in srgb, var(--kontrast) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--kontrast-tinte) 20%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
}

.kopf-innen { min-height: 82px; }
.logo .logo-bild { width: 190px; height: auto; }
.nav > ul { gap: clamp(var(--s-4), 2.1vw, var(--s-6)); }
.nav a { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.nav a:hover { color: var(--primary); }
.kopf-tel { opacity: .82; }
.kopf .btn--klein { min-height: 48px; padding-inline: 22px; }

.mobilnav {
  color: var(--kontrast-tinte);
  background: var(--kontrast);
  max-height: calc(100svh - 82px);
  overflow-y: auto;
}

.held--voll {
  min-height: 100svh;
  align-items: center;
  padding-block: 148px 70px;
  background: var(--kontrast);
}

.held--voll video.held-medium {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.78) contrast(1.08);
  pointer-events: none;
}

.held--voll video::-webkit-media-controls { display: none !important; }

.held--voll.held--medium::after {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kontrast) 72%, transparent) 0%, transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--kontrast) 78%, transparent) 0%, color-mix(in srgb, var(--kontrast) 34%, transparent) 58%, color-mix(in srgb, var(--kontrast) 58%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--kontrast) 76%, transparent) 0%, transparent 38%);
}

.held--voll.held--medium .held-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  grid-template-areas:
    "label label"
    "title title"
    "text actions";
  gap: var(--s-5) var(--s-7);
  align-items: end;
  padding-bottom: 0;
  text-align: left;
}

.held .label {
  grid-area: label;
  margin: 0;
  font-weight: 600;
  letter-spacing: .14em;
}

.held-titel {
  grid-area: title;
  max-width: none;
  margin: 0;
  font-size: clamp(52px, 8.5vw, 132px);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-wrap: nowrap;
}

.held-titel > span { display: block; }
.held-titel-akzent {
  margin-left: clamp(0px, 8vw, 120px);
  color: var(--primary);
  font-style: italic;
  font-weight: 300;
}

.held-text {
  grid-area: text;
  max-width: 52ch;
  font-size: clamp(17px, 1.55vw, 22px);
  opacity: .94;
}

.held .knoepfe {
  grid-area: actions;
  justify-content: flex-end;
  margin: 0;
}

.held .btn { min-width: 178px; }
.held .btn--leer { border-color: color-mix(in srgb, var(--kontrast-tinte) 55%, transparent); }

.held-pikett {
  position: absolute;
  right: var(--rand);
  top: -56px;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  min-height: 44px;
  padding-block: 10px;
}

.held-pikett::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent);
}

.held-pikett strong { font-size: inherit; font-weight: 600; }

.beweisband { padding-block: 78px; }
.beweisband .sek-kopf {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: var(--spalt);
  align-items: end;
  max-width: none;
}
.beweisband .sek-kopf h2 { max-width: 16ch; font-size: var(--h3); }
.beweisband .zahlen { grid-template-columns: repeat(4, 1fr); }
.beweisband .zahl { border-left: 1px solid var(--linie); padding-left: var(--s-5); }
.beweisband .zahl-wert { color: var(--primary-text); font-size: clamp(42px, 5vw, 68px); font-weight: 300; }

.manifest {
  color: var(--kontrast-tinte);
  background: var(--kontrast);
  padding-block: calc(var(--sek) * 1.15);
}
.manifest .label { color: var(--primary); }
.manifest.sek--zweispaltig > .wrap { grid-template-columns: 1fr 1fr; }
.manifest .klebend h2 {
  max-width: none;
  font-size: clamp(44px, 4.7vw, 68px);
  hyphens: none;
  overflow-wrap: normal;
}
.manifest .fliesstext { font-size: var(--text-l); color: color-mix(in srgb, var(--kontrast-tinte) 78%, transparent); }
.manifest .fliesstext p { max-width: 48ch; }
.manifest .btn { color: var(--primary-kontra); }

.leistungen .sek-kopf { max-width: 920px; }
.leistungen .sek-kopf h2 { font-size: var(--h2); }
.leistungen .raster { row-gap: var(--s-7); }
.leistungen .karte { min-height: 100%; border-color: color-mix(in srgb, var(--linie) 80%, transparent); }
.leistungen .karte-bild { aspect-ratio: 16 / 10; }
.leistungen .karte-inhalt { padding: var(--s-5) var(--s-5) var(--s-7); }
.leistungen .karte-inhalt h3 { font-size: var(--h4); }
.karte-meta {
  margin-bottom: var(--s-3) !important;
  color: var(--primary-text) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kompetenz { padding-block: calc(var(--sek) * 1.15); }
.kompetenz .bild-text { gap: clamp(var(--s-7), 7vw, 112px); }
.kompetenz .bt-bild { border-radius: 50%; aspect-ratio: 1; }
.kompetenz .bt-bild img { height: 100%; aspect-ratio: 1; }
.kompetenz .sek-kopf h2 { font-size: var(--h2); }
.kompetenz .fliesstext { color: color-mix(in srgb, var(--kontrast-tinte) 76%, transparent); }
.kompetenz .btn--leer { border-color: color-mix(in srgb, var(--kontrast-tinte) 38%, transparent); }

.prozess .sek-kopf { max-width: 860px; }
.prozess .sek-kopf h2 { font-size: var(--h2); }
.prozess .schritt {
  grid-template-columns: minmax(74px, .28fr) minmax(0, 1.72fr);
  padding-block: var(--s-7);
}
.prozess .schritt-nr { font-size: var(--text-m); color: var(--primary-text); }
.prozess .schritt h3 { font-size: clamp(28px, 4vw, 52px); font-weight: 300; }
.prozess .schritt p { margin-left: auto; max-width: 52ch; color: var(--tinte-leise); }

.referenzen { background: var(--grund-zwei); }
.referenzen .sek-kopf { max-width: 900px; }
.referenzen .sek-kopf h2 { font-size: var(--h2); }
.referenzen .karte { min-height: 540px; background: var(--kontrast); border: 0; color: var(--kontrast-tinte); }
.referenzen .karte:nth-child(2) { background: var(--flaeche); color: var(--tinte); }
.referenzen .karte:nth-child(3) { background: var(--primary-fest); color: var(--primary-kontra); }
.referenzen .karte-bild { aspect-ratio: 16 / 10; }
.referenzen .karte-inhalt { display: flex; flex-direction: column; padding: var(--s-6); }
.referenzen .karte-inhalt h3 {
  margin-top: auto;
  font-size: clamp(34px, 3.05vw, 44px);
  hyphens: none;
  overflow-wrap: normal;
}
.referenzen .karte-inhalt p { color: inherit; opacity: .78; }
.referenzen .karte-meta { color: inherit !important; opacity: .72; }
.karte-kennzahl {
  padding: var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.unternehmen { padding-block: calc(var(--sek) * 1.15); }
.unternehmen .bild-text { gap: clamp(var(--s-7), 7vw, 112px); }
.unternehmen .bt-bild img { aspect-ratio: 4 / 5; }
.unternehmen .sek-kopf h2 { font-size: var(--h2); }

.fragen .wrap {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: clamp(var(--s-7), 7vw, 112px);
  align-items: start;
}
.fragen .sek-kopf { position: sticky; top: 112px; }
.fragen .sek-kopf h2 { font-size: var(--h3); }
.fragen .faq { max-width: none; }
.fragen .faq-eintrag summary { font-size: clamp(21px, 2vw, 28px); }

.kontaktabschluss { min-height: 72svh; display: flex; align-items: center; }
.kontaktabschluss .cta { max-width: 1050px; }
.kontaktabschluss .cta h2 { max-width: 15ch; font-size: var(--h1); line-height: .98; }
.kontaktabschluss .cta-text { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--spalt); max-width: 920px; }
.kontaktabschluss .knoepfe { margin-top: var(--s-7); }

.anfrageformular {
  padding-block: 0 calc(var(--sek) * 1.15);
}
.anfrageformular > .wrap {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  gap: clamp(var(--s-7), 7vw, 112px);
  align-items: start;
  padding-top: clamp(var(--s-7), 7vw, 96px);
  border-top: 1px solid color-mix(in srgb, var(--kontrast-tinte) 20%, transparent);
}
.anfrageformular .sek-kopf { margin: 0; }
.anfrageformular .sek-kopf h2 { font-size: var(--h3); }
.anfrageformular .vorspann { color: color-mix(in srgb, var(--kontrast-tinte) 70%, transparent); }
.anfrageformular .formular {
  max-width: none;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--tinte);
  border: 1px solid color-mix(in srgb, var(--kontrast-tinte) 16%, transparent);
  border-radius: var(--radius);
}
.anfrageformular .feld label { color: var(--kontrast-tinte); }
.anfrageformular .feld input,
.anfrageformular .feld textarea,
.anfrageformular .feld select {
  color: var(--kontrast-tinte);
  background: color-mix(in srgb, var(--kontrast) 62%, var(--kontrast-tinte));
  border-color: color-mix(in srgb, var(--kontrast-tinte) 28%, transparent);
}
.anfrageformular .feld select option { color: var(--tinte); background: var(--flaeche); }
.formular-hinweis {
  margin: 0;
  color: var(--kontrast-tinte);
  font-size: 13px;
}
.formular-status {
  margin: 0;
  padding: var(--s-4);
  color: var(--kontrast-tinte);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-left: 2px solid var(--primary);
}
.formular-status:empty { display: none; }

.fuss { margin-top: 0; }
.fuss-innen { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
.fuss .logo-bild { width: 210px; height: auto; }

@media (max-width: 1080px) {
  :root { --h1: clamp(48px, 8vw, 88px); }
  .held--voll.held--medium .held-inhalt {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "title" "text" "actions";
  }
  .held .knoepfe { justify-content: flex-start; }
  .held-pikett { top: -42px; }
  .held-titel { font-size: clamp(54px, 9.6vw, 102px); }
  .beweisband .zahlen { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); }
}

@media (max-width: 860px) {
  .kopf-innen { min-height: 72px; }
  .logo .logo-bild { width: 166px; }
  .held--voll { padding-top: 126px; min-height: 100svh; }
  .held-titel { text-wrap: balance; }
  .manifest.sek--zweispaltig > .wrap { grid-template-columns: 1fr; }
  .manifest .klebend h2 { font-size: clamp(40px, 8vw, 60px); }
  .fragen .wrap { grid-template-columns: 1fr; }
  .fragen .sek-kopf { position: static; }
  .referenzen .karte { min-height: 480px; }
  .fuss-innen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --sek: 72px; }
  .kopf-aktion .btn { display: none; }
  .kopf-innen { gap: var(--s-3); }
  .burger { margin-left: auto; }
  .held--voll { min-height: 100svh; padding-block: 112px 42px; }
  .held--voll.held--medium .held-inhalt { gap: var(--s-4); }
  .held-titel { font-size: clamp(43px, 14.2vw, 64px); line-height: .94; text-wrap: balance; }
  .held-titel-akzent { margin-left: 0; }
  .held-text { font-size: 17px; max-width: 33ch; }
  .held .knoepfe { display: grid; grid-template-columns: 1fr; width: 100%; gap: var(--s-2); margin-top: var(--s-2); }
  .held .btn { width: 100%; min-height: 52px; }
  .held-pikett { position: static; grid-area: auto; margin-top: var(--s-2); flex-wrap: wrap; }
  .beweisband { padding-block: var(--sek); }
  .beweisband .sek-kopf { grid-template-columns: 1fr; }
  .beweisband .zahlen { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
  .beweisband .zahl { padding-left: var(--s-3); }
  .beweisband .zahl-wert { font-size: 42px; }
  .manifest .fliesstext { font-size: 18px; }
  .manifest .klebend h2 { font-size: 40px; }
  .leistungen .raster { row-gap: var(--s-4); }
  .leistungen .karte-inhalt { padding: var(--s-5) var(--s-5) var(--s-7); }
  .kompetenz .bt-bild { border-radius: var(--radius); }
  .prozess .schritt { grid-template-columns: 52px 1fr; gap: var(--s-3); padding-block: var(--s-5); }
  .prozess .schritt h3 { font-size: 27px; }
  .prozess .schritt p { margin-left: 0; }
  .referenzen .karte { min-height: 430px; }
  .referenzen .karte-inhalt h3 { font-size: 34px; }
  .kontaktabschluss { min-height: auto; }
  .kontaktabschluss .cta h2 { font-size: clamp(42px, 13vw, 60px); }
  .kontaktabschluss .cta-text { grid-template-columns: 1fr; }
  .anfrageformular > .wrap { grid-template-columns: 1fr; gap: var(--s-7); }
  .anfrageformular .formular { padding: var(--s-5); }
  .fuss-innen { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .seitennaht { display: none; }
  .held-medium { visibility: hidden; }
  .held--voll {
    background-image:
      linear-gradient(90deg, color-mix(in srgb, var(--kontrast) 72%, transparent), color-mix(in srgb, var(--kontrast) 42%, transparent)),
      url("../img/hero-poster.webp");
    background-size: cover;
    background-position: center;
  }
}