:root {
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --ink: #12100e;
  --ink-soft: #1b1815;
  --ink-line: #2a2521;
  
  --accent: #1267b8;
  --accent-bright: #1267b8;
  --muted: #6e655b;
  --muted-dark: #9a9086;
  --rule: rgba(18, 16, 14, 0.16);
  --rule-strong: rgba(18, 16, 14, 0.32);
  --rule-dark: rgba(239, 234, 225, 0.16);
  --rule-dark-strong: rgba(239, 234, 225, 0.34);

  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --edge: clamp(1.25rem, 5vw, 5.5rem);
  --shell: 1440px;
  --shell-wide: 1760px;
  --shell-narrow: 720px;

  --step: clamp(3.5rem, 6.75vw, 7.25rem);  
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

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

.dark-zone :focus-visible { outline-color: var(--accent-bright); }

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

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus-visible { transform: translateY(0); }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  letter-spacing: -0.01em;
}

.display--xl  { font-size: clamp(3.2rem, 10.5vw, 9.5rem); }
.display--lg  { font-size: clamp(2.6rem, 7vw, 6rem); }
.display--md  { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 0.98; }
.display--sm  { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; }

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.dark-zone .label { color: var(--muted-dark); }

.label--accent { color: var(--accent); }
.dark-zone .label--accent { color: var(--accent-bright); }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
}

.prose p {
  margin: 0 0 1.15em;
  max-width: 62ch;
  color: #2c2823;
}

.dark-zone .prose p { color: rgba(239, 234, 225, 0.78); }

.prose p:last-child { margin-bottom: 0; }

.sidenote {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.85rem;
  margin: 0;
  max-width: 24ch;
}

.dark-zone .sidenote {
  color: var(--muted-dark);
  border-top-color: var(--rule-dark-strong);
}

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

.shell--wide { max-width: var(--shell-wide); }
.shell--narrow { max-width: var(--shell-narrow); }
.shell--flush { padding-inline: 0; }

.section { position: relative; padding-block: var(--step); }
.section--tight { padding-block: calc(var(--step) * 0.62); }

.dark-zone {
  background: var(--ink);
  color: var(--paper);
}

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

.dark-zone .rule { border-top-color: var(--rule-dark); }

.link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s var(--ease);
}

.link:hover,
.link:focus-visible { color: var(--accent); }

.dark-zone .link:hover,
.dark-zone .link:focus-visible { color: var(--accent-bright); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.9rem;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.button:hover:not(:disabled),
.button:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--accent);
}

.dark-zone .button:hover:not(:disabled),
.dark-zone .button:focus-visible:not(:disabled) { color: var(--accent-bright); }

.button:disabled { opacity: 0.55; cursor: progress; }

.button__mark {
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

.button:hover .button__mark { width: 2rem; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.dark-zone .section-head { border-bottom-color: var(--rule-dark); }

.section-head__meta { display: flex; flex-direction: column; gap: 0.7rem; }

/* Der Kopfbereich steht fest über der Seite und ist in jedem Zustand vollständig
   deckend: Inhalte laufen unsichtbar dahinter durch, statt in die Navigation
   hineinzuscrollen. Er behält beim Scrollen seine Höhe – es wechseln
   ausschließlich Farbe und Rahmen. Dadurch verschiebt sich beim Umschalten nichts. */
.masthead {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
              border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.masthead.is-pinned {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule);
  box-shadow: 0 0.4rem 1.5rem rgba(18, 16, 14, 0.06);
}

.masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.wordmark {
  position: relative;
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  background: transparent;
}

.wordmark__logo {
  width: clamp(9.5rem, 13vw, 12.75rem);
  height: auto;
  filter: brightness(0) invert(1);
}

.wordmark::after,
.colophon__logo-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 49.17%;
  height: 22.81%;
  background: linear-gradient(90deg, #5adbe4 0%, #1267b8 100%);
  pointer-events: none;
}

.masthead.is-pinned .wordmark__logo { filter: none; }

.nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}

.nav__link {
  position: relative;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.3rem;
  opacity: 0.82;
  transition: opacity 0.3s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current] { opacity: 1; }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current]::after { width: 100%; }

.nav__cta {
  padding: 0.6rem 1.15rem;
  border: 1px solid currentColor;
  opacity: 1;
}

.nav__cta::after { display: none; }

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

body.nav-open .masthead {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: var(--rule-dark);
}

body.nav-open .wordmark {
  background: transparent;
}

body.nav-open .wordmark__logo { filter: brightness(0) invert(1); }

.nav-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 110;
}

