/* VidaOne — main stylesheet
   Black, white, one highlighter. Fonts are self-hosted (SIL OFL 1.1). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
}

:root {
  --black: #111111;
  --white: #ffffff;
  --grey-bg: #f3f3f0;
  --grey-line: #d6d6d2;
  --grey-text: #5a5a56;
  --grey-text-dark: #a9a9a4;
  --wall: #e3e3df;
  --marker: #ffe500;

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(20px, 3.6vw, 56px);
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Keeps the footer at the bottom on short pages (404, form response). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--marker); color: var(--black); }

:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--marker); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--black);
  color: var(--white);
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */

.h1, .h2 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.5rem, 5.6vw, 5.25rem); }
.h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); }
.h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.label {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid currentColor;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lead { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.5; }

/* The highlighter. Without JS it is simply there; with JS it is drawn once
   when the text scrolls into view. */
mark {
  color: var(--black);
  background: linear-gradient(var(--marker), var(--marker)) 0 58% / 100% 78% no-repeat;
  padding: 0 0.12em;
  margin: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js mark[data-draw] { background-size: 0% 78%; transition: background-size 0.7s cubic-bezier(0.6, 0, 0.2, 1) 0.15s; }
.js mark[data-draw].is-drawn { background-size: 100% 78%; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--marker); color: var(--black); }
.btn--line { background: transparent; color: var(--black); }
.btn--line:hover { background: var(--black); color: var(--white); }
.btn--marker { background: var(--marker); border-color: var(--marker); color: var(--black); }
.btn--marker:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--small { min-height: 40px; padding: 0 16px; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--black);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.logo {
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.logo span { background: var(--marker); color: var(--black); padding: 0 0.12em; margin-left: 0.06em; }

.nav { display: flex; align-items: center; align-self: stretch; gap: clamp(16px, 2.4vw, 36px); }
/* Bewusst nur die direkten Kinder: die Links im Leistungsfeld sind zwar auch
   Nachfahren von .nav, bringen aber ihre eigene Typografie mit und wuerden
   hier sonst in Grossbuchstaben und ohne Zeilenumbruch landen. */
.nav > a:not(.btn),
.nav__drop > a {
  padding: 6px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav > a:not(.btn):hover,
.nav > a[aria-current="true"],
.nav__drop > a:hover,
.nav__drop:hover > a,
.nav__drop:focus-within > a,
.nav__drop > a[aria-current="true"] { border-bottom-color: var(--black); }

/* The three buttons are one block, not three separate stops in the navigation.
   They keep their own tight gap while the text links beside them stay on the
   wider rhythm. */
.nav__cta { display: flex; align-items: center; gap: 10px; }

/* ---------- Leistungsfeld im Kopf ----------

   Aufgeklappt wird mit CSS, nicht mit JavaScript: :hover fuer die Maus,
   :focus-within fuer die Tastatur. Letzteres greift schon, sobald der Link
   "Leistungen" selbst den Fokus hat — erst dadurch wird das Feld sichtbar und
   seine Links kommen in die Tab-Reihenfolge.

   Zwei Dinge entscheiden darueber, ob sich das Feld fluessig anfuehlt. Der
   Zeigebereich ist die volle Hoehe der Leiste (align-self: stretch), nicht nur
   die Zeile des Linktextes — sonst verlaesst der Zeiger ihn auf dem Weg nach
   unten und das Feld flackert. Und das Feld haengt an .header, nicht am
   Wrapper: .header ist sticky und damit positioniert, also spannt left/right
   ueber die volle Breite statt nur ueber den Textbereich. */

.nav__drop { position: static; display: flex; align-items: center; align-self: stretch; }

.drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: clamp(26px, 2.6vw, 44px) clamp(20px, 2vw, 30px);
  background: var(--white);
  border-bottom: 1px solid var(--black);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav__drop:hover .drop,
.nav__drop:focus-within .drop { visibility: visible; opacity: 1; transform: none; }
/* Escape schliesst das Feld, ohne dass der Fokus die Leiste verlaesst. Muss
   nach den beiden Regeln darueber stehen: gleiche Spezifitaet, also
   entscheidet die Reihenfolge. */
.nav__drop.is-shut .drop { visibility: hidden; opacity: 0; transform: translateY(-8px); }

/* Die Spalten wachsen mit dem Platz, statt auf drei festgelegt zu sein: bei
   einer neuen Gruppe bricht nichts, und auf einem 1280er Schirm stehen sie
   genauso nebeneinander wie auf einem breiten. */
.drop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px clamp(28px, 3vw, 64px);
}
.drop__cat {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--black);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drop__list a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-line);
  text-decoration: none;
}
.drop__list li:last-child a { border-bottom: 0; }
/* Derselbe Textmarker wie auf den Leistungskacheln: er faehrt unter dem Namen
   durch, statt den ganzen Streifen einzufaerben. */
