/* =========================================================================
   Levien-Druck GmbH — Stylesheet
   Aufbau: 1 Schriften · 2 Tokens · 3 Basis · 4 Typografie · 5 Raster
           6 Kontrollstreifen · 7 Header · 8 Footer · 9 Komponenten
           10 Formulare · 11 Bewegung · 12 Druck
   ========================================================================= */

/* 1 — Schriften, selbst gehostet ---------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2 — Tokens ------------------------------------------------------------- */

:root {
  /* Flächen */
  --papier:      #F2F1EE;
  --papier-tief: #E4E2DD;
  --weiss:       #FDFDFC;

  /* Schrift */
  --tinte:     #1A1C1B;
  --grau:      #63655F;
  --grau-hell: #C9C8C4;

  /* Akzent */
  --reflex:      #17257C;
  --reflex-hell: #3A4BA8;

  /* Kennfarben. Cyan, Gelb und Magenta sind die Hausfarben aus dem Logo und
     strukturieren ausgewählte Karten, Hinweise und Übergänge. */
  --cyan:    #00a0e2;
  --gelb:    #fea901;
  --magenta: #cc0540;
  --gruen:   #00A15A;
  --orange:  #EA5B0C;
  --violett: #6B2C8F;

  /* Schriftfamilien */
  --ff-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-utility: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Schriftgrößen */
  --fs-eyebrow: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-klein:   clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-lead:    clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --fs-h3:      clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --fs-h2:      clamp(1.7rem, 1.5rem + 1vw, 2.4rem);
  --fs-h1:      clamp(2.25rem, 1.9rem + 2.1vw, 3.9rem);
  --fs-zahl:    clamp(3rem, 2.2rem + 4vw, 6rem);

  /* Vertikale Skala */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 144px;

  /* Raster */
  --breite: 1240px;
  --rinne: 24px;
  --rand: 24px;

  --radius: 2px;
  --linie: 1px solid var(--grau-hell);

  /* Kennfarbe der aktuellen Seite, von Bereichsseiten überschrieben */
  --kennfarbe: var(--reflex);
}

@media (min-width: 768px)  { :root { --rand: 48px; } }
@media (min-width: 1280px) { :root { --rand: 80px; } }

/* 3 — Basis -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

.sprungmarke {
  position: absolute; left: var(--rand); top: 8px;
  z-index: 100; transform: translateY(-200%);
  background: var(--reflex); color: #fff;
  padding: 12px 20px; font-family: var(--ff-utility);
  font-size: var(--fs-klein); font-weight: 600; text-decoration: none;
}
.sprungmarke:focus { transform: translateY(0); }

/* 4 — Typografie --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 680;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--s3);
  text-wrap: balance;
  /* Lange Komposita dürfen auf schmalen Displays nicht über den Satzspiegel laufen */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; }
h4 {
  font-size: var(--fs-body); font-stretch: 100%; font-weight: 600;
  letter-spacing: 0; line-height: 1.3; margin-bottom: var(--s1);
}

p, ul, ol, dl { margin: 0 0 var(--s3); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

.fliess > p, .fliess > ul, .fliess > ol { max-width: 34em; }

.eyebrow {
  display: block;
  font-family: var(--ff-utility);
  font-stretch: 100%;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 var(--s2);
}
.eyebrow--kennfarbe {
  color: var(--tinte);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow--kennfarbe::before {
  content: ''; width: 22px; height: 8px;
  background: var(--kennfarbe); flex: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 30em;
}

.klein {
  font-family: var(--ff-utility);
  font-stretch: 100%;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: var(--grau);
}

em, i { font-style: italic; }
strong, b { font-weight: 600; }

a { color: var(--reflex); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--reflex-hell); }
a { transition: color 120ms ease; }

/* Aufzählungen */
.liste { list-style: none; padding: 0; }
.liste > li {
  position: relative; padding-left: 22px; margin-bottom: var(--s1);
}
.liste > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 2px; background: var(--kennfarbe);
}

.liste-nummern { counter-reset: schritt; list-style: none; padding: 0; }
.liste-nummern > li {
  counter-increment: schritt;
  position: relative; padding-left: 52px; margin-bottom: var(--s3);
  max-width: 36em;
}
.liste-nummern > li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
  color: var(--kennfarbe);
  font-variant-numeric: tabular-nums;
}

/* Aufzählung als Fließzeile mit Mittelpunkten */
.punktliste {
  font-family: var(--ff-body);
  max-width: 42em;
}

/* Tabellen */
.tabelle-huelle { overflow-x: auto; margin-bottom: var(--s3); }
table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
caption {
  text-align: left; color: var(--grau);
  font-size: var(--fs-klein); padding-bottom: var(--s2);
}
th, td {
  padding: 12px 16px 12px 0;
  border-bottom: var(--linie);
  vertical-align: top;
}
thead th {
  font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-eyebrow);
  border-bottom: 1px solid var(--tinte);
}
tbody th { font-weight: 600; width: 40%; }

/* 5 — Raster und Abschnitte ---------------------------------------------- */

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

.abschnitt { padding-block: var(--s5); }
@media (min-width: 768px) { .abschnitt { padding-block: var(--s6); } }
.abschnitt--tief { background: var(--papier-tief); }
.abschnitt--akzent { background: var(--reflex); color: #fff; }
.abschnitt--akzent .eyebrow,
.abschnitt--akzent .lead,
.abschnitt--akzent figcaption { color: rgb(255 255 255 / 0.82); }
.abschnitt--akzent .platzhalter {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.26);
}


.abschnitt__kopf { max-width: 44rem; margin-bottom: var(--s4); }
@media (min-width: 768px) { .abschnitt__kopf { margin-bottom: var(--s5); } }

/* Zwei Spalten, Text links, Beiwerk rechts */
.split { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
  .split--textbreit { grid-template-columns: 7fr 5fr; }
  .split--medienbreit { grid-template-columns: 5fr 7fr; }
  .split--oben { align-items: start; }
}

.spalten { display: grid; gap: var(--s4); }
@media (min-width: 700px)  { .spalten--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .spalten--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .spalten--2 { grid-template-columns: repeat(2, 1fr); } }

/* 6 — Kontrollstreifen ---------------------------------------------------- */

.kontrollstreifen {
  display: flex;
  width: 100%;
  height: 16px;
  align-items: flex-start;
  background: var(--papier-tief);
  overflow: hidden;
  transform-origin: left center;
  animation: streifen-aufbau 500ms ease-out both;
}

@keyframes streifen-aufbau { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.kontrollstreifen__feld {
  flex: 1 1 0;
  height: 8px;
  background: var(--f, var(--grau-hell));
}

.kontrollstreifen__feld.is-aktiv {
  height: 16px;
  flex-grow: 1.6;
}

/* 7 — Header und Navigation ----------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  /* Als Variable, weil das mobile Menü genau darunter ansetzen muss */
  --kopf-hoehe: 72px;
}
@media (min-width: 900px) { .kopf { --kopf-hoehe: 88px; } }
.kopf.is-geschrumpft {
  --kopf-hoehe: 64px;
  border-bottom-color: var(--grau-hell);
  box-shadow: 0 1px 12px rgb(26 28 27 / 0.06);
}

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  height: var(--kopf-hoehe);
  transition: height 160ms ease;
}

.kopf__logo { display: block; flex: none; padding: 4px; margin-left: -4px; }
.kopf__logo img {
  height: 26px; width: auto;
  transition: height 160ms ease;
}
@media (min-width: 900px) { .kopf__logo img { height: 32px; } }

/* Navigation als details/summary: ohne JavaScript bedienbar */
.hauptnav { position: relative; }
.hauptnav > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 4px; cursor: pointer;
}
.hauptnav > summary::-webkit-details-marker { display: none; }
.hauptnav__burger { display: grid; gap: 4px; width: 20px; }
.hauptnav__burger span {
  display: block; height: 2px; background: var(--tinte);
  transition: transform 160ms ease, opacity 120ms ease;
}
/* Offen wird aus den drei Balken ein Kreuz, damit der Weg zurück eindeutig
   ist. Die äußeren rücken um Balken plus Abstand in die Mitte. */
.hauptnav[open] .hauptnav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hauptnav[open] .hauptnav__burger span:nth-child(2) { opacity: 0; }
.hauptnav[open] .hauptnav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hauptnav__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 60;
  width: min(320px, calc(100vw - 2 * var(--rand)));
  background: var(--weiss);
  border: var(--linie);
  padding: var(--s2);
  box-shadow: 0 12px 40px rgb(26 28 27 / 0.12);
}

/* Unter 1180 px ist die Navigation keine schwebende Klappliste, sondern eine
   eigene Fläche: Sie füllt alles unterhalb der Kopfzeile und scrollt in sich.
   Als schwebender Kasten war sie mit allen Unterpunkten rund 1000 px hoch und
   lief unten aus dem Bild, ohne erreichbar zu sein.

   position: fixed mit bottom: 0 rechnet die Höhe selbst aus, statt sie über
   Bildschirmeinheiten zu schätzen. Das trifft auch dann, wenn die Leisten des
   mobilen Browsers ein- und ausfahren. */
@media (max-width: 1179px) {
  .hauptnav__panel {
    position: fixed;
    inset: var(--kopf-hoehe) 0 0 0;
    width: auto;
    z-index: 40;
    border: 0; border-top: var(--linie);
    box-shadow: none;
    padding: var(--s3) var(--rand);
    /* Luft für die Gestentaste am unteren Rand des Telefons */
    padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom));
    overflow-y: auto;
    /* Am Listenende soll nicht die Seite dahinter weiterlaufen */
    overscroll-behavior: contain;
  }
}