.nav-toggle__bars {
  display: grid;
  gap: 5px;
  width: 26px;
}

.nav-toggle__bars span {
  height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 6rem var(--edge) 3rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0.5s;
}

.nav-panel.is-open { transform: translateX(0); visibility: visible; }

.nav-panel__link {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1;
  text-decoration: none;
}

.nav-panel__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.hero {
  position: relative;
  min-height: min(100svh, 60rem);
  display: flex;
  align-items: center;
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
}

.hero__art {
  position: absolute;
  top: -6%;
  right: -4%;
  width: min(58vw, 46rem);
  height: 118%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%);
  mask-image: linear-gradient(to left, #000 58%, transparent 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.5rem, 4vh, 2.75rem);
  font-family: var(--mono);
  font-size: clamp(0.625rem, 0.5rem + 0.3vw, 0.8125rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239, 234, 225, 0.72);
}

.hero__kicker::before {
  content: '';
  width: clamp(2rem, 6vw, 5rem);
  height: 1px;
  background: var(--accent);
}

.hero__title { max-width: 15ch; }
.hero__title em { color: var(--accent-bright); }

.hero__foot {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 30rem);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
}

.hero__claim {
  margin: 0;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: rgba(239, 234, 225, 0.76);
  max-width: 42ch;
}

.focus { position: relative; }

/* Die Einordnung steht als Zeile über dem Abschnitt – so beginnt Aussage und
   Text auf einer gemeinsamen Oberkante, statt neben einer halbleeren Spalte. */
.focus__eyebrow {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--rule);
}

/* Links die Aussage, rechts der Fließtext – beide oben bündig. */
.focus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}

.focus__statement {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 16ch;
}

.focus__statement em { font-style: italic; color: var(--accent); }

.focus__prose { max-width: 46ch; }

/* Die vier Arbeitsfelder als 2×2-Raster: gleiche Fläche, gleiche Gewichtung. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.facts li { display: grid; gap: 0.7rem; align-content: start; }

.facts__icon {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: var(--accent);
}

.facts__name {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.facts__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #2c2823;
}

.register {
  --register-tag-width: clamp(2.4rem, 3.4vw, 2.9rem);
  --register-gap: clamp(0.9rem, 2vw, 1.6rem);
  --register-bleed: clamp(0.5rem, 1.2vw, 0.9rem);
  border-top: 1px solid var(--rule);
  overflow-anchor: none;
}

.register__group {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

/* Der Gruppentitel bekommt eine kurze Marke in Akzentfarbe als Auftakt und
   bleibt beim Blättern neben seiner Liste stehen. */
.register__title {
  position: sticky;
  top: 7.5rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.register__title::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: var(--marke-verlauf);
}

.register__title h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

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

.register__item {
  position: relative;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.35s var(--ease);
}

.register__item[open] { z-index: 20; }

.register__list li:last-child .register__item { border-bottom: 0; }

/* Zeile: Zeichen, Name, feine Leitlinie, Aufklapp-Zeichen. Die Leitlinie füllt
   den freien Raum, statt ihn als Lücke stehen zu lassen. Die Fläche greift
   seitlich leicht über, damit der Hover-Ton die Zeile trägt. */
.register__summary {
  display: flex;
  align-items: center;
  gap: var(--register-gap);
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
  padding-inline: var(--register-bleed);
  margin-inline: calc(-1 * var(--register-bleed));
  transition: background-color 0.35s var(--ease);
  list-style: none;
  cursor: pointer;
  /* Touchbedienung: ausreichend große Fläche, kein blaues Aufblitzen beim
     Antippen, keine Textmarkierung und keine Verzögerung durch Doppeltipp. */
  min-height: 3rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Beim Aufklappen darf der Eintrag nicht unter dem festen Kopfbereich liegen. */
.register__item { scroll-margin-top: 7.5rem; }

.register__summary::-webkit-details-marker { display: none; }

.register__item::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.55s var(--ease);
}

.register__item:focus-within::before,
.register__item[open]::before { width: 100%; }

/* Das Zeichen sitzt in einem ruhigen Kreis – aufgeklappt füllt er sich. */
.register__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--register-tag-width);
  height: var(--register-tag-width);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--accent);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background-color 0.35s var(--ease);
}

.register__item[open] .register__tag {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ui-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.label-icon {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facts .label-icon {
  width: 1.7rem;
  height: 1.7rem;
}

/* Ruhiger als zuvor: Die Liste liest sich als Satz von Leistungen, die
   Abschnittsüberschrift bleibt die größte Stimme auf der Seite. */
.register__name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: transform 0.45s var(--ease), color 0.35s var(--ease);
}

/* Gestrichelte Leitlinie zwischen Name und Zeichen. */
.register__leader {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--rule) 0 2px, transparent 2px 6px);
  transition: opacity 0.4s var(--ease);
}