.drop__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  background: linear-gradient(var(--marker), var(--marker)) 0 58% / 0% 78% no-repeat;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  transition: background-size 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
.drop__list a:hover .drop__name,
.drop__list a:focus-visible .drop__name { background-size: 100% 78%; }
.drop__desc {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--grey-text);
}
/* Steht bewusst ausserhalb des Rasters. Ein Element ueber alle Spalten macht
   jede Spur belegt, und auto-fit kann dann keine leere mehr einklappen — die
   drei Gruppen haetten links gedraengt gestanden und rechts eine Geisterspalte
   frei gelassen. */
.drop__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(28px, 3vw, 64px);
  margin: clamp(22px, 2vw, 30px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--black);
}
.drop__foot a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.drop__foot a:hover { border-bottom-color: var(--black); }
.drop__foot small { margin-right: 8px; color: var(--grey-text); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--black); transition: transform 0.25s, top 0.25s; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: calc(var(--header-h) + 1px) 0 0 0;
  z-index: 49;
  display: none;
  flex-direction: column;
  padding: 12px var(--gutter) 32px;
  background: var(--white);
  overflow-y: auto;
}
.menu.is-open { display: flex; }
.menu a {
  padding: 18px 0;
  border-bottom: 1px solid var(--grey-line);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.menu a:last-child { border-bottom: 0; }

/* Im Überlagerungsmenü stehen dieselben Leistungen, nur klein: die grosse
   Zeile bleibt der Weg zur Übersicht, darunter geht es direkt auf die Seite.
   Zwei Spalten, sobald das Gerät breit genug dafür ist. */
.menu__group { border-bottom: 0; padding-bottom: 6px; }
.menu__subs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 clamp(16px, 4vw, 32px);
  margin: 0 0 4px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--grey-line);
}
.menu__subs a {
  padding: 10px 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--grey-text);
}
.menu__subs a:hover { color: var(--black); }

/* Earlier than the 940px used elsewhere: with six links and the group of three
   buttons the bar runs out of room at about 1175px, measured, and the switch
   sits at 1200 so there is room left for a fallback font that is wider than
   Archivo. Links and buttons have fixed widths, only the gaps grow with the
   viewport, which is what makes that number measurable. It was 1100 while the
   bar had five links; the wiki added the sixth, and at 1101px the last button
   was cut off. Changing it means changing the media query in main.js as well:
   that one closes the mobile menu as soon as the bar is back. */
@media (max-width: 1200px) {
  .js .nav { display: none; }
  .js .burger { display: block; }
  /* Ohne JS bleiben die Links stehen, der Kopf ist dann aber nicht mehr
     sticky — das Feld haette nichts, woran es haengt. Gebraucht wird es hier
     auch nicht: dieselben Leistungen stehen im Überlagerungsmenü. */
  .drop { display: none; }
  /* Without JS there is no burger: the links simply wrap below the logo. */
  .no-js .header { position: static; }
  .no-js .header__bar { height: auto; flex-wrap: wrap; padding-block: 14px; }
  .no-js .nav { flex-wrap: wrap; gap: 8px 18px; }
  /* Only here may the group break: in the bar it has to stay one row, so that
     a bar which is too narrow shows it instead of hiding it in a second line. */
  .no-js .nav__cta { flex-wrap: wrap; }
}

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