.hauptnav__liste { list-style: none; margin: 0; padding: 0; }

.hauptnav__link {
  display: block;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinte); text-decoration: none;
  padding: 10px 8px;
}
.hauptnav__link:hover, .hauptnav__link:focus-visible { color: var(--reflex); }
.hauptnav__link[aria-current] { color: var(--reflex); }
.hauptnav__link[aria-current]::after {
  content: ''; display: block; height: 2px; background: var(--reflex);
  margin-top: 4px;
}

.hauptnav__unter { list-style: none; margin: 0 0 var(--s2); padding: 0 0 0 8px; }
.hauptnav__unter a {
  display: block; padding: 7px 0;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 500;
  color: var(--grau); text-decoration: none;
}
.hauptnav__unter a:hover, .hauptnav__unter a:focus-visible { color: var(--reflex); }
.hauptnav__unter a[aria-current] { color: var(--reflex); font-weight: 600; }

@media (min-width: 1180px) {
  .hauptnav > summary { display: none; }
  .hauptnav::details-content { content-visibility: visible; display: contents; }
  .hauptnav__panel {
    position: static; width: auto; background: none;
    border: 0; padding: 0; box-shadow: none; display: block;
  }
  .hauptnav__liste { display: flex; align-items: center; gap: 4px; }
  .hauptnav__punkt { position: relative; }
  .hauptnav__link { padding: 10px 12px; white-space: nowrap; }

  .hauptnav__unter {
    position: absolute; left: 0; top: 100%;
    min-width: 270px; margin: 0;
    background: var(--weiss); border: var(--linie);
    padding: var(--s1) 0;
    box-shadow: 0 12px 40px rgb(26 28 27 / 0.12);
    opacity: 0; visibility: hidden;
    transition: opacity 120ms ease;
  }
  .hauptnav__punkt:hover .hauptnav__unter,
  .hauptnav__punkt:focus-within .hauptnav__unter { opacity: 1; visibility: visible; }
  .hauptnav__unter a { padding: 8px 16px; }
}

/* 8 — Footer -------------------------------------------------------------- */

.fuss {
  background: var(--tinte); color: var(--grau-hell);
  padding-block: var(--s5) var(--s4);
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein);
}
.fuss h2 {
  font-size: var(--fs-eyebrow); font-stretch: 100%;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--weiss); margin-bottom: var(--s2);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: var(--grau-hell); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: var(--weiss); text-decoration: underline; }

.fuss__raster { display: grid; gap: var(--s4); }
@media (min-width: 600px)  { .fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fuss__raster { grid-template-columns: repeat(4, 1fr); } }

.fuss__marke { margin-bottom: var(--s5); }
.fuss__marke img { height: 30px; width: auto; }

.fuss__recht {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  align-items: baseline; justify-content: space-between;
}
.fuss__recht ul { display: flex; flex-wrap: wrap; gap: var(--s3); }
.fuss__recht li { margin: 0; }

/* 9 — Komponenten --------------------------------------------------------- */

/* Buttons */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 24px; min-height: 48px;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.knopf--primaer { background: var(--reflex); color: #fff; }
.knopf--primaer:hover, .knopf--primaer:focus-visible { background: var(--reflex-hell); color: #fff; }
.knopf--sekundaer { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf--sekundaer:hover, .knopf--sekundaer:focus-visible { border-color: var(--reflex); color: var(--reflex); }
.knopf--hell { background: #fff; color: var(--reflex); border-color: #fff; }
.knopf--hell:hover, .knopf--hell:focus-visible {
  background: var(--papier); color: var(--reflex); border-color: var(--papier);
}

/* Schaltflächen einer Reihe sind gleich breit, sonst wirkt die Gruppe
   unruhig. Gestapelt richtet sich die Breite nach der längsten Beschriftung,
   nebeneinander teilen sich alle die Breite gleichmäßig. Das Raster schrumpft
   dabei auf seinen Inhalt, statt die volle Spalte einzunehmen. */
.knopfreihe {
  display: grid; gap: var(--s2); margin-top: var(--s4);
  justify-content: start; justify-items: stretch;
}
@media (min-width: 560px) {
  .knopfreihe {
    grid-auto-flow: column; grid-auto-columns: 1fr;
    width: fit-content;
  }
}

/* Pfeillink */
.pfeil {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
  text-decoration: none; color: var(--reflex);
}
.pfeil::after { content: '→'; transition: transform 120ms ease; }
.pfeil:hover::after, .pfeil:focus-visible::after { transform: translateX(3px); }

/* Hero */
.hero { padding-block: var(--s5); }
@media (min-width: 900px) { .hero { padding-block: var(--s6); } }
.hero h1 { margin-bottom: var(--s4); max-width: 22ch; }
.hero .lead { color: var(--grau); }
.hero__unten { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) {
  .hero__unten { grid-template-columns: 6fr 5fr; gap: var(--s5); }
}

/* Ohne Bildspalte (Foto noch nicht vorhanden) einspaltig */
@media (min-width: 900px) {
  .hero__unten:not(:has(> :nth-child(2))),
  .split:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
}

/* Kennzahlenband */
/* Als Container, damit die Zahl nie breiter als ihre Spalte wird */
.kennzahl { min-width: 0; container-type: inline-size; }
.kennzahlen {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--rinne);
}
@media (min-width: 900px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }

.kennzahl__wert {
  display: block;
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: min(var(--fs-zahl), 28cqi); line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kennzahl__label {
  display: block; margin-top: var(--s2);
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); color: var(--grau);
  max-width: 16em;
}
.kennzahl__wert .tbd { vertical-align: 0.9em; }

/* Kategoriekarte */
.karte {
  display: flex; flex-direction: column;
  padding: var(--s3);
  background: var(--weiss);
  border: var(--linie); border-top: 4px solid var(--reflex);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color 120ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.karte:nth-child(6n + 1) { border-top-color: var(--cyan); }
.karte:nth-child(6n + 2) { border-top-color: var(--magenta); }
.karte:nth-child(6n + 3) { border-top-color: var(--gelb); }
.karte:nth-child(6n + 4) { border-top-color: var(--reflex); }
.karte:nth-child(6n + 5) { border-top-color: var(--orange); }
.karte:nth-child(6n + 6) { border-top-color: var(--violett); }
.karte:hover, .karte:focus-within { border-color: var(--reflex); }
.karte h3 { margin-bottom: var(--s2); }
.karte p { color: var(--grau); font-size: var(--fs-klein); font-family: var(--ff-utility); font-stretch: 100%; }
.karte .pfeil { margin-top: auto; padding-top: var(--s3); }
.karte__nummer {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-eyebrow); font-weight: 600;
  color: var(--grau); letter-spacing: 0.12em;
  margin-bottom: var(--s2);
}

/* grid-auto-rows: 1fr gibt allen Karten dieselbe Höhe, nicht nur denen einer
   Zeile. Ohne das war die zweite Zeile niedriger als die erste, und gestapelt
   auf dem Telefon hatte jede Karte ein anderes Maß. */
.karten { display: grid; gap: var(--rinne); grid-auto-rows: 1fr; }
@media (min-width: 640px)  { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .karten--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .karten--4 { grid-template-columns: repeat(4, 1fr); } }

/* Bereichskachel */
.bereiche { display: grid; gap: var(--rinne); grid-auto-rows: 1fr; }
@media (min-width: 600px)  { .bereiche { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bereiche { grid-template-columns: repeat(3, 1fr); } }

.kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--weiss);
  border: var(--linie); border-left: 4px solid var(--kf, var(--grau-hell));
  padding: var(--s3);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.kachel:hover, .kachel:focus-visible { background: var(--papier-tief); }
.kachel h3 { font-size: var(--fs-body); font-stretch: 100%; margin-bottom: var(--s1); }
.kachel p { font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-klein); color: var(--grau); margin: 0; }

/* Statustabelle */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; white-space: nowrap;
}
.status::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--reflex);
}
.status--partner { color: var(--grau); font-weight: 500; }
.status--partner::before { background: transparent; border: 1.5px solid var(--grau); }

/* Logowand */
.logowand {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s5);
  align-items: center;
}
@media (min-width: 768px)  { .logowand { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logowand { grid-template-columns: repeat(4, 1fr); } }

.logowand__feld {
  display: flex; align-items: center; justify-content: center;
  height: 64px;
}
/* Optische Normalisierung: die Höhe je Marke steht als --logo-hoehe im Markup
   und stammt aus der gemessenen Farbdeckung, nicht aus dem Seitenverhältnis. */
.logowand__feld img {
  max-height: var(--logo-hoehe, 100%); width: auto; max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.8) contrast(1.15);
  opacity: 0.9;
  transition: opacity 120ms ease, filter 120ms ease;
}
.logowand__feld:hover img { opacity: 1; filter: grayscale(0); }
/* Feine oder blasse Logos verschwinden bei 70 % Deckkraft */
.logowand__feld--zart img { opacity: 1; filter: grayscale(1) brightness(0.75) contrast(1.25); }
.logowand__feld--zart:hover img { opacity: 1; filter: grayscale(0); }
.logowand__feld--hell img { filter: grayscale(1) brightness(0.5); }
.logowand__feld--hell:hover img { filter: grayscale(0) brightness(1); }

/* Fallbeispiel */
.fallbeispiel {
  background: var(--papier-tief);
  padding: var(--s4);
  border-radius: var(--radius);
}
@media (min-width: 900px) { .fallbeispiel { padding: var(--s5); } }
.fallbeispiel dl { display: grid; gap: var(--s3); margin: var(--s4) 0 0; }
@media (min-width: 800px) { .fallbeispiel dl { grid-template-columns: repeat(3, 1fr); } }
.fallbeispiel dt {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grau); margin-bottom: var(--s1);
}
.fallbeispiel dd { margin: 0; }