.register__item[open] .register__leader {
  background: repeating-linear-gradient(to right, var(--accent) 0 2px, transparent 2px 6px);
}

.register__item[open] .register__name {
  transform: translateX(clamp(0.4rem, 1.2vw, 1.1rem));
  color: var(--accent);
}

.register__toggle {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
}

.register__toggle::before,
.register__toggle::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}

.register__toggle::after { transform: rotate(90deg); }
.register__item[open] .register__toggle::after { transform: rotate(90deg) scaleX(0); }

/* Der Text klappt innerhalb der Liste auf und schiebt die folgenden Einträge
   nach unten. So bleibt auf kleinen Bildschirmen nichts verdeckt. */
.register__detail {
  margin: 0 0 clamp(0.85rem, 2vw, 1.15rem);
  margin-left: calc(var(--register-tag-width) + var(--register-gap));
  padding: 0.95rem 1.15rem 1rem;
  background: rgba(18, 103, 184, 0.04);
  border-left: 2px solid var(--accent);
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.975rem;
  line-height: 1.6;
}

.register__item[open] .register__detail {
  animation: register-auf 0.3s var(--ease) both;
}

@keyframes register-auf {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

/* Seit die Randnotiz entfallen ist, steht hier nur noch die Überschrift –
   die Spaltenaufteilung wird dafür nicht mehr gebraucht. */
.partners__intro {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.partner-marquee {
  --marquee-gap: clamp(0.7rem, 1.5vw, 1rem);
  overflow: hidden;
  padding-block: 1px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.partner-marquee__track {
  display: flex;
  flex-flow: row nowrap;
  width: max-content;
  gap: var(--marquee-gap);
  animation: partner-laufschrift 54s linear infinite;
  will-change: transform;
}

.partner-marquee:hover .partner-marquee__track,
.partner-marquee:focus-within .partner-marquee__track { animation-play-state: paused; }

.partner-marquee__list {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  min-width: max-content;
  gap: var(--marquee-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.partner-marquee__list li {
  display: grid;
  flex: 0 0 clamp(12rem, 18vw, 15rem);
  place-items: center;
  width: clamp(12rem, 18vw, 15rem);
  min-height: clamp(5.5rem, 9vw, 7.25rem);
  padding: clamp(1.15rem, 2vw, 1.7rem);
  background: var(--paper);
  border: 1px solid rgba(239, 234, 225, 0.18);
}

.partner-marquee__list img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
}

.partner-marquee__list .partner-marquee__dark { background: #004059; }

@keyframes partner-laufschrift {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

/* Drei gleich breite Spalten nebeneinander. Gleiche Bildfläche, gleicher Aufbau,
   gemeinsamer Abschluss – die Beiträge stehen wie Säulen nebeneinander, statt
   einen davon herauszustellen. */
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 3rem);
  align-items: stretch;
}

/* Eine Spalte: Bild, Einordnung, Titel, Anriss – und ganz unten der Verweis auf
   den vollständigen Beitrag. `margin-top: auto` drückt ihn an den unteren Rand,
   damit die drei Spalten unabhängig von der Textlänge auf einer Linie enden. */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule-strong);
  text-decoration: none;
}

.news-card__media,
.archive-item__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #ffffff;
}

.news-card__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
}

/* Beiträge ohne Bild bekommen eine ruhige Fläche, damit die Spalten
   trotzdem auf gleicher Höhe beginnen. */
.news-card__media--leer { background: var(--rule); }

.news-card__media img,
.archive-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.news-card:hover .news-card__media img { transform: scale(1.025); }

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-card__meta i { font-style: normal; color: var(--accent); }

.news-card__meta::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.news-card__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.1vw, 2.05rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.8rem;
  color: var(--accent);
  transition: color 0.35s var(--ease);
}

.news-card__teaser {
  margin: 0 0 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.news-card__more {
  margin-top: auto;
  align-self: start;
  color: var(--ink);
}

.news-card:hover .news-card__more,
.news-card:focus-visible .news-card__more { color: var(--accent); }

.news__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-strong);
}

.news__archive-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45rem;
  transition: color 0.3s var(--ease);
}

.news__archive-label:hover,
.news__archive-label:focus-visible { color: var(--accent); }