.hero { padding-top: clamp(40px, 6vw, 88px); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 32px clamp(32px, 6vw, 112px);
}
.hero__side { display: grid; gap: 28px; padding-bottom: 6px; }
.hero__side p { color: var(--grey-text); }
.hero__side strong { color: var(--black); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* The wall: everyone else in grey, one name marked. */
.wall {
  margin-top: clamp(44px, 6vw, 88px);
  border-top: 1px solid var(--black);
  padding-top: clamp(14px, 2vw, 26px);
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.6rem, 9.2vw, 9rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--wall);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.wall__row { display: flex; overflow: hidden; }
.wall__track { flex: none; display: flex; animation: wall 60s linear infinite; }
.wall__row--r .wall__track { animation-direction: reverse; }
.wall__row--slow .wall__track { animation-duration: 85s; }
.wall__track span,
.wall__focus span { padding-right: 0.22em; }
@keyframes wall { to { transform: translateX(-50%); } }

.wall__focus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  overflow: hidden;
}
.wall__focus > div { display: flex; overflow: hidden; }
.wall__focus > div:first-child { justify-content: flex-end; }
.wall__focus mark { margin: 0 0.22em 0 0; padding: 0 0.1em; background-position: 0 50%; background-size: 100% 86%; }
.js .wall__focus mark[data-draw] { background-size: 0% 86%; transition-delay: 0.5s; }
.js .wall__focus mark[data-draw].is-drawn { background-size: 100% 86%; }

.wall-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-block: 14px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  margin-top: clamp(14px, 2vw, 26px);
  font-size: 0.8125rem;
  color: var(--grey-text);
}
.wall-caption b { color: var(--black); font-weight: 600; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 9vw, 144px); }
.section--grey { background: var(--grey-bg); }
.section--marker { background: var(--marker); }
.dark { background: var(--black); color: var(--white); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 20px clamp(32px, 6vw, 112px);
  margin-bottom: clamp(36px, 5vw, 72px);
}
.section__head .h2 { margin-top: 22px; }
.section__head > p { color: var(--grey-text); }
.section--marker .section__head > p { color: var(--black); }
@media (max-width: 940px) { .section__head { grid-template-columns: 1fr; } }

/* Statement */
.statement { padding-block: clamp(72px, 9vw, 144px) 0; }
.statement p {
  max-width: 24em;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.625rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* ---------- Services ---------- */

.services { border-top: 1px solid var(--black); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 20px clamp(24px, 4vw, 72px);
  padding-block: clamp(28px, 3.6vw, 52px);
  border-bottom: 1px solid var(--black);
}
.service__name {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.service__name small {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--grey-text);
}
.service__name span { background: linear-gradient(var(--marker), var(--marker)) 0 58% / 0% 78% no-repeat; transition: background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1); padding: 0 0.08em; margin: 0 -0.08em; }
.service:hover .service__name span { background-size: 100% 78%; }
.service__text { font-size: 1.125rem; line-height: 1.5; }
.service__list li { padding: 9px 0; border-bottom: 1px solid var(--grey-line); font-size: 0.9375rem; font-weight: 500; }
.service__list li:first-child { padding-top: 2px; }
.service__list li:last-child { border-bottom: 0; }
@media (max-width: 940px) {
  .service { grid-template-columns: 1fr; }
}

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

.refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--black);
}
.refs__item {
  /* These logos run from 13:1 to 1:1, so a shared box height would not give them
     a shared optical weight. Each shape gets the cap height it needs instead: an
     open badge may fill the box, a solid monogram of the same height would shout,
     and a wordmark is carried by its width anyway. */
  --cap: 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 32px clamp(20px, 2.2vw, 36px);
  border-bottom: 1px solid var(--black);
  border-left: 1px solid var(--black);
  transition: background-color 0.15s;
}
.refs__item--wordmark { --cap: 40px; }
.refs__item--combined { --cap: 66px; }
.refs__item--dense { --cap: 78px; }
.refs__item:nth-child(3n+1) { border-left: 0; }
.refs__item:hover { background: var(--white); }