/* Problemspalte */
.problem { border-left: 3px solid var(--grau-hell); padding-left: var(--s3); }
.problem--cyan { border-left-color: var(--cyan); }
.problem--magenta { border-left-color: var(--magenta); }
.problem--gelb { border-left-color: var(--gelb); }
.problem--orange { border-left-color: var(--orange); }
.problem h3 { margin-bottom: var(--s2); }
.problem p { color: var(--grau); }

/* Vier Verfahren */
.verfahren-raster { display: grid; gap: var(--rinne); }
@media (min-width: 700px) { .verfahren-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verfahren-raster { grid-template-columns: repeat(3, 1fr); } }

/* Kompakter Handlungsimpuls zwischen längeren Inhaltsblöcken */
.zwischen-cta {
  position: relative;
  background: var(--reflex);
  color: #fff;
  border-block: 8px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan) 0 33%, var(--gelb) 33% 66%, var(--magenta) 66%) 1;
}
.zwischen-cta__innen {
  display: grid; gap: var(--s3); align-items: center;
  padding-block: var(--s4);
}
.zwischen-cta h2 { font-size: var(--fs-h3); margin-bottom: var(--s1); }
.zwischen-cta p { color: rgb(255 255 255 / 0.82); margin: 0; max-width: 42rem; }
.zwischen-cta .eyebrow { color: rgb(255 255 255 / 0.72); margin-bottom: var(--s1); }
@media (min-width: 760px) {
  .zwischen-cta__innen { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Branchenfakten und belegbare Nachweise */
.fakten {
  list-style: none; padding: 0; margin: 0 0 var(--s4);
  display: grid; gap: var(--rinne);
}
@media (min-width: 640px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fakten { grid-template-columns: repeat(4, 1fr); } }
.fakten li {
  background: var(--weiss); border: var(--linie); border-top: 4px solid var(--cyan);
  padding: var(--s3); min-width: 0;
}
.fakten li:nth-child(3n + 2) { border-top-color: var(--gelb); }
.fakten li:nth-child(3n) { border-top-color: var(--magenta); }
.fakt__nummer {
  display: block; margin-bottom: var(--s2);
  font-family: var(--ff-utility); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; color: var(--grau);
}
.fakten h3 { font-size: var(--fs-body); font-stretch: 100%; }
.fakten p { margin: 0; color: var(--grau); font-size: var(--fs-klein); }
.nachweise-raster { display: grid; gap: var(--rinne); }
@media (min-width: 760px) { .nachweise-raster { grid-template-columns: repeat(3, 1fr); } }
.nachweise-raster > div { background: var(--weiss); padding: var(--s3); border: var(--linie); }

/* Fristenkasten */
.frist {
  border-left: 3px solid var(--reflex);
  background: var(--weiss);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  margin: var(--s4) 0;
  max-width: 38em;
}
.frist .eyebrow { color: var(--reflex); }

.hinweis {
  border: var(--linie);
  background: var(--papier-tief);
  padding: var(--s3);
  margin: var(--s4) 0;
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein);
  color: var(--grau);
  max-width: 42em;
}

/* Marginalie */
.artikel { display: grid; gap: var(--s4); }
@media (min-width: 1024px) {
  .artikel {
    grid-template-columns: 200px minmax(0, 1fr) 190px;
    gap: var(--s4);
  }
  .artikel__inhalt { grid-column: 2; grid-row: 1; }
  .artikel__toc {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 120px; align-self: start;
  }
  .artikel__rand { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1240px) {
  .artikel { gap: var(--s5); }
}
.artikel__toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.artikel__toc li { margin-bottom: 8px; }
.artikel__toc a {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); color: var(--grau); text-decoration: none;
}
.artikel__toc a:hover { color: var(--reflex); }
.artikel__toc h2 {
  font-size: var(--fs-eyebrow); font-stretch: 100%;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grau); margin-bottom: var(--s2);
}

.marginalie {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); line-height: 1.5; color: var(--grau);
  border-top: 2px solid var(--tinte);
  padding-top: var(--s2); margin-bottom: var(--s4);
}
.marginalie strong { color: var(--tinte); display: block; margin-bottom: 4px; }

.artikel__inhalt h2 { margin-top: var(--s5); }
.artikel__inhalt h2:first-child { margin-top: 0; }
.artikel__inhalt h3 { margin-top: var(--s4); }

/* Bild und Platzhalter */
figure { margin: 0 0 var(--s3); }
figcaption {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); color: var(--grau);
  margin-top: var(--s1); text-align: left;
}

.platzhalter {
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief);
  border: 1px dashed var(--grau-hell);
  aspect-ratio: 4 / 3;
  padding: var(--s3); text-align: center;
}
.platzhalter--breit { aspect-ratio: 16 / 9; }
.platzhalter--portraet { aspect-ratio: 3 / 4; }

.foto {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--papier-tief);
}
.foto--breit { aspect-ratio: 16 / 9; }
.foto--portraet { aspect-ratio: 3 / 4; }

/* Ansprechpartner */
.personen { display: grid; gap: var(--rinne); grid-auto-rows: 1fr; }
@media (min-width: 600px)  { .personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .personen { grid-template-columns: repeat(3, 1fr); } }
.personen + .personen { margin-top: var(--rinne); }

.person { background: var(--weiss); border: var(--linie); }
.person__text { padding: var(--s3); }
.person__name { font-family: var(--ff-display); font-stretch: 125%; font-weight: 600; font-size: var(--fs-h3); margin: 0 0 4px; line-height: 1.1; }
.person__rolle { font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-klein); color: var(--grau); margin: 0 0 var(--s2); }
.person__kontakt { list-style: none; padding: 0; margin: 0; font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-klein); }
.person__kontakt li { margin-bottom: 4px; }
.person__kontakt a { text-decoration: none; }
.person__kontakt a:hover { text-decoration: underline; }

/* Zeitleiste */
.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste > li {
  display: grid; gap: 4px var(--s4);
  padding: var(--s3) 0;
  border-top: var(--linie);
}
@media (min-width: 700px) {
  .zeitleiste > li { grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; }
}
.zeitleiste > li:last-child { border-bottom: var(--linie); }
.zeitleiste__jahr {
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: var(--fs-h3); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.zeitleiste__titel { font-weight: 600; display: block; }
.zeitleiste > li.is-betont { background: var(--papier-tief); padding-inline: var(--s3); margin-inline: calc(-1 * var(--s3)); }

/* Kontaktblock */
.kontaktblock {
  background: var(--weiss); border: var(--linie);
  padding: var(--s4);
}
@media (min-width: 900px) { .kontaktblock { padding: var(--s5); } }

.kontaktdaten { list-style: none; padding: 0; margin: 0; font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-body); }
.kontaktdaten li { margin-bottom: var(--s2); }
.kontaktdaten a { text-decoration: none; }
.kontaktdaten a:hover { text-decoration: underline; }
.kontaktdaten .klein { display: block; }

/* Teaser für Wissensartikel */
.teaser {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--tinte);
  padding-top: var(--s2);
  text-decoration: none; color: inherit;
}
.teaser h3 { font-size: var(--fs-h3); margin: var(--s2) 0; }
.teaser p { color: var(--grau); font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-klein); }
.teaser .pfeil { margin-top: auto; padding-top: var(--s3); }
.teaser:hover h3 { color: var(--reflex); }
.teaser:hover .pfeil::after { transform: translateX(3px); }

/* Brotkrumen */
.krumen {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-eyebrow); color: var(--grau);
  padding-top: var(--s3);
}
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.krumen li::after { content: '/'; margin-left: 8px; color: var(--grau-hell); }
.krumen li:last-child::after { content: none; }
.krumen a { color: var(--grau); text-decoration: none; }
.krumen a:hover { color: var(--reflex); }

/* Platzhalter für fehlende Fakten */
.tbd {
  background: #FFF3B0;
  border: 1px solid #C81E1E;
  color: #7A1010;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 0.1em 0.4em;
}
/* In Schaugrößen würde der Platzhalter die Überschrift verschlucken. Er soll
   auffallen, aber nicht das Satzbild der fertigen Seite vortäuschen. */
h1 .tbd, h2 .tbd, h3 .tbd, .kennzahl__wert .tbd {
  display: inline-block;
  font-size: 0.95rem; font-stretch: 100%; font-weight: 400;
  letter-spacing: 0; line-height: 1.4;
}

/* 10 — Formulare ---------------------------------------------------------- */

.formular { display: grid; gap: var(--s3); max-width: 44em; }
.formular__reihe { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .formular__reihe--2 { grid-template-columns: repeat(2, 1fr); } }

/* align-content: start ist hier entscheidend. Nebeneinander liegende Felder
   sind gleich hoch, weil das Raster sie streckt. Ohne diese Zeile verteilt
   das Feld die überschüssige Höhe auf seine Zeilen, und ein Feld ohne
   Hinweistext schiebt seine Eingabe nach unten, weg von der Nachbarzeile. */
.feld { display: grid; gap: 6px; align-content: start; }
.feld > label, .feldgruppe > legend {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); font-weight: 600;
}
.feld__hinweis { font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-eyebrow); color: var(--grau); }