.archive__head {
  padding-top: clamp(9rem, 20vh, 14rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.archive__title { max-width: 12ch; color: var(--accent); }

/* Archiv: dieselben drei Spalten wie auf der Startseite, nur über alle Beiträge.
   Die Liste bleibt eine Liste – das `li` ist der Rasterplatz, die Karte füllt
   ihn vollständig aus, damit die drei Karten einer Zeile gleich groß sind. */
.news__grid--archiv {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: clamp(2.75rem, 5vw, 4.5rem);
}

.news__grid--archiv > li { display: flex; }
.news__grid--archiv .news-card { width: 100%; }

/* Gleich lange Anrisse halten die Karten optisch im Gleichgewicht; der
   vollständige Text steht auf der Beitragsseite. */
.news__grid--archiv .news-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.archive-item__media {
  aspect-ratio: 16 / 9;
  max-width: 68rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.archive-item__body { max-width: 68ch; }

.archive-item__body p {
  margin: 0 0 1.1em;
  color: #2c2823;
}

.archive-item__body p:first-of-type {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
}

.archive-item__body p:last-child { margin-bottom: 0; }

.archive-item__body strong,
.archive-item__body b {
  color: var(--accent);
}

#news .section-head .display { color: var(--accent); }

.archive-item__subtitle {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.archive-item__body > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.archive-item__list {
  margin: 0 0 1.15em;
  padding-left: 1.1rem;
  color: #2c2823;
}

.archive-item__list li { margin-bottom: 0.35em; }

.archive-item__list li::marker { color: var(--accent); }

.article-page__head {
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.article-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font: 500 0.7rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-page__meta span { color: var(--accent); }

/* Artikelüberschrift: Seitenstufe statt Hero-Stufe. Je länger der Titel,
   desto kleiner der Grad — die Klassen setzt beitrag.php nach Zeichenzahl. */
.article-page__title {
  max-width: 22ch;
  color: var(--accent);
  overflow-wrap: break-word;
  hyphens: auto;
}

.article-page__title--lang {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  line-height: 1.04;
  max-width: 26ch;
}

.article-page__title--sehr-lang {
  font-size: clamp(1.7rem, 2.9vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 32ch;
}

.article-page__teaser { max-width: 62ch; margin: 1.5rem 0 0; }
.article-page__content { padding-bottom: var(--step); }
.article-page__media { max-width: none; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.article-page__media img { display: block; width: 100%; height: auto; }
.article-page__body { max-width: none; }
.article-page__back { margin-top: clamp(2rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.article-page--missing { min-height: 70vh; padding-top: clamp(10rem, 22vh, 15rem); }

.not-found-page {
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
}

.not-found {
  width: min(100% - 2 * var(--edge), 72rem);
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 5rem);
  display: grid;
  align-content: space-between;
  gap: clamp(4rem, 12vh, 8rem);
}

.not-found__brand { width: clamp(11rem, 20vw, 15rem); }
.not-found__content { max-width: 48rem; }
.not-found__content h1 { max-width: 14ch; margin-top: 1rem; }
.not-found__content .lead { max-width: 54ch; margin: 1.5rem 0 2rem; color: var(--muted-dark); }

.article-share {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.article-share__label {
  margin: 0;
  color: var(--accent);
  font: 500 0.68rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
}

.article-share__actions a,
.article-share__actions button {
  position: relative;
  padding: 0 0 0.2rem;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font: 500 0.68rem/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.article-share__actions a:hover,
.article-share__actions a:focus-visible,
.article-share__actions button:hover,
.article-share__actions button:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.article-share__status {
  grid-column: 2;
  min-height: 1.2em;
  margin: 0;
  color: var(--accent);
  font: 0.7rem/1.45 var(--mono);
}

.article-share__status.is-error { color: var(--ink); }

.data-state {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 2rem;
}

.data-state--error { color: var(--accent); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact__aside { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }

.contact__title { max-width: 11ch; }
.contact__title em { color: var(--accent-bright); }

.contact-details { display: grid; gap: 1.15rem; margin: 0; }

.contact-details div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--rule-dark);
}

.contact-details dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  padding-top: 0.2rem;
}

.contact-details dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.contact-details a { text-decoration: none; border-bottom: 1px solid var(--rule-dark-strong); }
.contact-details a:hover { color: var(--accent-bright); border-bottom-color: currentColor; }

.form { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.field { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }

.field label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.field label i { font-style: normal; color: var(--accent-bright); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-dark-strong);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.45;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(239, 234, 225, 0.34); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent-bright);
}

.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%),
                    linear-gradient(135deg, var(--paper) 50%, transparent 50%);
  background-position: right 12px center, right 6px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field select option { background: var(--ink); color: var(--paper); }

.field[hidden] { display: none; }

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-bottom-color: var(--accent-bright); }

.form > .field__error { min-height: 0; }

.field__error {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  min-height: 1rem;
}

.human-check {
  padding-block: 1.15rem;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}

.human-check__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 1.5rem;
}

.human-check__badge {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.human-check__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) max-content;
  align-items: end;
  gap: 1rem;
}

.human-check__row input:disabled {
  cursor: wait;
  opacity: 0.55;
}

.human-check__refresh {
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule-dark-strong);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.human-check__refresh:hover,
.human-check__refresh:focus-visible {
  color: var(--accent-bright);
  border-color: var(--accent-bright);
}

.human-check__hint {
  margin: 0;
  max-width: 66ch;
  color: var(--muted-dark);
  font-size: 0.75rem;
  line-height: 1.5;
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.consent input {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25rem;
  border: 1px solid var(--rule-dark-strong);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.consent input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.5L9.8 3.6' fill='none' stroke='%23efeae1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.field--invalid.consent input { border-color: var(--accent-bright); }

.consent label {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(239, 234, 225, 0.72);
}

.consent button {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--paper);
}

.consent button:hover { color: var(--accent-bright); }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  padding-top: 0.5rem;
}

.form__note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted-dark);
  max-width: 30ch;
  margin: 0;
}

.form__status {
  display: none;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form__status.is-visible { display: flex; }
.form__status.is-success { border-left-color: #4f8f5c; }

.form__status > span {
  flex: 1;
  min-width: 0;
}

.form__status b {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}

.form__status-close {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.45rem -0.65rem -0.45rem 0;
  border: 1px solid var(--rule-dark-strong);
  background: transparent;
  color: var(--paper);
  font: 400 1.75rem/1 var(--sans);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.form__status-close:hover,
.form__status-close:focus-visible {
  border-color: var(--accent-bright);
  background: var(--accent-bright);
  color: var(--paper);
}

.form__noscript {
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--accent);
  font-size: 0.9375rem;
}

.colophon { padding-block: clamp(3rem, 5.5vw, 4.5rem) 2rem; }

.colophon__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-dark);
}

.colophon__logo-wrap {
  position: relative;
  width: clamp(13rem, 20vw, 16rem);
}

.colophon__logo {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  filter: brightness(0) invert(1);
}

.colophon__claim {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 1.25rem 0 0;
  max-width: 16ch;
}

.colophon__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

.colophon__top .label { color: var(--accent-bright); }

.colophon__list a,
.colophon__list button {
  font-size: 0.9375rem;
  text-decoration: none;
  color: rgba(239, 234, 225, 0.74);
  transition: color 0.3s var(--ease);
  text-align: left;
  padding: 0;
}

.colophon__list a:hover,
.colophon__list button:hover { color: var(--accent-bright); }

.colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
}