.refs__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
}
.refs__logo img { width: auto; height: auto; max-width: 100%; max-height: var(--cap); }

.refs__name {
  padding: 0 0.3em;
  background: linear-gradient(var(--marker), var(--marker)) 0 58% / 0% 78% no-repeat;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--grey-text);
  transition: background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1), color 0.15s;
}
.refs__item:hover .refs__name { background-size: 100% 78%; color: var(--black); }

@media (max-width: 940px) {
  .refs { grid-template-columns: 1fr 1fr; }
  .refs__item { padding: 26px 20px; }
  .refs__item:nth-child(3n+1) { border-left: 1px solid var(--black); }
  .refs__item:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 520px) {
  .refs__item { --cap: 64px; gap: 16px; }
  .refs__item--wordmark { --cap: 26px; }
  .refs__item--combined { --cap: 46px; }
  .refs__item--dense { --cap: 54px; }
  .refs__logo { height: 66px; }
  .refs__name { font-size: 0.75rem; letter-spacing: 0.08em; }
}

/* ---------- Check ---------- */

.check {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 32px clamp(32px, 6vw, 112px);
  align-items: start;
}
.check__list { border-top: 2px solid var(--black); }
.check__item { position: relative; display: block; border-bottom: 1px solid var(--black); cursor: pointer; }
.check__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check__item span {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}
.check__item span::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 2px solid var(--black);
  background: transparent center / 18px no-repeat;
}
.check__item input:checked + span::before {
  background-color: var(--black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe500' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
.check__item:hover span::before { box-shadow: inset 0 0 0 2px var(--black); }
.check__item input:focus-visible + span { outline: 3px solid var(--black); outline-offset: 2px; }

.check__result { position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(24px, 2.6vw, 36px); background: var(--black); color: var(--white); }
.check__score { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-head); line-height: 0.85; }
.check__score output { font-stretch: 62%; font-weight: 800; font-size: clamp(5.5rem, 9vw, 8.5rem); color: var(--marker); font-variant-numeric: tabular-nums; }
.check__score span { font-weight: 500; font-size: 1.375rem; letter-spacing: -0.02em; }
.check__meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 22px 0 24px; }
.check__meter i { height: 10px; background: #3a3a38; }
.check__meter i.is-on { background: var(--marker); }
.check__verdict { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.check__text { margin: 10px 0 24px; color: var(--grey-text-dark); font-size: 1rem; }
.check__note { margin-top: 16px; font-size: 0.8125rem; color: var(--grey-text-dark); }
.no-js #check { display: none; }

@media (max-width: 940px) {
  .check { grid-template-columns: 1fr; }
  .check__result { position: static; }
}

/* ---------- Process ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.step { padding: 28px clamp(16px, 2vw, 32px) 36px; border-left: 1px solid var(--black); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__num {
  display: block;
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(4rem, 6.4vw, 6.5rem);
  line-height: 0.9;
}
.step .h3 { margin: 22px 0 10px; }
.step p { font-size: 1rem; color: var(--grey-text); }
@media (max-width: 940px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-left: 0; padding-left: 0; border-top: 1px solid var(--black); }
  .step:nth-child(-n+2) { border-top: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--black); padding-left: clamp(16px, 4vw, 32px); }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step:nth-child(even) { border-left: 0; padding-left: 0; }
  .step:nth-child(2) { border-top: 1px solid var(--black); }
}

/* ---------- Videoliste ----------

   Dieselbe Bauart wie .services: Haarlinie, Nummer, Textmarker beim
   Ueberfahren. Bewusst ohne Vorschaubilder — die CSP laesst nur Bilder von
   der eigenen Domain zu, und die Seite macht keine Anfragen an Dritte. */

.videos { border-top: 1px solid var(--black); }
.video { border-bottom: 1px solid var(--black); }
.video a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px clamp(16px, 2.4vw, 40px);
  padding-block: clamp(16px, 1.8vw, 26px);
  text-decoration: none;
}
.video__num {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--grey-text);
}
.video__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
  /* Der Marker faehrt nur unter dem Titel durch, nicht ueber die ganze
     Zeile — deshalb liegt er hier und nicht auf dem Link. */
  background: linear-gradient(var(--marker), var(--marker)) 0 58% / 0% 78% no-repeat;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  transition: background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.video a:hover .video__title,