input[type='text'], input[type='email'], input[type='tel'], select, textarea {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-body);
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--grau);
  border-radius: var(--radius);
  padding: 0 14px;
  height: 48px;
  width: 100%;
}
textarea { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { border-color: var(--reflex); }

.feldgruppe { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.feldgruppe > legend { padding: 0; margin-bottom: 2px; }
/* Kästchen und Beschriftung bilden zusammen die Trefferfläche, weil das label
   mitschaltet. Sie bleibt mit 26 px über den geforderten 24 px, damit sie
   nicht an Rundungen der Zeilenhöhe scheitert. */
.wahl { display: flex; align-items: flex-start; gap: 10px; min-height: 26px;
  font-family: var(--ff-utility); font-stretch: 100%; font-size: var(--fs-klein); }
.wahl input { margin: 3px 0 0; accent-color: var(--reflex); width: 20px; height: 20px; flex: none; }
.wahl label { line-height: 1.5; padding-block: 3px; min-height: 26px; }
.wahlraster { display: grid; gap: 14px; }
@media (min-width: 600px) { .wahlraster { grid-template-columns: repeat(2, 1fr); } }

.fehler {
  font-family: var(--ff-utility); font-stretch: 100%;
  font-size: var(--fs-klein); color: #A81010;
}

.formular__fuss { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* 11 — Bewegung ----------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-sichtbar {
  opacity: 1; transform: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

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

/* 12 — Druck -------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .kontrollstreifen, .knopfreihe, .zwischen-cta, .artikel__toc { display: none; }
  body { background: #fff; font-size: 11pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* Umweltkriterien mit Piktogrammen (Nachhaltigkeit) */
.kriterien {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--rinne);
}
@media (min-width: 600px)  { .kriterien { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kriterien { grid-template-columns: repeat(3, 1fr); } }
.kriterium { background: var(--weiss); border: var(--linie); padding: var(--s3); }
.kriterium__icon { width: 44px; height: 44px; color: var(--reflex); margin-bottom: var(--s2); }
.kriterium h3 { margin-bottom: var(--s1); }
.kriterium p { margin: 0; color: var(--grau); }

.nachweis-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
}
.nachweis-logos img { height: 80px; width: auto; }

/* Aufzählung in zwei Spalten (Lösungsseiten: Was wir für Sie umsetzen) */
@media (min-width: 700px) { .liste--spalten { columns: 2; column-gap: var(--s5); } }
.liste--spalten > li { break-inside: avoid; }

/* Drei Schritte auf der Nachhaltigkeitsseite: vermeiden, schonen, ausgleichen */
.schritt { position: relative; border-left: 3px solid var(--kennfarbe); padding-left: var(--s4); }
.schritt + .schritt { margin-top: var(--s5); }
.schritt__titel { margin-bottom: var(--s1); }
.schritt__satz { color: var(--grau); margin-bottom: var(--s3); }
.kriterium h4 { margin: 0 0 var(--s1); }

/* Fenster über der Seite (z. B. Datenschutzerklärung aus dem Formular) */
.fenster {
  width: min(760px, calc(100vw - 2 * var(--s3)));
  max-height: min(85vh, 900px);
  padding: 0; border: var(--linie);
  background: var(--papier); color: var(--tinte);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.25);
  display: none; flex-direction: column;
}
.fenster[open] { display: flex; }
.fenster::backdrop { background: rgb(26 28 27 / 0.55); }
.fenster__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: var(--linie); background: var(--weiss);
}
.fenster__titel { margin: 0; font-size: var(--fs-h3); }
.fenster__zu {
  width: 44px; height: 44px; flex: none;
  border: var(--linie); background: var(--weiss); color: var(--tinte);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.fenster__zu:hover, .fenster__zu:focus-visible { color: var(--reflex); border-color: var(--reflex); }
.fenster__inhalt { overflow-y: auto; padding: var(--s4); overscroll-behavior: contain; }
.fenster__inhalt h2 { font-size: var(--fs-h3); margin-top: var(--s4); }
.fenster__inhalt > :first-child { margin-top: 0; }
.fenster__fuss { padding: var(--s3) var(--s4); border-top: var(--linie); background: var(--weiss); text-align: right; }
html:has(.fenster[open]) { overflow: hidden; }

/* Häufige Fragen: details/summary, ohne JavaScript bedienbar */
.faq { max-width: 52rem; border-top: var(--linie); }
.faq__eintrag { border-bottom: var(--linie); }
.faq__eintrag > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) 0;
  font-family: var(--ff-utility); font-weight: 600; font-size: var(--fs-body);
}
.faq__eintrag > summary::-webkit-details-marker { display: none; }
.faq__eintrag > summary::after {
  content: '+'; flex: none;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: var(--linie); border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--reflex);
  transition: transform 160ms ease;
}
.faq__eintrag[open] > summary::after { transform: rotate(45deg); }
.faq__eintrag > summary:hover, .faq__eintrag > summary:focus-visible { color: var(--reflex); }
.faq__antwort { padding: 0 0 var(--s3); color: var(--grau); max-width: 46rem; }

/* Hover für alle Karten: leicht anheben, dezenter Schatten */
.karte, .kachel, .kriterium, .person, .nachweise-raster > div, .frist, .problem {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 120ms ease, background-color 120ms ease;
}
.karte:hover, .kachel:hover, .kriterium:hover, .person:hover,
.nachweise-raster > div:hover, .frist:hover,
.karte:focus-within, .kachel:focus-visible, .person:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgb(26 28 27 / 0.08);
}
.kriterium:hover, .person:hover, .nachweise-raster > div:hover { border-color: var(--reflex); }
/* Karten ohne Rahmen (farbige Linie links): leicht anheben, Linie kräftiger */
.problem:hover { transform: translateY(-3px); border-left-width: 5px; }

/* Kontaktdaten nebeneinander (Kontaktseite, unter den Ansprechpartnern) */
.kontaktdaten--raster { display: grid; gap: var(--s3) var(--s5); }
@media (min-width: 700px)  { .kontaktdaten--raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kontaktdaten--raster { grid-template-columns: repeat(3, 1fr); } }
.kontaktdaten--raster li { margin-bottom: 0; }

/* Kennfarbe der Bereiche als Akzent (z. B. Nachhaltigkeit in Grün) */
.schritt__nummer {
  display: block; line-height: 0.9; margin-bottom: var(--s2);
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: transparent; -webkit-text-stroke: 2px var(--kennfarbe);
  font-variant-numeric: tabular-nums;
}
.schritt__titel { color: var(--kennfarbe); }
.kriterium__icon { color: var(--kennfarbe); }
.kriterium:hover { border-color: var(--kennfarbe); }
.problem--kenn { border-left-color: var(--kennfarbe); }

.kennzahl-gross {
  display: flex; flex-direction: column;
  padding: var(--s4); border-left: 6px solid var(--kennfarbe);
  background: color-mix(in srgb, var(--kennfarbe) 8%, var(--weiss));
}
.kennzahl-gross__vor {
  font-family: var(--ff-utility); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: var(--fs-eyebrow); color: var(--kennfarbe);
}
.kennzahl-gross__wert {
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(5rem, 3.5rem + 7vw, 9.5rem); line-height: 0.95;
  color: var(--kennfarbe); letter-spacing: -0.02em;
}
.kennzahl-gross__einheit { font-size: 0.5em; margin-left: 0.08em; vertical-align: 0.6em; }
.kennzahl-gross__text { margin-top: var(--s2); font-size: var(--fs-lead); line-height: 1.35; max-width: 18em; }

.abschnitt--band {
  background: color-mix(in srgb, var(--kennfarbe) 12%, var(--papier));
  border-block: 1px solid color-mix(in srgb, var(--kennfarbe) 30%, var(--papier));
}
.abschnitt--band .frist { border-left-color: var(--kennfarbe); }
.abschnitt--band .frist .eyebrow { color: var(--kennfarbe); }

.fakten--kennfarbe li, .fakten--kennfarbe li:nth-child(n) { border-top-color: var(--kennfarbe); }
.fakten--kennfarbe .fakt__nummer {
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: 2.6rem; letter-spacing: 0; line-height: 1;
  color: var(--kennfarbe);
}

/* 13 — Redesign "Druckbogen" ---------------------------------------------- */
/* Premium-B2B ohne Fotos: Druckfarben, Raster und Passermarken als Bildsprache.
   Diese Schicht überschreibt die Abschnitte 1 bis 12 gezielt. Texte und
   Seitenstruktur bleiben unverändert. Alle Bewegungen entfallen bei
   prefers-reduced-motion (siehe Ende dieser Schicht). */

:root {
  --papier:      #F4F3F0;
  --papier-tief: #EAE8E3;
  --weiss:       #FFFFFF;
  --tinte:       #111312;
  --nacht:       #0D0F12;
  --nacht-2:     #161A20;
  --grau:        #5E605B;
  --grau-hell:   #D6D4CF;
  --linie:       1px solid rgb(17 19 18 / 0.10);
  --radius:      14px;
  --radius-s:    10px;
  --schatten:    0 1px 2px rgb(17 19 18 / 0.04), 0 8px 24px rgb(17 19 18 / 0.06);
  --schatten-hoch: 0 2px 4px rgb(17 19 18 / 0.05), 0 24px 48px rgb(17 19 18 / 0.12);
  --ease: cubic-bezier(.22, .8, .26, 1);
  --cmyk: linear-gradient(90deg, var(--cyan), var(--magenta) 50%, var(--gelb));

  --fs-h1: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.55rem);
  --fs-lead: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
}

/* Typografie: größer, enger, selbstbewusster */
h1, h2 { font-weight: 640; letter-spacing: -0.035em; line-height: 0.98; }
h1 { font-stretch: 118%; }
h2 { font-stretch: 112%; }
h3 { letter-spacing: -0.015em; }
.lead { color: var(--grau); }