.social { display: flex; align-items: center; gap: 0.75rem; }

.social__item {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule-dark);
  color: rgba(239, 234, 225, 0.78);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

a.social__item:hover,
a.social__item:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.social__item svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

.social__item[data-inactive] { opacity: 0.4; cursor: default; }

.colophon__copy {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0;
}

body.cookie-settings-open { overflow: hidden; }

.cookie-banner[hidden],
.cookie-settings[hidden] { display: none; }

.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 145;
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--ink);
  box-shadow: 0 -24px 70px rgba(18, 16, 14, 0.2);
}

.cookie-banner__inner {
  width: min(100%, var(--shell-wide));
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
}

.cookie-banner__copy { max-width: 52rem; }

.cookie-banner__title,
.cookie-settings__title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}

.cookie-banner__title {
  margin-top: 0.55rem;
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  line-height: 1;
}

.cookie-banner__copy > p:not(.label) {
  max-width: 70ch;
  margin: 0.85rem 0 0.7rem;
  color: #2c2823;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.cookie-text-button,
.cookie-settings-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.cookie-text-button:hover,
.cookie-settings-link:hover { text-decoration-thickness: 2px; }

.cookie-banner__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.cookie-action,
.cookie-save {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.cookie-action {
  background: var(--accent);
  color: var(--paper);
}

.cookie-action:hover,
.cookie-action:focus-visible {
  background: transparent;
  color: var(--accent);
}

.cookie-settings-link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.cookie-settings__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 14, 0.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cookie-settings__sheet {
  position: relative;
  width: min(100%, 58rem);
  max-height: min(92dvh, 58rem);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(18, 16, 14, 0.3);
  box-shadow: 0 30px 90px rgba(18, 16, 14, 0.35);
}

.cookie-settings__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
}

.cookie-settings__title {
  margin-top: 0.45rem;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.02;
}

.cookie-settings__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-settings__body {
  overflow-y: auto;
  padding: clamp(1.3rem, 3vw, 2.2rem);
}

.cookie-settings__intro {
  margin: 0 0 1.5rem;
  max-width: 68ch;
  color: #2c2823;
  font-size: 0.9375rem;
}

.cookie-categories { border-top: 1px solid var(--rule-strong); }

.cookie-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.cookie-category:has(input:disabled) { cursor: default; }

.cookie-category__copy strong {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
}

.cookie-category__copy small {
  display: block;
  margin-top: 0.35rem;
  max-width: 66ch;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cookie-switch {
  display: grid;
  grid-template-columns: auto 2.6rem;
  align-items: center;
  gap: 0.65rem;
  min-width: 6.5rem;
}

.cookie-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.cookie-switch > span {
  position: relative;
  grid-column: 1;
  width: 3rem;
  height: 1.55rem;
  border: 1px solid var(--muted);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cookie-switch > span::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--muted);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.cookie-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.cookie-switch input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
}

.cookie-switch input:checked + span::after {
  background: var(--paper);
  transform: translateX(1.42rem);
}

.cookie-switch input:disabled + span { opacity: 0.58; }

.cookie-switch em {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cookie-settings__legal {
  margin: 1.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.cookie-settings__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.3rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
  color: var(--accent);
}

.cookie-save {
  background: transparent;
  color: var(--accent);
}

.cookie-save:hover,
.cookie-save:focus-visible {
  background: var(--accent);
  color: var(--paper);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(18, 16, 14, 0.42);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.overlay.is-open { opacity: 1; visibility: visible; }

.overlay__sheet {
  position: relative;
  width: min(100%, 58rem);
  max-height: min(86vh, 60rem);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(18, 16, 14, 0.2);
  box-shadow: 0 30px 80px -30px rgba(18, 16, 14, 0.5);
  transform: translateY(18px);
  transition: transform 0.45s var(--ease);
}

.overlay.is-open .overlay__sheet { transform: translateY(0); }

.overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}

.overlay__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.015em;
}

.overlay__close {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

.overlay__close:hover { color: var(--accent); }

.overlay__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  -webkit-overflow-scrolling: touch;
}

.legal { max-width: 68ch; }

.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.6rem 0 0.6rem;
}