.video a:focus-visible .video__title { background-size: 100% 78%; }
.video__date {
  font-size: 0.8125rem;
  color: var(--grey-text);
  white-space: nowrap;
}
.videos__more { margin-top: clamp(28px, 3vw, 44px); }

/* Auf schmalen Geraeten steht das Datum unter dem Titel statt daneben: eine
   dritte Spalte laesst von einem langen Titel sonst zwei Woerter je Zeile. */
@media (max-width: 640px) {
  .video a { grid-template-columns: auto minmax(0, 1fr); }
  .video__date { grid-column: 2; }
}

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 6vw, 112px); align-items: start; }
.about .h2 { margin-top: 22px; }
.about__body > p + p { margin-top: 1.1em; }
.about__body > p:not(.lead) { color: var(--grey-text); }
.about__sign { margin-top: 28px; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
.about__sign small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--grey-text); }
.principles { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--black); }
.principles li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--grey-line); }
.principles b { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
.principles span { color: var(--grey-text); }
@media (max-width: 940px) { .about { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .principles li { grid-template-columns: 1fr; gap: 4px; } }

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

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 112px); align-items: start; }
.faq .h2 { margin-top: 22px; }
.faq__list { border-top: 1px solid var(--black); }
.faq details { border-bottom: 1px solid var(--black); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(var(--black), var(--black)) center / 100% 2px no-repeat,
    linear-gradient(var(--black), var(--black)) center / 2px 100% no-repeat;
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 38em; padding-bottom: 26px; color: var(--grey-text); }
@media (max-width: 940px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 112px); align-items: start; }
.contact .h1 { margin-top: 22px; }
.contact__lead { margin-top: 24px; max-width: 26em; color: var(--grey-text-dark); }
.contact__direct { margin-top: 40px; border-top: 1px solid #3a3a38; }
.contact__direct a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #3a3a38;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.contact__direct a:hover { color: var(--marker); }
.contact__direct small { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-text-dark); }