.eyebrow { letter-spacing: 0.16em; color: var(--tinte); opacity: 0.8; }
.eyebrow--kennfarbe { opacity: 1; }
.eyebrow--kennfarbe::before {
  width: 26px; height: 6px; border-radius: 3px;
  background: var(--kennfarbe);
}
body:not([style*="--kennfarbe"]) .eyebrow--kennfarbe::before { background: var(--cmyk); }

/* Kopfzeile: Glas, Fortschrittslinie in Druckfarben */
.kopf {
  background: rgb(244 243 240 / 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.kopf.is-geschrumpft { box-shadow: 0 1px 0 rgb(17 19 18 / 0.08); border-bottom-color: transparent; }
.kopf__fortschritt {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--cmyk);
  transform: scaleX(var(--fortschritt, 0)); transform-origin: left;
  pointer-events: none;
}
.hauptnav__link { position: relative; letter-spacing: 0.1em; }
@media (min-width: 1180px) {
  .hauptnav__link::before {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px;
    background: var(--cmyk); transform: scaleX(0); transform-origin: left;
    transition: transform 280ms var(--ease);
  }
  .hauptnav__link:hover::before, .hauptnav__link[aria-current]::before { transform: scaleX(1); }
  .hauptnav__link[aria-current]::after { display: none; }
  .hauptnav__unter {
    border-radius: var(--radius-s); border: var(--linie);
    box-shadow: var(--schatten-hoch);
    background: rgb(255 255 255 / 0.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
}
.kontrollstreifen { height: 6px; background: transparent; }
.kontrollstreifen__feld { height: 4px; }
.kontrollstreifen__feld.is-aktiv { height: 6px; }

/* Schaltflächen */
.knopf {
  border-radius: 999px; padding: 14px 26px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.knopf--primaer {
  background: linear-gradient(180deg, #2433A0, var(--reflex));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 8px 20px rgb(23 37 124 / 0.28);
}
.knopf--primaer::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.knopf--primaer:hover::after, .knopf--primaer:focus-visible::after {
  transform: translateX(120%); transition: transform 700ms var(--ease);
}
.knopf:hover, .knopf:focus-visible { transform: translateY(-2px); }
.knopf--primaer:hover, .knopf--primaer:focus-visible {
  background: linear-gradient(180deg, #2E3EB3, #1C2B90);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset, 0 14px 28px rgb(23 37 124 / 0.34);
}
.knopf--sekundaer { border-color: rgb(17 19 18 / 0.22); background: rgb(255 255 255 / 0.5); }
.knopf--sekundaer:hover, .knopf--sekundaer:focus-visible { background: var(--weiss); border-color: var(--tinte); color: var(--tinte); }
.pfeil::after { transition: transform 260ms var(--ease); }

/* Abschnitte: weichere Übergänge, Haarlinie in Druckfarben */
.abschnitt { position: relative; }
@media (min-width: 768px) { .abschnitt { padding-block: clamp(96px, 9vw, 152px); } }
.abschnitt--tief { background: var(--papier-tief); }
.abschnitt + .abschnitt::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(var(--breite), 100% - 2 * var(--rand));
  height: 1px; transform: translateX(-50%) scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, rgb(17 19 18 / 0.12), rgb(17 19 18 / 0.12) 70%, transparent);
  transition: transform 1000ms var(--ease);
}
.abschnitt--tief::before, .abschnitt--tief + .abschnitt::before,
.abschnitt--nacht::before, .abschnitt--nacht + .abschnitt::before,
.abschnitt--akzent::before, .abschnitt--akzent + .abschnitt::before,
.abschnitt--band::before, .abschnitt--band + .abschnitt::before { display: none; }
.abschnitt.is-sichtbar::before { transform: translateX(-50%) scaleX(1); }

/* Dunkles Band (Kennzahlen der Startseite) */
.abschnitt--nacht {
  background:
    radial-gradient(60% 120% at 100% 0%, rgb(0 160 226 / 0.18), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgb(204 5 64 / 0.16), transparent 60%),
    var(--nacht);
  color: #F5F5F2;
  overflow: hidden;
}
.abschnitt--nacht .kennzahl__wert {
  background: linear-gradient(180deg, #FFFFFF 30%, #B9C1CC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.abschnitt--nacht .kennzahl { border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: var(--s3); }
.abschnitt--nacht .kennzahl__label { color: rgb(255 255 255 / 0.64); }
.abschnitt--nacht .kennzahlen { gap: var(--s4) var(--s4); }

/* Blaues Akzentband (Startseite Nachhaltigkeit) mit Farbschleier */
.abschnitt--akzent {
  background:
    radial-gradient(55% 140% at 100% 0%, rgb(0 160 226 / 0.35), transparent 60%),
    radial-gradient(40% 120% at 85% 100%, rgb(254 169 1 / 0.18), transparent 60%),
    linear-gradient(135deg, #131F6E, var(--reflex) 55%, #1E2E98);
  overflow: hidden;
}

/* Zwischenaufruf: dunkel mit Farbverlauf statt Vollfläche */
.zwischen-cta {
  background:
    radial-gradient(40% 160% at 90% 50%, rgb(204 5 64 / 0.28), transparent 70%),
    radial-gradient(40% 160% at 60% 50%, rgb(0 160 226 / 0.22), transparent 70%),
    var(--nacht);
  border: 0;
}
.zwischen-cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--cmyk);
}
.zwischen-cta h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
.zwischen-cta__innen { padding-block: var(--s5); }

/* Kopfbereich aller Seiten: Farbwolke, Raster, Passermarken */
.hero { position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 900px) { .hero { padding-block: clamp(96px, 10vw, 168px); } }
.hero::before {
  content: ''; position: absolute; z-index: -2;
  width: min(70vw, 900px); aspect-ratio: 1; right: -18%; top: -38%;
  background:
    radial-gradient(closest-side at 35% 40%, color-mix(in srgb, var(--hero-1, var(--cyan)) 70%, transparent), transparent),
    radial-gradient(closest-side at 65% 45%, color-mix(in srgb, var(--hero-2, var(--magenta)) 55%, transparent), transparent),
    radial-gradient(closest-side at 50% 70%, color-mix(in srgb, var(--hero-3, var(--gelb)) 60%, transparent), transparent);
  filter: blur(40px) saturate(1.1);
  opacity: 0.32;
  animation: farbwolke 22s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgb(17 19 18 / 0.16) 1px, transparent 1.3px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(60% 70% at 85% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(60% 70% at 85% 10%, #000 0%, transparent 70%);
  opacity: 0.55;
}
body[style*="--kennfarbe"] .hero { --hero-1: var(--kennfarbe); --hero-2: var(--kennfarbe); --hero-3: var(--cyan); }
@keyframes farbwolke {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-4%, 6%, 0) rotate(18deg) scale(1.06); }
  100% { transform: translate3d(3%, -3%, 0) rotate(-12deg) scale(0.98); }
}
.hero > .wrap { position: relative; }
.hero h1 { max-width: 16ch; margin-bottom: var(--s5); }
.hero .lead { max-width: 34em; }

/* Elegante Einblendung beim Laden */
.js .hero .eyebrow, .js .hero h1, .js .hero .lead, .js .hero .knopfreihe,
.js .hero .kontaktdaten, .js .hero__unten > div:nth-child(2) {
  animation: einblenden 1000ms var(--ease) both;
}
.js .hero h1 { animation-delay: 80ms; }
.js .hero .lead { animation-delay: 240ms; }
.js .hero .knopfreihe, .js .hero .kontaktdaten { animation-delay: 360ms; }
.js .hero__unten > div:nth-child(2) { animation-delay: 300ms; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Startseite: großer Auftritt */
.hero--start { min-height: min(92vh, 980px); display: flex; align-items: center; }
.hero--start > .wrap { width: 100%; }
.hero--start h1 { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.6rem); max-width: 13ch; }
.hero--start::before { opacity: 0.38; width: min(85vw, 1100px); right: -26%; top: -30%; }
@media (min-width: 900px) {
  .hero--start .hero__unten { grid-template-columns: 5fr 6fr; align-items: center; }
}

/* Druckbogen (Motiv der Startseite) */
.druckbogen { perspective: 1400px; padding: 4% 2% 8%; }
.druckbogen__bogen {
  position: relative; aspect-ratio: 4 / 5; max-width: 520px; margin-inline: auto;
  background: #FFFFFF; border-radius: 6px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 30px 60px -10px rgb(17 19 18 / 0.25), 0 18px 36px -18px rgb(17 19 18 / 0.3);
  transform: rotateX(calc(8deg + var(--neig-y, 0deg))) rotateY(calc(-14deg + var(--neig-x, 0deg))) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease);
  padding: 9%;
}
.druckbogen__motiv {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 2px; background: #FBFBFA;
}
.druckbogen__farbe {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  mix-blend-mode: multiply; filter: blur(2px);
  animation: farbe-c 16s ease-in-out infinite alternate;
}
.druckbogen__farbe--c { background: radial-gradient(circle at 40% 40%, #18B4F0, var(--cyan) 60%); left: -6%; top: 6%; }
.druckbogen__farbe--m { background: radial-gradient(circle at 40% 40%, #E2306A, var(--magenta) 60%); right: -8%; top: 22%; animation-name: farbe-m; animation-duration: 19s; }
.druckbogen__farbe--y { background: radial-gradient(circle at 40% 40%, #FFC23A, var(--gelb) 60%); left: 14%; bottom: -10%; animation-name: farbe-y; animation-duration: 21s; }
.druckbogen__farbe--k {
  width: 34%; background: #1B1D1C; right: 10%; bottom: 8%; opacity: 0.92;
  border-radius: 4px; animation-name: farbe-k; animation-duration: 24s;
}
@keyframes farbe-c { to { transform: translate(14%, 10%) scale(1.08); } }
@keyframes farbe-m { to { transform: translate(-16%, 8%) scale(0.94); } }
@keyframes farbe-y { to { transform: translate(10%, -14%) scale(1.1); } }
@keyframes farbe-k { to { transform: translate(-30%, -40%) rotate(45deg); } }
.druckbogen__raster {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #FBFBFA 38%, transparent 42%);
  background-size: 9px 9px;
  mix-blend-mode: screen; opacity: 0.55;
}
.druckbogen__passer {
  position: absolute; width: 22px; height: 22px; opacity: 0.7;
  background:
    linear-gradient(#111312, #111312) center / 1px 100% no-repeat,
    linear-gradient(#111312, #111312) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 5px, #111312 5.5px, #111312 6.5px, transparent 7px);
}
.druckbogen__passer--ol { left: 2.5%; top: 2.5%; }
.druckbogen__passer--or { right: 2.5%; top: 2.5%; }
.druckbogen__passer--ul { left: 2.5%; bottom: 5%; }
.druckbogen__passer--ur { right: 2.5%; bottom: 5%; }
.druckbogen__streifen {
  position: absolute; left: 9%; right: 9%; bottom: 3%; height: 8px;
  background: linear-gradient(90deg,
    var(--cyan) 0 12.5%, var(--magenta) 0 25%, var(--gelb) 0 37.5%, #111312 0 50%,
    color-mix(in srgb, var(--cyan) 50%, #fff) 0 62.5%, color-mix(in srgb, var(--magenta) 50%, #fff) 0 75%,
    color-mix(in srgb, var(--gelb) 50%, #fff) 0 87.5%, #8A8C88 0);
}

/* Lagerraster (Startseite, Lager und Abruf) */
.lagerraster {
  display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 8px;
  padding: clamp(20px, 3vw, 36px); border-radius: var(--radius);
  background: var(--weiss); border: var(--linie); box-shadow: var(--schatten);
}
.lagerraster__platz {
  aspect-ratio: 1; border-radius: 4px;
  background: var(--papier-tief);
  position: relative; overflow: hidden;
}
.lagerraster__platz::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--f); transform: scaleY(0); transform-origin: bottom;
}
.lagerraster__platz--c { --f: var(--cyan); }
.lagerraster__platz--m { --f: var(--magenta); }
.lagerraster__platz--y { --f: var(--gelb); }
.lagerraster__platz--k { --f: #2B2E2D; }
.is-sichtbar .lagerraster__platz::after {
  animation: einlagern 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes einlagern {
  0%   { transform: scaleY(0); }
  18%  { transform: scaleY(1); }
  70%  { transform: scaleY(1); opacity: 1; }
  85%  { transform: scaleY(1); opacity: 0.15; }
  100% { transform: scaleY(1); opacity: 1; }
}
.js .lagerraster__platz::after { transform: scaleY(0); }
html:not(.js) .lagerraster__platz::after { transform: scaleY(1); }

/* Karten: weich, hell, mit Lichtschein unter der Maus */
.karte, .kachel, .kriterium, .person, .nachweise-raster > div, .frist,
.kontaktblock, .lagerraster, .kennzahl-gross, .fakten li {
  border-radius: var(--radius);
}
.karte, .kachel, .kriterium, .person, .nachweise-raster > div, .fakten li {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--weiss); border: var(--linie); box-shadow: var(--schatten);
}
.karte { border-top-width: 1px; }
.karte::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--k, var(--reflex));
}
.karte:nth-child(6n + 1) { --k: var(--cyan); }
.karte:nth-child(6n + 2) { --k: var(--magenta); }
.karte:nth-child(6n + 3) { --k: var(--gelb); }
.karte:nth-child(6n + 4) { --k: var(--reflex); }
.karte:nth-child(6n + 5) { --k: var(--orange); }
.karte:nth-child(6n + 6) { --k: var(--violett); }
.kachel { border-left: var(--linie); }
.kachel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--kf, var(--grau-hell));
}
.karte::after, .kachel::after, .kriterium::after, .person::after, .fakten li::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%),
              color-mix(in srgb, var(--kennfarbe) 10%, transparent), transparent 60%);
  opacity: 0; transition: opacity 300ms ease;
}
.karte:hover::after, .kachel:hover::after, .kriterium:hover::after,
.person:hover::after, .fakten li:hover::after { opacity: 1; }
.karte:hover, .kachel:hover, .kriterium:hover, .person:hover,
.nachweise-raster > div:hover, .fakten li:hover,
.karte:focus-within, .kachel:focus-visible, .person:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
  background: var(--weiss);
}
.karte, .kachel, .kriterium, .person, .nachweise-raster > div, .fakten li, .problem {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
              border-color 200ms ease;
}

/* Problemspalten (ohne Kasten) mit großer Ordnungszahl */
.spalten--3 { counter-reset: problem; }
.problem { counter-increment: problem; border-left-width: 2px; padding-top: var(--s1); }
.problem::before {
  content: counter(problem, decimal-leading-zero);
  display: block; margin-bottom: var(--s2);
  font-family: var(--ff-display); font-stretch: 125%; font-weight: 700;
  font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(17 19 18 / 0.35);
}
.problem:hover { transform: translateY(-3px); border-left-width: 2px; border-left-color: var(--reflex); }
.problem:hover::before { -webkit-text-stroke-color: var(--reflex); }

/* Teaser, Logowand, Kontaktblock */
.teaser { border-top: 2px solid var(--tinte); transition: border-color 200ms ease; }
.teaser:hover { border-top-color: var(--reflex); }
.teaser h3 { transition: color 200ms ease; }
.logowand__feld img { transition: opacity 300ms ease, filter 300ms ease, transform 300ms var(--ease); }
.logowand__feld:hover img { transform: scale(1.06); }
.kontaktblock {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--weiss); border: var(--linie); box-shadow: var(--schatten);
}
.kontaktblock::before {
  content: ''; position: absolute; z-index: -1; right: -10%; top: -60%;
  width: 520px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--kennfarbe) 14%, transparent), transparent);
}

/* Häufige Fragen: weicher */
.faq__eintrag > summary::after { transition: transform 300ms var(--ease), background-color 200ms ease, color 200ms ease; }
.faq__eintrag[open] > summary::after { background: var(--reflex); color: #fff; border-color: var(--reflex); }

/* Fußzeile: tief, mit Farbverlauf als Abschluss */
.fuss {
  background:
    radial-gradient(50% 80% at 100% 0%, rgb(0 160 226 / 0.12), transparent 60%),
    var(--nacht);
  position: relative;
}
.fuss::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--cmyk);
}

/* Formulare: Felder weicher */
.feld input, .feld textarea, .feld select, .formular input[type="text"],
.formular input[type="email"], .formular input[type="tel"], .formular textarea, .formular select {
  border-radius: var(--radius-s);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.formular input:focus, .formular textarea:focus, .formular select:focus {
  box-shadow: 0 0 0 4px rgb(23 37 124 / 0.12);
}

/* Fenster (Datenschutz) passend */
.fenster { border-radius: var(--radius); overflow: hidden; }

/* Gestaffeltes Einblenden von Karten und Spalten */
.js .reveal .karte, .js .reveal .kachel, .js .reveal .kriterium, .js .reveal .person,
.js .reveal .problem, .js .reveal .fakten li, .js .reveal .teaser, .js .reveal .kennzahl,
.js .reveal .logowand__feld {
  opacity: 0; transform: translateY(18px);
}
.js .reveal.is-sichtbar .karte, .js .reveal.is-sichtbar .kachel,
.js .reveal.is-sichtbar .kriterium, .js .reveal.is-sichtbar .person,
.js .reveal.is-sichtbar .problem, .js .reveal.is-sichtbar .fakten li,
.js .reveal.is-sichtbar .teaser, .js .reveal.is-sichtbar .kennzahl,
.js .reveal.is-sichtbar .logowand__feld {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
              box-shadow 320ms var(--ease), border-color 200ms ease;
  transition-delay: calc(var(--stufe, 0) * 70ms), calc(var(--stufe, 0) * 70ms), 0ms, 0ms;
}
.js .reveal.is-sichtbar .karte:hover, .js .reveal.is-sichtbar .kachel:hover,
.js .reveal.is-sichtbar .kriterium:hover, .js .reveal.is-sichtbar .person:hover,
.js .reveal.is-sichtbar .fakten li:hover { transform: translateY(-4px); transition-delay: 0ms; }
.js .reveal.is-sichtbar .problem:hover { transform: translateY(-3px); transition-delay: 0ms; }
.js .reveal { transform: none; }
.js .reveal .abschnitt__kopf > * { opacity: 0; transform: translateY(16px); }
.js .reveal.is-sichtbar .abschnitt__kopf > * {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js .reveal.is-sichtbar .abschnitt__kopf > :nth-child(2) { transition-delay: 80ms; }
.js .reveal.is-sichtbar .abschnitt__kopf > :nth-child(3) { transition-delay: 160ms; }

/* Bewegung reduzieren: alles statisch und sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .druckbogen__farbe, .is-sichtbar .lagerraster__platz::after { animation: none !important; }
  .lagerraster__platz::after, .js .lagerraster__platz::after { transform: scaleY(1); }
  .druckbogen__bogen { transform: rotateX(8deg) rotateY(-14deg) rotateZ(2deg); }
  .js .hero .eyebrow, .js .hero h1, .js .hero .lead, .js .hero .knopfreihe,
  .js .hero .kontaktdaten, .js .hero__unten > div:nth-child(2) { animation: none; }
  .js .reveal .karte, .js .reveal .kachel, .js .reveal .kriterium, .js .reveal .person,
  .js .reveal .problem, .js .reveal .fakten li, .js .reveal .teaser, .js .reveal .kennzahl,
  .js .reveal .logowand__feld, .js .reveal .abschnitt__kopf > * { opacity: 1; transform: none; }
  .abschnitt::before { transform: translateX(-50%) scaleX(1); }
  .knopf:hover, .karte:hover, .kachel:hover, .kriterium:hover, .person:hover { transform: none; }
}

/* Druck: Effekte ausblenden */
@media print {
  .hero::before, .hero::after, .druckbogen, .lagerraster, .kopf__fortschritt { display: none; }
}

/* Startseite: Überschrift links, Druckbogen rechts daneben */
@media (min-width: 1000px) {
  .hero--start > .wrap {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(32px, 4vw, 72px); align-items: center;
  }
  .hero--start > .wrap > .eyebrow,
  .hero--start > .wrap > h1,
  .hero--start .hero__unten > div:first-child { grid-column: 1; }
  .hero--start .hero__unten { display: contents; }
  .hero--start .hero__unten > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .hero--start h1 { font-size: clamp(2.8rem, 1rem + 4.2vw, 5.6rem); max-width: 12ch; margin-bottom: var(--s4); }
}

/* Grünes Akzentband (Startseite, Verweis auf Nachhaltigkeit) */
.abschnitt--gruen {
  background:
    radial-gradient(55% 140% at 100% 0%, rgb(0 160 226 / 0.22), transparent 60%),
    radial-gradient(40% 120% at 85% 100%, rgb(254 169 1 / 0.16), transparent 60%),
    linear-gradient(135deg, #06301F, #0B5A39 55%, #00804A);
}
.abschnitt--gruen .knopf--hell { color: #0B5A39; }

/* 14 — Themenmotive statt Fotos ------------------------------------------- */
/* Je Seite ein animiertes Motiv zum Thema. Rein dekorativ, ohne Text. */

.motiv {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 1 / 1.05; display: grid; place-items: center;
  perspective: 1400px;
  --c: var(--cyan); --m: var(--magenta); --y: var(--gelb); --k: #2B2E2D;
  --papierweiss: #FFFFFF;
}
.motiv__zeile, .etikett__zeile, .visitenkarte__zeile {
  display: block; height: 6px; border-radius: 3px; width: var(--w);
  background: rgb(17 19 18 / 0.12); margin-top: 7px;
}
.motiv__bild { display: block; aspect-ratio: 16 / 10; border-radius: 3px;
  background: linear-gradient(135deg, var(--c), var(--m) 55%, var(--y)); opacity: 0.85; }
.bogen-schatten { box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 30px 60px -12px rgb(17 19 18 / 0.25); }

/* Etikettenbogen: Etiketten werden gedruckt, eines löst sich */
.etikettenbogen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: 84%; padding: 7%; background: var(--papierweiss); border-radius: 6px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 30px 60px -12px rgb(17 19 18 / 0.25);
  transform: rotateX(10deg) rotateY(-12deg) rotateZ(2deg);
}
.etikett {
  position: relative; aspect-ratio: 1 / 1.15; border-radius: 12px;
  padding: 14% 12%; background: #FBFBFA;
  outline: 1.5px dashed rgb(17 19 18 / 0.16); outline-offset: 3px;
  --farbe: var(--kennfarbe);
  animation: etikett-druck 8s var(--ease) infinite;
  animation-delay: calc(var(--i) * 120ms);
}
body:not([style*="--kennfarbe"]) .etikett:nth-child(4n + 1) { --farbe: var(--c); }
body:not([style*="--kennfarbe"]) .etikett:nth-child(4n + 2) { --farbe: var(--m); }
body:not([style*="--kennfarbe"]) .etikett:nth-child(4n + 3) { --farbe: var(--y); }
body:not([style*="--kennfarbe"]) .etikett:nth-child(4n)     { --farbe: var(--k); }
.etikett__punkt { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: var(--farbe); margin-bottom: 14%; }
.etikett__zeile { background: color-mix(in srgb, var(--farbe) 35%, transparent); }
@keyframes etikett-druck {
  0%, 6%   { opacity: 0; transform: scale(0.92); }
  14%, 88% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: scale(0.96); }
}
.etikett:nth-child(9) { transform-origin: 0 0; animation-name: etikett-loesen; }
@keyframes etikett-loesen {
  0%, 6%   { opacity: 0; transform: scale(0.92); }
  14%, 40% { opacity: 1; transform: none; box-shadow: none; }
  60%, 88% { opacity: 1; transform: rotate(-14deg) translate(-8%, -10%);
             box-shadow: 0 18px 30px rgb(17 19 18 / 0.25); }
  100%     { opacity: 0; transform: none; }
}

/* Faltblatt: Zickzackfalz faltet sich auf und zu */
.faltblatt { display: flex; width: 86%; transform: rotateX(14deg) rotateZ(-2deg); transform-style: preserve-3d; }
.faltblatt__feld {
  flex: 1; aspect-ratio: 1 / 2.1; padding: 10% 8%;
  background: var(--papierweiss); border: 1px solid rgb(17 19 18 / 0.06);
  transform-origin: left center;
  animation: falten 7s var(--ease) infinite;
}
.faltblatt__feld:nth-child(even) { background: #F7F7F5; animation-name: falten-gegen; }
.faltblatt__block { display: block; height: 30%; border-radius: 3px; margin-bottom: 12%;
  background: linear-gradient(160deg, var(--c), var(--m)); opacity: 0.8; }
.faltblatt__feld:nth-child(2) .faltblatt__block { background: linear-gradient(160deg, var(--m), var(--y)); }
.faltblatt__feld:nth-child(3) .faltblatt__block { background: linear-gradient(160deg, var(--y), var(--c)); }
.faltblatt__feld:nth-child(4) .faltblatt__block { background: var(--k); }
@keyframes falten      { 0%, 15% { transform: rotateY(0); } 50%, 65% { transform: rotateY(28deg); } 100% { transform: rotateY(0); } }
@keyframes falten-gegen { 0%, 15% { transform: rotateY(0); } 50%, 65% { transform: rotateY(-28deg); } 100% { transform: rotateY(0); } }

/* Katalog: aufgeschlagen, eine Seite blättert um */
.katalog {
  position: relative; width: 90%; aspect-ratio: 1.45 / 1;
  transform: rotateX(28deg) rotateZ(-4deg); transform-style: preserve-3d;
}
.katalog__seite, .katalog__vorne, .katalog__hinten {
  position: absolute; top: 0; bottom: 0; width: 50%; padding: 8% 7%;
  background: var(--papierweiss);
}
.katalog__seite--l { left: 0; border-radius: 6px 0 0 6px; box-shadow: inset -12px 0 18px -14px rgb(0 0 0 / 0.25), 0 30px 50px -14px rgb(17 19 18 / 0.3); }
.katalog__seite--r { right: 0; border-radius: 0 6px 6px 0; box-shadow: inset 12px 0 18px -14px rgb(0 0 0 / 0.25), 0 30px 50px -14px rgb(17 19 18 / 0.3); }
.katalog__blatt {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: left center; transform-style: preserve-3d;
  animation: blaettern 7s var(--ease) infinite;
}
.katalog__vorne, .katalog__hinten { left: 0; width: 100%; backface-visibility: hidden; border-radius: 0 6px 6px 0; }
.katalog__hinten { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.katalog__vorne .motiv__bild { background: linear-gradient(135deg, var(--y), var(--m)); }
.katalog__hinten .motiv__bild { background: var(--k); }
.katalog .katalog__seite--r .motiv__bild { background: linear-gradient(135deg, var(--c), var(--y)); }
@keyframes blaettern { 0%, 20% { transform: rotateY(0); } 55%, 75% { transform: rotateY(-180deg); } 100% { transform: rotateY(-360deg); } }

/* Plakat: hängt an Klammern und schwingt */
.plakat { position: relative; width: 78%; height: 92%; }
.plakat__leine { position: absolute; left: -10%; right: -10%; top: 4%; height: 2px; background: rgb(17 19 18 / 0.35); }
.plakat__bogen {
  position: absolute; left: 8%; right: 8%; top: 4%; bottom: 0; overflow: hidden;
  background: var(--papierweiss); border-radius: 3px; transform-origin: 50% 0;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 30px 60px -12px rgb(17 19 18 / 0.28);
  animation: schwingen 6s ease-in-out infinite alternate;
}
.plakat__form { position: absolute; mix-blend-mode: multiply; }
.plakat__form--a { width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--m); left: -14%; top: 8%; }
.plakat__form--b { width: 62%; aspect-ratio: 1; background: var(--y); right: -12%; top: 34%; transform: rotate(18deg); }
.plakat__form--c { width: 100%; height: 26%; background: var(--c); left: 0; bottom: 0; }
.plakat__klammer { position: absolute; top: -2px; width: 14px; height: 26px; border-radius: 3px; background: #2B2E2D; }
.plakat__klammer--l { left: 12%; } .plakat__klammer--r { right: 12%; }
@keyframes schwingen { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* Roll-up: fährt aus dem Fuß nach oben aus */
.rollup { position: relative; width: 52%; height: 96%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.rollup__stange { width: 100%; height: 6px; border-radius: 3px; background: #9A9C98; transform-origin: bottom;
  animation: rollup-stange 8s var(--ease) infinite; position: absolute; top: 4%; }
.rollup__banner {
  position: relative; width: 94%; height: 86%; overflow: hidden; padding: 10% 9%;
  background: linear-gradient(180deg, #FFFFFF 0 46%, #F6F6F4 46%);
  transform-origin: bottom; animation: rollup-banner 8s var(--ease) infinite;
  box-shadow: 0 24px 40px -18px rgb(17 19 18 / 0.3);
}
.rollup__form { display: block; height: 38%; border-radius: 4px; margin-bottom: 10%;
  background: linear-gradient(140deg, var(--c), var(--m) 60%, var(--y)); }
.rollup__fuss { width: 110%; height: 16px; border-radius: 8px; background: linear-gradient(#5A5D59, #2B2E2D); }
@keyframes rollup-banner { 0%, 8% { transform: scaleY(0.02); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0.02); } }
@keyframes rollup-stange { 0%, 8% { top: 86%; opacity: 0; } 12% { opacity: 1; } 40%, 85% { top: 4%; opacity: 1; } 100% { top: 86%; opacity: 0; } }

/* Heißfolie: Prägung mit wanderndem Goldglanz */
.folie { width: 86%; }
.folie__karte {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1.6 / 1; border-radius: 10px;
  background: linear-gradient(145deg, #1B1E24, #0D0F12);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.1), 0 40px 70px -20px rgb(13 15 18 / 0.55);
  transform: rotateX(14deg) rotateY(-16deg) rotateZ(3deg);
}
.folie__praegung { position: relative; width: 38%; aspect-ratio: 1; }
.folie__ring, .folie__raute { position: absolute; inset: 0; }
.folie__ring { border-radius: 50%; border: 6px solid transparent;
  background: linear-gradient(110deg, #8A6A2B, #F3D98B 35%, #B48A3C 50%, #FFF2C2 65%, #8A6A2B) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background-size: 300% 100%; animation: goldglanz 4s linear infinite; }
.folie__raute { inset: 26%; transform: rotate(45deg); border-radius: 4px;
  background: linear-gradient(110deg, #8A6A2B, #F3D98B 35%, #B48A3C 50%, #FFF2C2 65%, #8A6A2B);
  background-size: 300% 100%; animation: goldglanz 4s linear infinite;
  box-shadow: inset 2px 2px 3px rgb(255 255 255 / 0.5), inset -3px -3px 4px rgb(0 0 0 / 0.35); }
.folie__glanz { position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 0.10) 50%, transparent 58%);
  animation: folie-glanz 5s ease-in-out infinite; }
@keyframes goldglanz { to { background-position: -300% 0; } }
@keyframes folie-glanz { 0% { transform: translateX(-30%); } 60%, 100% { transform: translateX(30%); } }

/* Vektorpfad: Kurve zeichnet sich, Fläche füllt sich, Schnittmarken */
.vektor { width: 82%; }
.vektor__svg { width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 30px 40px rgb(17 19 18 / 0.18)); }
.vektor__format { fill: #FFFFFF; }
.vektor__anschnitt { fill: none; stroke: var(--m); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.6; }
.vektor__schnitt { fill: none; stroke: #111312; stroke-width: 1.5; }
.vektor__flaeche { fill: var(--c); opacity: 0; animation: vektor-flaeche 7s var(--ease) infinite; }
.vektor__pfad { fill: none; stroke: #111312; stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: vektor-pfad 7s var(--ease) infinite; }
.vektor__griff { fill: none; stroke: var(--reflex); stroke-width: 1.2; opacity: 0; animation: vektor-griff 7s var(--ease) infinite; }
.vektor__anker { fill: #FFFFFF; stroke: var(--reflex); stroke-width: 2; opacity: 0; animation: vektor-griff 7s var(--ease) infinite; }
@keyframes vektor-pfad   { 0%, 5% { stroke-dashoffset: 900; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vektor-griff  { 0%, 20% { opacity: 0; } 35%, 60% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes vektor-flaeche { 0%, 50% { opacity: 0; } 65%, 90% { opacity: 0.85; } 100% { opacity: 0; } }

/* Stanzkontur einer Faltschachtel zeichnet sich */
.schachtel { width: 86%; }
.schachtel__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgb(17 19 18 / 0.16)); }
.schachtel__flaechen rect { fill: #FFFFFF; }
.schachtel__flaechen rect:nth-child(1) { fill: color-mix(in srgb, var(--c) 18%, #fff); }
.schachtel__flaechen rect:nth-child(3) { fill: color-mix(in srgb, var(--m) 14%, #fff); }
.schachtel__schnitt { fill: none; stroke: var(--m); stroke-width: 2.5; stroke-linejoin: round;
  stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: stanzen 8s var(--ease) infinite; }
.schachtel__rill { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0;
  animation: rillen 8s var(--ease) infinite; }
@keyframes stanzen { 0%, 5% { stroke-dashoffset: 2200; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0.2; } }
@keyframes rillen  { 0%, 45% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Visitenkarten fächern sich auf */
.visitenkarten { position: relative; width: 78%; aspect-ratio: 1.2 / 1; }
.visitenkarte {
  position: absolute; left: 10%; top: 26%; width: 80%; aspect-ratio: 85 / 55;
  padding: 7% 8%; border-radius: 6px; background: var(--papierweiss);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 22px 40px -16px rgb(17 19 18 / 0.35);
  transform-origin: 30% 120%;
  animation: faechern 7s var(--ease) infinite;
}
.visitenkarte:nth-child(1) { --dreh: -14deg; background: #FBFBFA; }
.visitenkarte:nth-child(2) { --dreh: -2deg; }
.visitenkarte:nth-child(3) { --dreh: 11deg; background: #15181D; }
.visitenkarte:nth-child(3) .visitenkarte__zeile { background: rgb(255 255 255 / 0.22); }
.visitenkarte__marke { display: block; width: 22%; aspect-ratio: 1; border-radius: 50%; margin-bottom: 10%;
  background: linear-gradient(135deg, var(--c), var(--m)); }
.visitenkarte:nth-child(3) .visitenkarte__marke {
  background: linear-gradient(110deg, #8A6A2B, #F3D98B 40%, #B48A3C 60%, #FFF2C2); }
@keyframes faechern { 0%, 12% { transform: rotate(0); } 45%, 85% { transform: rotate(var(--dreh)); } 100% { transform: rotate(0); } }

/* Druckwalzen über einer durchlaufenden Bahn */
.walzen { position: relative; width: 86%; aspect-ratio: 1.1 / 1; }
.walze {
  position: absolute; left: calc(8% + var(--i) * 26%); top: calc(10% + var(--i) * 6%);
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.22) 0 8deg, transparent 8deg 30deg),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--f) 70%, #fff), var(--f) 60%, color-mix(in srgb, var(--f) 70%, #000));
  box-shadow: 0 16px 30px -12px rgb(17 19 18 / 0.45);
  animation: walze 3.2s linear infinite;
}
.walze--c { --f: var(--c); } .walze--m { --f: var(--m); } .walze--y { --f: var(--y); }
.walzen__bahn {
  position: absolute; left: -6%; right: -6%; bottom: 14%; height: 34%;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 18px, var(--m) 18px 36px, var(--y) 36px 54px, #2B2E2D 54px 64px, #FFFFFF 64px 92px);
  background-size: 92px 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  transform: perspective(600px) rotateX(48deg);
  border-radius: 4px; opacity: 0.7;
  animation: bahn 2.4s linear infinite;
}
@keyframes walze { to { transform: rotate(360deg); } }
@keyframes bahn  { to { background-position: 92px 0; } }

/* Motive im Kopfbereich kommen leicht verzögert */
.hero__unten > div:nth-child(2) > .motiv { margin-top: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .motiv, .motiv * { animation: none !important; }
  .vektor__pfad { stroke-dashoffset: 0; } .vektor__griff, .vektor__anker { opacity: 1; }
  .vektor__flaeche { opacity: 0.85; } .schachtel__schnitt { stroke-dashoffset: 0; }
  .schachtel__rill { opacity: 1; } .rollup__stange { top: 4%; }
}

/* Alle Seiten mit Motiv: Überschrift links, Motiv rechts daneben */
@media (min-width: 1000px) {
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) > .wrap {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(32px, 4vw, 72px); align-items: center;
  }
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) > .wrap > :not(.hero__unten) { grid-column: 1; }
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) .hero__unten { display: contents; }
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) .hero__unten > div:first-child { grid-column: 1; }
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) .hero__unten > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; }
  .hero:has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) h1 { margin-bottom: var(--s4); }
  .hero__unten > div:nth-child(2) > .motiv { margin-top: 0; }
}
@media (min-width: 1000px) {
  .hero:not(.hero--start):has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) h1 {
    font-size: clamp(2.4rem, 0.9rem + 3.3vw, 4.4rem); max-width: 14ch;
  }
}
@media (min-width: 1000px) {
  .hero:not(.hero--start):has(.hero__unten > div:nth-child(2) > :is(.motiv, .druckbogen, .lagerraster, .kennzahl-gross)) h1 {
    font-size: clamp(2.2rem, 0.7rem + 2.6vw, 3.6rem); max-width: none;
    overflow-wrap: normal;
  }
}

/* Startseite: zweistufige Hauptüberschrift (Leitsatz + Suchbegriffe) */
.titel-haupt { display: block; }
.titel-akzent {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--magenta) 35%, var(--gelb) 60%, var(--magenta) 80%, var(--cyan) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: veredeln 9s ease-in-out infinite alternate;
  padding-right: 0.04em;
}
@keyframes veredeln { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.titel-zusatz {
  display: block; margin-top: 0.55em;
  font-family: var(--ff-utility); font-stretch: 100%; font-weight: 450;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.35; letter-spacing: -0.005em;
  color: var(--grau); max-width: 30em; text-wrap: pretty;
}
.hero--start h1 { max-width: none; }
.hero--start .titel-haupt { max-width: 11ch; }
@media (prefers-reduced-motion: reduce) { .titel-akzent { animation: none; } }
.hero h1,
.hero .titel-zusatz {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}