.legal h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.5rem 0 0.5rem;
}

.legal p { margin: 0 0 1em; color: #2c2823; }

.legal ul { margin: 0 0 1.15em; padding-left: 1.1rem; color: #2c2823; }
.legal li { margin-bottom: 0.4em; }

.legal dl { margin: 0 0 1.25em; }

.legal dl div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--rule);
}

.legal dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2rem;
}

.legal dd { margin: 0; }

.legal a { color: var(--accent); text-underline-offset: 3px; word-break: break-word; }

.legal__address {
  line-height: 1.75;
  padding: 0.9rem 0 0.9rem 1.15rem;
  border-left: 2px solid var(--rule-strong);
  margin: 0 0 1.35em;
  color: #2c2823;
}

.legal__note {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--accent);
  background: rgba(200, 68, 31, 0.06);
  color: #4a423a;
  margin: 0 0 1.75rem;
}

.pending {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(200, 68, 31, 0.08);
  padding: 0.1rem 0.45rem;
}

.legal-page { padding-block: clamp(8rem, 18vh, 12rem) var(--step); }

.legal-page__head {
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

.no-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }

  .partner-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .partner-marquee__track { animation: none; transform: none; }
  .partner-marquee__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 1180px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { max-width: 42rem; }
}

@media (max-width: 1024px) {
  .masthead__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav { display: none; }
  .nav-toggle { display: flex; grid-column: 2; }

  /* Aussage und Text stehen untereinander, das Raster der Arbeitsfelder bleibt. */
  .focus__grid { grid-template-columns: minmax(0, 1fr); }
  .focus__statement { max-width: 22ch; }
  .focus__prose { max-width: 60ch; }

  .register__group { grid-template-columns: minmax(0, 1fr); }
  /* Die Akzentmarke rückt neben den Titel, sobald der Kopf über der Liste steht. */
  .register__title { position: static; flex-direction: row; align-items: center; gap: 1rem; }

  .colophon__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colophon__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero { min-height: auto; padding-top: clamp(7.5rem, 22vh, 10rem); }

  .hero__art {
    top: auto;
    bottom: -8%;
    right: -18%;
    width: 88vw;
    height: 72%;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 96%);
    mask-image: linear-gradient(to left, #000 40%, transparent 96%);
  }

  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

  /* Drei Spalten werden hier zu schmal: Die Beiträge stehen untereinander,
     behalten aber Aufbau und Abschluss der Spaltendarstellung. */
  .news__grid { grid-template-columns: minmax(0, 1fr); }
  .news-card__media { aspect-ratio: 16 / 9; }

  .article-share { grid-template-columns: minmax(0, 1fr); }
  .article-share__status { grid-column: 1; }

  .legal dl div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }

  .cookie-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
  }

  .cookie-banner__controls { width: min(100%, 42rem); }
}