.form { display: grid; gap: 26px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-text-dark); }
.field label small, .field legend small { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid #77776f;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-size: 1.125rem;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8d8d86; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--white); }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--marker); box-shadow: 0 1px 0 var(--marker); }
fieldset.field { margin: 0; padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: block; padding: 9px 14px; border: 1px solid #77776f; font-size: 0.9375rem; font-weight: 500; }
.chip:hover span { border-color: var(--white); }
.chip input:checked + span { background: var(--marker); border-color: var(--marker); color: var(--black); }
.chip input:focus-visible + span { outline: 3px solid var(--marker); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.form__hint { flex: 1 1 240px; font-size: 0.8125rem; color: var(--grey-text-dark); }
.form__hint a { color: var(--white); text-underline-offset: 3px; }
.form__status { font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-ok { color: var(--marker); }
.form__status.is-error { color: #ff9a8a; }
.form__status a { color: var(--white); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 940px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Geführtes Formular (/support) ----------
   Drei Schritte, die ohne JavaScript schlicht untereinander stehen: dann ist
   es ein gewöhnliches Formular mit drei Abschnitten und einem Absenden-Knopf.
   Erst .js blendet die Schritte einzeln ein. */

.wizard__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 34px;
  border: 1px solid #3a3a38;
  background: #3a3a38;
}
.no-js .wizard__steps { display: none; }
.wizard__steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  background: var(--black);
  color: var(--grey-text-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wizard__steps b {
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0;
}
.wizard__steps li.is-done { color: var(--white); }
.wizard__steps li.is-current { background: var(--marker); color: var(--black); }

.js .wizard__step { display: none; }
.js .wizard__step.is-current { display: block; }
.no-js .wizard__step + .wizard__step { margin-top: 44px; }

.wizard fieldset { margin: 0; padding: 0; border: 0; }
.wizard legend {
  padding: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--white);
}
.wizard__hint { margin-bottom: 22px; max-width: 34em; font-size: 0.9375rem; color: var(--grey-text-dark); }

.wizard__group + .wizard__group { margin-top: 26px; }
.wizard__group > p {
  padding-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-text-dark);
}

.pick { border-top: 1px solid #3a3a38; }
.pick__item { position: relative; display: block; border-bottom: 1px solid #3a3a38; cursor: pointer; }
.pick__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__item > span {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 16px;
  padding: 15px 0;
}
.pick__item > span::before {
  content: "";
  margin-top: 3px;
  width: 22px;
  height: 22px;
  border: 2px solid #77776f;
  background: transparent center / 14px no-repeat;
}
.pick__item:hover > span::before { border-color: var(--white); }
.pick__item input:checked + span::before {
  border-color: var(--marker);
  background-color: var(--marker);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
.pick__item input:focus-visible + span { outline: 3px solid var(--marker); outline-offset: 2px; }
.pick__name { font-size: 1.0625rem; font-weight: 600; color: var(--white); }
.pick__desc { display: block; margin-top: 3px; font-size: 0.9375rem; font-weight: 400; color: var(--grey-text-dark); }

.wizard__nav { display: none; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.js .wizard__nav { display: flex; }
/* Die Linien-Variante ist für weissen Grund gebaut; hier steht sie auf Schwarz. */
.dark .btn--line { border-color: var(--white); color: var(--white); }
.dark .btn--line:hover { background: var(--white); color: var(--black); }
.wizard__error { margin-top: 16px; color: #ff9a8a; font-weight: 500; }
.wizard__error:empty { display: none; }

@media (max-width: 520px) {
  .wizard__steps { grid-template-columns: 1fr; }
  .wizard__steps li { padding: 10px 12px; }
}

/* ---------- Footer ---------- */

.footer { background: var(--black); color: var(--grey-text-dark); font-size: 0.875rem; }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 28px;
  border-top: 1px solid #3a3a38;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); }

/* ---------- Legal, 404, form response ---------- */

.page-head { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--black); }
.page-head .h1 { margin-top: 22px; }
.page-head p { margin-top: 18px; color: var(--grey-text); }

.legal { padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 128px); }
.legal__body { max-width: 44rem; }
.legal__body h2 { margin: 52px 0 14px; font-family: var(--font-head); font-weight: 600; font-size: 1.625rem; letter-spacing: -0.025em; line-height: 1.15; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin: 28px 0 8px; font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.legal__body p, .legal__body ul, .legal__body address, .legal__body dl { margin-bottom: 16px; }
.legal__body ul { padding-left: 1.2em; list-style: disc; }
.legal__body li { margin-bottom: 6px; }
.legal__body a { text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--marker); }
.legal__body a:hover { background: var(--marker); }
.legal__body address { font-style: normal; }
.legal__body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; }
.legal__body dt { color: var(--grey-text); }

.notice { min-height: 70vh; display: grid; align-content: center; padding-block: clamp(64px, 9vw, 128px); }
.notice .h1 { margin: 22px 0 0; max-width: 14em; }
.notice p { margin: 24px 0 32px; max-width: 32em; color: var(--grey-text); }

/* ---------- Wiki: Übersicht ----------
   Ein Verzeichnis, kein Blog. Deshalb keine Kacheln mit Vorschaubildern,
   sondern nummerierte Kategorien und darunter Zeilen mit Haarlinien — dieselbe
   Ordnung wie bei den Leistungen, nur dichter. */

.wiki { padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 120px); }

.wiki__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 40px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--black);
}

.wiki-search { flex: 1 1 320px; max-width: 420px; gap: 8px; }
.wiki-search label { color: var(--grey-text); }
.wiki-search input {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--grey-line);
  background: transparent;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.wiki-search input::placeholder { color: #9b9b95; font-weight: 400; }
.wiki-search input:hover { border-bottom-color: var(--black); }
.wiki-search input:focus { outline: 0; border-bottom-color: var(--black); box-shadow: 0 1px 0 var(--black); }
/* Das X des Suchfelds sitzt in WebKit sonst auf der Grundlinie des Textes. */
.wiki-search input::-webkit-search-cancel-button { cursor: pointer; }

.wiki-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.wiki-filter__chip {
  padding: 8px 14px;
  border: 1px solid var(--grey-line);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.wiki-filter__chip:hover { border-color: var(--black); }
.wiki-filter__chip.is-on { background: var(--marker); border-color: var(--marker); }
/* Ohne JavaScript filtert nichts, also steht die Leiste auch nicht da. Die
   Kategorien bleiben über die Sprungmarken erreichbar. */
.no-js .wiki-filter, .no-js .wiki-search, .no-js .wiki__status { display: none; }

/* Sagt beim Filtern, wie viele Beitraege uebrig sind, und traegt bei null
   Treffern die Erklaerung. Ungefiltert ist sie leer — und damit weg. */
.wiki__status { margin-top: 40px; max-width: 34em; color: var(--grey-text); }
.wiki__status:empty { display: none; }

.wiki-cat { margin-top: clamp(48px, 6vw, 80px); }
.wiki-cat.is-off { display: none; }
.wiki-cat__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--black);
}
.wiki-cat__num {
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.8;
  color: var(--grey-line);
}
.wiki-cat__head p { margin-top: 10px; max-width: 42em; color: var(--grey-text); }

.wiki-item { border-bottom: 1px solid var(--grey-line); }
.wiki-item.is-off { display: none; }
.wiki-item a {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
  gap: 6px clamp(16px, 2.6vw, 40px);
  align-items: baseline;
  padding: 18px 0;
  text-decoration: none;
}
.wiki-item b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  background: linear-gradient(var(--marker), var(--marker)) 0 88% / 0% 34% no-repeat;
  transition: background-size 0.3s cubic-bezier(0.6, 0, 0.2, 1);
  padding: 0 0.08em;
  margin: 0 -0.08em;
}
.wiki-item a:hover b, .wiki-item a:focus-visible b { background-size: 100% 34%; }
.wiki-item span { color: var(--grey-text); font-size: 1rem; }
.wiki-item small { color: var(--grey-text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

@media (max-width: 940px) {
  .wiki-item a { grid-template-columns: minmax(0, 1fr); }
  .wiki-item small { display: none; }
  .wiki-cat__head { grid-template-columns: 1fr; gap: 6px; }
  .wiki-cat__num { font-size: 2rem; }
}

/* ---------- Wiki: ein Beitrag ---------- */

.page-head--article { border-bottom: 0; }
.page-head--article .lead { margin-top: 20px; max-width: 40em; color: var(--grey-text); }
.h1--article {
  margin-top: 22px;
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  max-width: 18em;
}

.page-head .article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-line);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-text);
}
.article__meta span + span { padding-left: 18px; border-left: 1px solid var(--grey-line); }

.article { padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 88px);
  align-items: start;
}
/* Ohne Inhaltsverzeichnis (kurze Beiträge) bleibt die Spalte leer; dann darf
   der Text sie einnehmen. */
.article__grid > .article__body:first-child { grid-column: 1 / -1; }

.article__side { position: sticky; top: calc(var(--header-h) + 28px); }
.toc__list { margin-top: 18px; border-top: 1px solid var(--black); counter-reset: none; }
.toc__list li { border-bottom: 1px solid var(--grey-line); }
.toc__list a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 4px;
  padding: 10px 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--grey-text);
}
.toc__list a:hover { color: var(--black); }
.toc__list span { font-variant-numeric: tabular-nums; color: #a9a9a4; }

/* minmax(0, 1fr) und nicht 1fr: ein Grid-Track mit automatischem Minimum
   wächst auf die Breite seines breitesten Inhalts. Eine Tabelle mit
   IPv6-Adressen oder ein Befehl zum Abtippen würde die ganze Seite auf dem
   Telefon breiter machen, statt selbst zu scrollen. */
@media (max-width: 1100px) {
  .article__grid { grid-template-columns: minmax(0, 1fr); }
  .article__side { position: static; }
  .toc { padding: 22px clamp(18px, 3vw, 28px) 4px; background: var(--grey-bg); }
}

/* Der Fließtext selbst erbt von .legal__body; hier steht nur, was ein
   Anleitungstext zusätzlich braucht. */
.article__body { max-width: 46rem; }
.article__body > h2:first-child { margin-top: 0; }
.article__body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body ol { margin-bottom: 16px; padding-left: 1.4em; list-style: decimal; }
.article__body ol li { margin-bottom: 8px; padding-left: 0.2em; }
.article__body ol li::marker { font-family: var(--font-head); font-weight: 600; }
.article__body strong { font-weight: 600; }
.article__body code {
  padding: 1px 5px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-line);
  /* Ohne eigene Farbe erbt der Schnipsel die des Kastens, in dem er steht.
     Im schwarzen Hinweis war das helle Schrift auf hellem Feld. */
  color: var(--black);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  word-break: break-word;
}