@media (max-width: 640px) {
  
  .display {
    line-height: 1.04;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
  }

  .display--xl { font-size: clamp(2.75rem, 14vw, 3.35rem); }
  .display--lg { font-size: clamp(2.35rem, 12vw, 3rem); }
  .display--md { font-size: clamp(2rem, 10vw, 2.5rem); line-height: 1.08; }

  /* Muss nach .display--md stehen, sonst gewinnt dort die größere Stufe. */
  .article-page__title { max-width: 100%; }
  .article-page__title--lang { font-size: clamp(1.75rem, 8vw, 2.1rem); line-height: 1.1; }
  .article-page__title--sehr-lang { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.16; }

  .hero__title,
  .contact__title { max-width: 100%; }

  .focus__statement {
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .human-check__row { grid-template-columns: minmax(0, 1fr); }
  .human-check__refresh { justify-self: start; }

  /* Zwei Spalten werden hier zu schmal: die Arbeitsfelder stehen untereinander. */
  .facts { grid-template-columns: minmax(0, 1fr); }


  .colophon__top { grid-template-columns: minmax(0, 1fr); }
  .colophon__bottom { flex-direction: column; align-items: flex-start; }

  .contact-details div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

  .register__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
  }

  .register__title h3,
  .register__name {
    min-width: 0;
    line-height: 1.14;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .register__summary { padding-block: 0.85rem; }

  /* Hier bleibt kein Platz für die Leitlinie – der Name nimmt ihn ein. */
  .register__leader { display: none; }
  .register__name { flex: 1 1 auto; }

  .register__item[open] .register__name { transform: translateX(0.25rem); }

  .register__detail {
    left: 0;
    right: 0;
    padding: 0.9rem 1rem 1rem;
  }

  .news-card__title,
  .colophon__claim {
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  .cookie-banner__title,
  .cookie-settings__title { line-height: 1.08; }

  .cookie-banner__controls { grid-template-columns: minmax(0, 1fr); }
  .cookie-settings-link { grid-column: 1; }

  .cookie-settings { padding: 0; }

  .cookie-settings__sheet {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
  }

  .cookie-settings__head { gap: 0.8rem; }
  .cookie-settings__close { font-size: 0; gap: 0; }
  .cookie-settings__close svg { width: 1.1rem; height: 1.1rem; }

  .cookie-settings__actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .cookie-category {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
  }

  .cookie-switch { justify-self: start; }
}

@media print {
  .masthead,
  .nav-panel,
  .overlay,
  .hero__art,
  .form { display: none !important; }

  body { background: #fff; color: #000; }
  .dark-zone { background: #fff; color: #000; }
  .partner-marquee__track { animation: none; transform: none; }
  .partner-marquee__list[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   17 — Zeigereffekte
   Ein gemeinsames Prinzip für die ganze Seite: Flächen und Linien wachsen beim
   Überfahren ein, statt zu verschwinden. Als Motiv dient der Verlauf aus dem
   Logo. Aufwendige Effekte greifen nur bei echten Zeigergeräten, damit auf
   Tippgeräten kein Zustand hängen bleibt.
   ========================================================================== */

:root {
  --marke-hell: #5adbe4;
  --marke-verlauf: linear-gradient(90deg, #5adbe4 0%, #1267b8 100%);
  --marke-verlauf-hoch: linear-gradient(0deg, #1267b8 0%, #5adbe4 100%);
}

/* --- Grundlagen: Ausgangszustand der Effektebenen ------------------------- */

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), color 0.35s var(--ease);
}

/* Der Verlauf liegt hinter der Beschriftung und schiebt sich von links ein. */
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--marke-verlauf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}

.link {
  position: relative;
  border-bottom: 0;
  padding-bottom: 0.4rem;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.nav__link::after { background: var(--marke-verlauf); height: 2px; }

.social__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.social__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--marke-verlauf-hoch);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.4s var(--ease);
}

.social__item svg { transition: transform 0.4s var(--ease); }

/* Kurze Textlinks bekommen eine mitwachsende Grundlinie */
.colophon__list a,
.colophon__list button,
.contact-details a {
  background-image: var(--marke-verlauf);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease);
}

.contact-details a { border-bottom: 0; padding-bottom: 0.1rem; }

/* --- Wirksame Zustände ---------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  /* Flächiger Hauptbutton: der Verlauf zieht ein, die Fläche bleibt kräftig. */
  .button:hover:not(:disabled),
  .button:focus-visible:not(:disabled),
  .dark-zone .button:hover:not(:disabled),
  .dark-zone .button:focus-visible:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--marke-hell);
    transform: translateY(-2px);
    box-shadow: 0 0.6rem 1.4rem -0.6rem rgba(18, 103, 184, 0.42);
  }

  .button:hover:not(:disabled)::before,
  .button:focus-visible:not(:disabled)::before { transform: scaleX(1); }

  .button:hover:not(:disabled) .button__mark,
  .button:focus-visible:not(:disabled) .button__mark { width: 2.4rem; }

  .button:active:not(:disabled) { transform: translateY(0); }

  /* Textlinks: die Linie läuft rechts hinaus und links wieder herein. */
  .link:hover::after,
  .link:focus-visible::after { animation: linie-durchlauf 0.6s var(--ease); }

  .nav__link:hover::after,
  .nav__link:focus-visible::after { animation: linie-durchlauf 0.6s var(--ease); }

  .nav__cta:hover,
  .nav__cta:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0.45rem 1.1rem -0.5rem rgba(18, 103, 184, 0.38);
  }

  /* Leistungen: der Eintrag färbt sich in Markenfarbe, rückt leicht nach rechts
     und die Grundlinie läuft mit. Ein aufgeklappter Eintrag behält seinen
     Zustand – dort ist die Verschiebung bereits gesetzt. */
  .register__summary:hover,
  .register__summary:focus-visible { background-color: rgba(18, 103, 184, 0.035); }

  .register__item:not([open]) .register__summary:hover .register__name,
  .register__item:not([open]) .register__summary:focus-visible .register__name {
    color: var(--accent);
    transform: translateX(clamp(0.3rem, 1vw, 0.9rem));
  }

  .register__item:not([open]) .register__summary:hover .register__tag,
  .register__item:not([open]) .register__summary:focus-visible .register__tag {
    border-color: var(--accent);
    background-color: rgba(18, 103, 184, 0.08);
  }

  .register__item:not([open]) .register__summary:hover .register__leader { opacity: 0.45; }

  .register__item:hover::before { width: 100%; }

  /* Beiträge: Titel rückt nach, das Bild zieht sanft heran. */
  .news-card__title { transition: transform 0.4s var(--ease), color 0.35s var(--ease); }

  .news-card:hover .news-card__title { transform: translateX(0.3rem); }

  .news-card:hover .news-card__media img { transform: scale(1.04); }

  .news-card__media { position: relative; }

  /* Die Bildfläche bekommt beim Überfahren eine feine Kante in Markenfarbe. */
  .news-card__media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--marke-verlauf);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
  }

  .news-card:hover .news-card__media::after { transform: scaleX(1); }

  /* Fußbereich und Kontaktangaben */
  .colophon__list a:hover,
  .colophon__list button:hover,
  .contact-details a:hover {
    background-size: 100% 1px;
    transform: translateX(0.2rem);
  }

  .social__item:hover::before,
  a.social__item:focus-visible::before { transform: scaleY(1); }

  a.social__item:hover,
  a.social__item:focus-visible {
    background: transparent;
    border-color: var(--marke-hell);
    color: #fff;
  }

  a.social__item:hover svg { transform: translateY(-2px) scale(1.08); }

  /* Partnerlogos im Laufband heben sich einzeln hervor. */
  .partner-marquee__list li { transition: transform 0.4s var(--ease); }
  .partner-marquee__list li:hover { transform: translateY(-4px); }
}

@keyframes linie-durchlauf {
  0%   { transform: scaleX(1); transform-origin: right center; }
  48%  { transform: scaleX(0); transform-origin: right center; }
  52%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
  .button::before,
  .social__item::before { transition: none; }

  .link:hover::after,
  .nav__link:hover::after { animation: none; }

  .button:hover:not(:disabled),
  .nav__cta:hover,
  .partner-marquee__list li:hover { transform: none; }
}