/* Befehle zum Abtippen. Schwarzer Block, damit klar ist: das hier gehört in
   ein Terminal und nicht in ein Textfeld. */
.code {
  margin: 0 0 22px;
  padding: 18px clamp(16px, 2.4vw, 24px);
  background: var(--black);
  color: #f3f3f0;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
}
.code code { padding: 0; background: none; border: 0; font-size: inherit; color: inherit; }
.code b { color: var(--marker); font-weight: 400; }
.code i { color: #a9a9a4; font-style: normal; }

/* Tabellen tragen hier die eigentliche Antwort (Ports, Adressen). Auf schmalen
   Geräten scrollt der Kasten, statt die Spalten unleserlich zu quetschen. */
.data { margin-bottom: 22px; overflow-x: auto; }
.data table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data th, .data td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--grey-line);
  text-align: left;
  vertical-align: top;
}
.data th {
  border-bottom: 1px solid var(--black);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data td code { white-space: nowrap; }
.data tr:last-child td { border-bottom: 0; }

.note {
  margin: 0 0 22px;
  padding: 18px 22px;
  border-left: 4px solid var(--marker);
  background: var(--grey-bg);
}
.note > b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.note p:last-child { margin-bottom: 0; }
.note--warn { background: var(--black); color: #e6e6e2; }
.note--warn > b { color: var(--white); }
.note--warn a { color: var(--white); }
.note--warn a:hover { background: var(--marker); color: var(--black); }
/* Derselbe Schnipsel, nur andersherum: auf Schwarz braucht er ein dunkles
   Feld, sonst leuchtet ein heller Block mitten im Absatz. */
.note--warn code { background: #2a2a28; border-color: #55554f; color: #f3f3f0; }

.article__foot {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-line);
  font-size: 0.875rem;
  color: var(--grey-text);
}

.wiki-cta .h2 { margin-top: 22px; }
.wiki-cta .lead { margin-top: 22px; max-width: 40em; color: var(--grey-text-dark); }
.wiki-cta .hero__cta { margin-top: 36px; }

/* ---------- Motion & print ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js mark[data-draw] { background-size: 100% 78%; }
  .js .wall__focus mark[data-draw] { background-size: 100% 86%; }
}

@media print {
  .header, .menu, .wall, .form, .footer nav { display: none; }
  .dark, .section--marker, .section--grey { background: #fff; color: #000; }
  .js mark[data-draw] { background-size: 100% 78%; }
}