/*
 * Gestaltung der Seite. Farbwerte, Schriftfamilien und Abstaende stammen aus
 * dem abgenommenen Prototyp. Die Auszeichnung darunter ist neu gebaut, damit
 * sie ohne JavaScript traegt: aufklappbare Zeilen sind details Elemente, der
 * Filter sind Optionsfelder, die Regler sind echte Schieberegler.
 */

/* ---------- Werkzeuge ---------- */

/* Nur fuer Bildschirmleser, optisch nicht vorhanden, aber im Baum. */
.nur-fuer-leser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.abschnitt {
  padding-block: 96px;
}

.abschnitt-schluss {
  padding-block-start: 0;
}

@media (width <= 800px) {
  .abschnitt {
    padding-block: 64px;
  }
}

.abschnittskopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 68px;
  flex-wrap: wrap;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
}

h2 em {
  font-style: italic;
  color: var(--gruen);
}

.anriss {
  margin: 0;
  color: var(--gedaempft);
  max-width: 34ch;
  font-size: 15.5px;
}

.anriss-gross {
  font-size: 20px;
  max-width: 52ch;
}

.knopf {
  display: inline-block;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 2px;
  white-space: nowrap;
}

.knopf-primaer {
  background: var(--gruen);
  color: var(--auf-gruen);
}

.knopf-primaer:hover {
  background: var(--signal);
  color: var(--auf-signal);
}

.knopf-sekundaer {
  border: 1px solid var(--tinte);
  color: var(--tinte);
}

.knopf-sekundaer:hover {
  background: var(--tinte);
  color: var(--papier);
}

/* ---------- Kopfbereich mit Navigation ---------- */

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--haar);
}

.navzeile {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 70px;
}

.marke {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marke::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--signal);
  border-radius: 50%;
}

.navpunkte {
  display: flex;
  gap: 24px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.navpunkte a {
  text-decoration: none;
  color: var(--gedaempft);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.navpunkte a:hover {
  color: var(--tinte);
  border-color: var(--signal);
}

@media (width <= 920px) {
  .navpunkte {
    display: none;
  }

  .sprachwahl {
    margin-left: auto;
  }
}

/*
 * Schmales Geraet. Marke, Sprachwahl und Handlungsaufforderung passen bei
 * 360 Pixeln nicht nebeneinander in voller Groesse. Sie werden kleiner, und
 * die Zeile darf notfalls umbrechen, statt aus dem Bild zu laufen.
 */
@media (width <= 560px) {
  .navzeile {
    gap: 12px;
    height: auto;
    min-height: 64px;
    padding-block: 10px;
    flex-wrap: wrap;
  }

  .marke {
    font-size: 19px;
    gap: 8px;
  }

  .marke::before {
    width: 9px;
    height: 9px;
  }

  .sprachwahl span,
  .sprachwahl a {
    padding: 4px 7px;
  }

  .navaktion {
    font-size: 13px;
    padding: 9px 12px;
  }
}

.sprachwahl {
  display: flex;
  gap: 2px;
}

.sprachwahl span,
.sprachwahl a {
  border: 1px solid var(--haar);
  color: var(--gedaempft);
  font-size: 12.5px;
  padding: 5px 9px;
  text-decoration: none;
}

.sprachwahl [aria-current="true"] {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}

.navaktion {
  background: var(--gruen);
  color: var(--auf-gruen);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 2px;
  white-space: nowrap;
}

.navaktion:hover {
  background: var(--signal);
  color: var(--auf-signal);
}

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

.hero {
  /* padding-block, nicht die Kurzform: die Kurzform loescht den seitlichen
     Satzspiegel aus .mass, und der Kopfbereich klebt dann am Rand. */
  padding-block: 104px 76px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}

@media (width <= 940px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 56px 40px;
  }
}

.augenbraue {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.augenbraue::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--signal);
  flex: none;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 em {
  font-style: italic;
  color: var(--gruen);
}

.herotext .anriss {
  margin: 30px 0 38px;
}

.heroaktionen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.portraet {
  position: relative;
  margin: 0;
}

.portraet img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

.notiz {
  margin: 0;
  position: absolute;
  left: -18px;
  bottom: 26px;
  background: var(--signal);
  color: var(--auf-signal);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.3;
  max-width: 190px;
  border-radius: 2px;
  text-align: left;
}

.notiz b {
  display: block;
  font-size: 21px;
  font-family: var(--serif);
  font-weight: 400;
}

@media (width <= 940px) {
  .portraet {
    max-width: min(380px, 100%);
  }

  .notiz {
    left: auto;
    right: -10px;
  }
}

/*
 * Bei 360 Pixeln darf die Notiz nicht mehr ueber das Portraet hinausragen,
 * sonst laeuft sie aus dem Bild.
 */
@media (width <= 560px) {
  .notiz {
    right: 0;
    bottom: 12px;
    max-width: min(190px, calc(100% - 24px));
  }
}

/* ---------- Kennzahlenstreifen ---------- */

.kennzahlenstreifen {
  border-top: 1px solid var(--haar);
  border-bottom: 1px solid var(--haar);
  margin-top: 26px;
}

.kennzahlenstreifen ul {
  list-style: none;

  /*
   * margin-block, nicht die Kurzform: die Liste traegt .mass, und die
   * Kurzform wuerde deren margin-inline auto loeschen. Der Streifen saesse
   * dann auf breiten Bildschirmen links statt mittig, waehrend alle anderen
   * Abschnitte zentriert sind. Den seitlichen Abstand liefert ebenfalls
   * .mass, er wird hier nicht wiederholt.
   */
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (width <= 860px) {
  .kennzahlenstreifen ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kennzahlenstreifen li {
  padding: 38px 24px;
  border-right: 1px solid var(--haar);

  /* Zahl und Beschriftung mittig in ihrer Spalte. */
  text-align: center;
}

.kennzahlenstreifen li:last-child {
  border-right: 0;
}

.kennzahlenstreifen b {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.kennzahlenstreifen span {
  font-size: 14px;
  color: var(--gedaempft);
  display: block;
  margin-top: 8px;
}

/* ---------- Leistungen ---------- */

.leistung {
  border-top: 1px solid var(--haar);
}

.leistung:last-child {
  border-bottom: 1px solid var(--haar);
}

.leistung summary {
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  gap: 24px;
  align-items: center;
  padding: 34px 6px;
  cursor: pointer;
  list-style: none;
}

.leistung summary::-webkit-details-marker {
  display: none;
}

.nummer {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gedaempft);
  transition: color 0.25s;
}

.leistungstitel {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.015em;
  transition: transform 0.3s;
}

.leistung:hover .nummer {
  color: var(--signal-text);
}

.leistung:hover .leistungstitel {
  transform: translateX(6px);
}

.zeichen {
  width: 34px;
  height: 34px;
  border: 1px solid var(--haar);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition:
    transform 0.35s,
    background 0.25s,
    border-color 0.25s;
}

.zeichen::before {
  content: "+";
}

.leistung[open] .zeichen {
  transform: rotate(135deg);
  background: var(--signal);
  border-color: var(--signal);
  color: var(--auf-signal);
}

.leistungsinhalt {
  display: grid;
  grid-template-columns: 78px 1fr 320px;
  gap: 24px;
  padding: 0 6px 32px;
}

.leistungsinhalt::before {
  content: "";
}

.leistungstext {
  color: var(--gedaempft);
}

.leistungstext p {
  margin: 0 0 14px;
}

.schlagworte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schlagworte li {
  font-size: 12.5px;
  border: 1px solid var(--haar);
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--gedaempft);
}

.beleg {
  background: var(--gruen-hell);
  border-left: 3px solid var(--gruen);
  padding: 18px 20px;
  border-radius: 2px;
  font-size: 15px;
}

.beleg b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 8px;
}

@media (width <= 900px) {
  .leistung summary {
    grid-template-columns: 52px 1fr 36px;
    gap: 14px;
  }

  .leistungsinhalt {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .leistungsinhalt::before {
    display: none;
  }
}

/* ---------- Koennen ---------- */

.filter {
  border: 0;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.filter label {
  border: 1px solid var(--haar);
  color: var(--gedaempft);
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.filterfeld:checked + label {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}

.filterfeld:focus-visible + label {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--haar);
  border: 1px solid var(--haar);
  border-radius: 4px;
  overflow: hidden;
}

@media (width <= 980px) {
  .kacheln {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 680px) {
  .kacheln {
    grid-template-columns: 1fr;
  }
}

.kachel {
  background: var(--karte);
  padding: 28px 26px;
}

.kachel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.stufe {
  margin-bottom: 16px;
}

.stufenname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin: 0 0 9px;
}

.stufenname i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gruen);
  flex: none;
}

.stufe-mittel .stufenname i {
  background: var(--signal);
  opacity: 0.75;
}

.stufe-klein .stufenname i {
  background: var(--haar);
}

.stufe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.stufe li {
  font-size: 13.5px;
  border: 1px solid var(--haar);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--tinte);
  background: var(--papier);
}

.stufe-gross li {
  border-color: color-mix(in srgb, var(--gruen) 45%, transparent);
}

/*
 * Der Filter arbeitet ohne JavaScript. Das Optionsfeld steht im fieldset und
 * ist damit kein Geschwister der Kacheln, deshalb :has am gemeinsamen
 * Vorfahren statt des Geschwisterselektors.
 */
.koennen:has(#filter-top:checked) .stufe-mittel,
.koennen:has(#filter-top:checked) .stufe-klein {
  display: none;
}

.branchen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.branchen li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--haar);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  background: var(--karte);
}

.staerke {
  display: flex;
  gap: 3px;
}

.staerke i {
  width: 5px;
  height: 14px;
  border-radius: 1px;
  background: var(--haar);
}

.staerke i.an {
  background: var(--gruen);
}

/* ---------- Schrittfuehrung und Diagnose ---------- */

.schritte {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  flex-wrap: wrap;
}

.schritte li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--gedaempft);
  border: 1px solid var(--haar);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  background: var(--karte);
}

.schritte b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--auf-gruen);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
}

.diagnose {
  background: var(--karte);
  border: 1px solid var(--haar);
  border-radius: 4px;
  padding: 40px 44px;
  margin-bottom: 46px;
}

@media (width <= 820px) {
  .diagnose {
    padding: 26px 20px;
  }
}

.frage {
  border: 0;
  margin: 0 0 30px;
  padding: 0;
}

.frage:last-of-type {
  margin-bottom: 0;
}

.frage legend {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  padding: 0;
  margin-bottom: 20px;
}

.antworten {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

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

.antworten label {
  font-size: 14.5px;
  border: 1px solid var(--haar);
  color: var(--tinte);
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}

.antworten label:hover {
  border-color: var(--gruen);
  transform: translateY(-1px);
}

.antwortfeld:checked + label {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--auf-gruen);
}

.antwortfeld:focus-visible + label {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.diagnosehinweis {
  font-size: 14.5px;
  color: var(--gedaempft);
  border-top: 1px solid var(--haar);
  padding-top: 20px;
  margin: 26px 0 0;
}

/* ---------- Konfigurator ---------- */

.konfig {
  background: var(--karte);
  border: 1px solid var(--haar);
  border-radius: 4px;
  overflow: hidden;
}

.konfigkopf {
  padding: 36px 34px;
  border-bottom: 1px solid var(--haar);
  display: flex;
  justify-content: space-between;
  gap: 26px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.konfigkopf h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  margin: 0;
}

.konfigkopf .anriss {
  margin-top: 8px;
  max-width: 46ch;
}

.gesamt {
  text-align: right;
  margin: 0;
}

.gesamt b {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 0.9;
  display: block;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.gesamt span {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.voreinstellungslabel {
  margin: 0;
  padding: 22px 34px 8px;
  font-size: 14px;
  color: var(--gedaempft);
}

.voreinstellungen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 34px 4px;
}

.voreinstellungen button {
  border: 1px solid var(--haar);
  background: transparent;
  color: var(--gedaempft);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.voreinstellungen button:hover {
  border-color: var(--signal);
  color: var(--tinte);
}

.regler {
  padding: 16px 34px 26px;
}

.reglerzeile {
  display: grid;
  grid-template-columns: 230px 1fr 92px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--haar);
}

.reglerzeile:last-child {
  border-bottom: 0;
}

.reglername {
  font-weight: 600;
  font-size: 15.5px;
}

.reglername small {
  display: block;
  font-weight: 400;
  color: var(--gedaempft);
  font-size: 13px;
  margin-top: 2px;
}

.reglerbahn {
  display: block;
}

/*
 * Grundfassung: ein gewoehnlicher Schieberegler. Er laeuft ohne JavaScript,
 * ist mit der Tastatur bedienbar und faerbt den zurueckgelegten Teil ueber
 * accent-color ein. Die Feldereinteilung des Prototyps kommt erst dazu,
 * wenn JavaScript laeuft, siehe unten.
 */
.reglerbahn input[type="range"] {
  width: 100%;
  height: 34px;
  accent-color: var(--gruen);
  cursor: ew-resize;
}

.reglerwert {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: right;
}

.reglerwert b {
  font-weight: 400;
}

.reglerwert small {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gedaempft);
  margin-left: 4px;
}

.konfigfuss {
  padding: 24px 34px 30px;
  background: var(--gruen-hell);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.urteil {
  margin: 0;
  font-size: 15.5px;
  max-width: 58ch;
}

.urteil b {
  color: var(--gruen);
}

.konfigaktionen {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mailhinweis {
  font-size: 12.5px;
  color: var(--gedaempft);
  width: 100%;
  order: 3;
}

.kopieren {
  border: 1px solid color-mix(in srgb, var(--tinte) 25%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: 2px;
  cursor: pointer;
}

.kopieren:hover {
  border-color: var(--gruen);
}

@media (width <= 860px) {
  .reglerzeile {
    grid-template-columns: 1fr 70px;
    gap: 10px;
  }

  .reglerbahn {
    grid-column: 1 / -1;
  }

  .konfigkopf,
  .regler,
  .konfigfuss,
  .voreinstellungslabel,
  .voreinstellungen {
    padding-left: 20px;
    padding-right: 20px;
  }

  .konfigfuss {
    grid-template-columns: 1fr;
  }
}

/* ---------- Belege ---------- */

.belege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

@media (width <= 940px) {
  .belege {
    grid-template-columns: 1fr;
  }
}

.fall {
  background: var(--karte);
  border: 1px solid var(--haar);
  border-radius: 4px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.fall::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
}

.fall:hover::after {
  transform: scaleX(1);
}

.fallzahl {
  font-family: var(--serif);
  font-size: 3.1rem;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

.falleinheit {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin: 0;
}

.falltext {
  margin: 0;
  color: var(--gedaempft);
  font-size: 15.5px;
}

.falltext b {
  color: var(--tinte);
}

.fallquelle {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--haar);
  font-size: 13px;
  color: var(--gedaempft);
}

/* ---------- Ueber mich ---------- */

.person {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

@media (width <= 940px) {
  .person {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

.person p {
  color: var(--gedaempft);
  margin: 0 0 16px;
}

.person h2 + p {
  margin-top: 26px;
}

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

.personliste li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--haar);
  font-size: 15.5px;
}

.personliste li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--signal);
  margin-top: 9px;
  flex: none;
}

/* ---------- Abschluss und Fusszeile ---------- */

.abschluss {
  background: var(--gruen);
  color: var(--auf-gruen);
  border-radius: 4px;
  padding: 76px 64px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
}

@media (width <= 860px) {
  .abschluss {
    grid-template-columns: 1fr;
    padding: 34px 24px;
    gap: 24px;
  }
}

.abschluss h2 {
  color: var(--auf-gruen);
  max-width: 18ch;
}

.abschluss h2 em {
  color: var(--auf-gruen-akzent);
}

.abschluss p {
  color: var(--auf-gruen-leise);
  margin: 18px 0 0;
}

.kontaktzeilen {
  margin: 0;
}

.kontaktzeilen dt {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auf-gruen-akzent);
  margin-top: 14px;
}

.kontaktzeilen dd {
  margin: 0;
}

.kontaktzeilen a {
  display: block;
  color: var(--auf-gruen);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.7rem;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--auf-gruen) 30%, transparent);
}

.kontaktzeilen a:hover {
  color: var(--auf-gruen-hover);
}

.fusszeile {
  /* padding-block, nicht die Kurzform: auf den Rechtstexten und der Dankeseite
     traegt die Fusszeile zusaetzlich .mass, und die Kurzform wuerde deren
     seitlichen Satzspiegel loeschen. Geprueft von tools/pruefe-stil.mjs. */
  padding-block: 56px 72px;
  color: var(--gedaempft);
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fusszeile p {
  margin: 0;
}

.fussverweise {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fusszeile a {
  text-decoration: none;
}

.fusszeile a:hover {
  color: var(--signal-text);
}

/* ---------- Fortschrittsleiste ---------- */

.fortschrittsbalken {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: var(--gelesen, 0%);
  background: var(--signal);
  z-index: 60;
}

.leiste {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
}

.leiste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.leiste a {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--gedaempft);
  position: relative;
  text-decoration: none;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
}

.leiste a[aria-current="true"] {
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.35);
}

.leiste span {
  position: absolute;
  left: 20px;
  top: -6px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--gedaempft);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  background: var(--papier);
  padding: 2px 6px;
}

.leiste a:hover span,
.leiste a:focus-visible span {
  opacity: 1;
}

@media (width <= 1280px) {
  .leiste {
    display: none;
  }
}

/* ---------- Nur mit JavaScript ---------- */

/*
 * Mit Skript bekommt der Regler das Aussehen des Prototyps: eine Bahn mit
 * Feldern, ein Feld je Stunde, und eine gruene Fuellung bis zum Wert.
 * Die Anzahl der Felder kommt aus content/, das Skript setzt --felder.
 * Ohne Skript bleibt der gewoehnliche Schieberegler von oben stehen.
 */
.mit-skript .reglerbahn {
  position: relative;
  height: 34px;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
  touch-action: none;
}

.mit-skript .reglerbahn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--anteil, 0%);
  background: var(--gruen);
  transition: width 0.12s linear;
}

.mit-skript .reglerbahn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / var(--felder, 16) - 1px),
    color-mix(in srgb, var(--tinte) 8%, transparent) calc(100% / var(--felder, 16) - 1px),
    color-mix(in srgb, var(--tinte) 8%, transparent) calc(100% / var(--felder, 16))
  );
}

.mit-skript .reglerbahn input[type="range"] {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  margin: 0;
  height: 34px;
}

.mit-skript .reglerbahn input[type="range"]::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
}

.mit-skript .reglerbahn input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 4px;
  height: 34px;
  background: var(--tinte);
  border: 0;
  border-radius: 1px;
}

.mit-skript .reglerbahn input[type="range"]::-moz-range-track {
  height: 34px;
  background: transparent;
}

.mit-skript .reglerbahn input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 34px;
  background: var(--tinte);
  border: 0;
  border-radius: 1px;
}

/* Diagnose als dreistufiger Ablauf. */
.diagnosezaehler {
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-text);
}

.diagnosezurueck {
  background: transparent;
  border: 0;
  color: var(--gedaempft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  margin-top: 26px;
}

.diagnosezurueck:hover {
  color: var(--tinte);
}

.mit-skript .frage {
  margin-bottom: 0;
}

.mit-skript .diagnosehinweis {
  margin-top: 20px;
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  padding-block: 64px 96px;
  max-width: 820px;
}

.rechtstext h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.rechtstext h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-block: 44px 14px;
  max-width: none;
}

.rechtstext p {
  margin: 0 0 14px;
  max-width: 68ch;
}

.rechtstext ul {
  margin: 0 0 14px;
  padding-left: 22px;
  max-width: 68ch;
}

.rechtstext li {
  margin-bottom: 8px;
}

.stand {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-top: 12px;
}

.einleitung {
  color: var(--gedaempft);
}

/*
 * Der Entwurfshinweis muss auffallen. Er steht so lange auf der Seite, wie
 * in content/rechtstexte.<sprache>.json "entwurf": true gesetzt ist.
 */
.entwurfshinweis {
  border: 2px solid var(--signal);
  border-left-width: 6px;
  background: var(--karte);
  padding: 18px 20px;
  margin: 26px 0 34px;
  font-size: 15.5px;
  max-width: 68ch;
}

/* Fehlende Angaben sind absichtlich nicht zu uebersehen. */
.rechtstext mark {
  background: var(--signal);
  color: var(--auf-signal);
  padding: 2px 6px;
  font-weight: 600;
}

.angaben {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 24px;
  margin: 0 0 14px;
  max-width: 68ch;
}

.angaben dt {
  color: var(--gedaempft);
  font-size: 14.5px;
}

.angaben dd {
  margin: 0;
}

@media (width <= 620px) {
  .angaben {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .angaben dd {
    margin-bottom: 12px;
  }
}

.zurueckverweis {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--haar);
  font-size: 14.5px;
}

/* ---------- Anfrageformular ---------- */

.anfrage {
  background: var(--karte);
  border: 1px solid var(--haar);
  border-radius: 4px;
  padding: 36px 34px;
  margin-top: 26px;
}

.anfrage h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  margin: 0 0 8px;
}

.anfrage > .anriss {
  max-width: 58ch;
  margin-bottom: 28px;
}

/*
 * Honigtopf. Fuer Menschen unsichtbar, aber nicht ueber display none:
 * manche einfachen Roboter fuellen nur, was sie fuer sichtbar halten.
 */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anfragefelder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.anfragefeld {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anfragefeld-breit {
  grid-column: 1 / -1;
}

.anfragefeld label {
  font-size: 15px;
  font-weight: 600;
}

.anfragefeld label small {
  font-weight: 400;
  color: var(--gedaempft);
  font-size: 13px;
  margin-left: 6px;
}

.anfragefeld input,
.anfragefeld textarea {
  font: inherit;
  font-size: 16px;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--haar);
  border-radius: 2px;
  padding: 11px 13px;
  width: 100%;
}

.anfragefeld textarea {
  resize: vertical;
  min-height: 7rem;
}

.anfragefeld input:hover,
.anfragefeld textarea:hover {
  border-color: var(--gedaempft);
}

.anfragefeld input:focus-visible,
.anfragefeld textarea:focus-visible {
  border-color: var(--gruen);
}

.anfragezusammenfassung {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--gruen-hell);
  border-left: 3px solid var(--gruen);
  border-radius: 2px;
  font-size: 14.5px;
}

.zusammenfassungstitel {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gruen);
}

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

.anfragezusammenfassung li {
  padding: 2px 0;
}

.zusammenfassungleer {
  color: var(--gedaempft);
}

.zusammenfassunggesamt {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--gruen) 30%, transparent);
}

.anfragemeldung:empty {
  display: none;
}

.anfragemeldung {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 2px;
  border-left: 3px solid var(--signal);
  background: var(--papier);
  font-size: 15px;
}

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

.anfragemeldung li {
  padding: 2px 0;
}

.anfragefuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.anfragefuss button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

.anfragefuss button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.anfragehinweis {
  font-size: 12.5px;
  color: var(--gedaempft);
  width: 100%;
}

@media (width <= 720px) {
  .anfrage {
    padding: 26px 20px;
  }

  .anfragefelder {
    grid-template-columns: 1fr;
  }
}

/* Fehlerseite des Endpunkts ohne JavaScript. */
.fehlerliste {
  list-style: none;
  margin: 0 0 26px;
  padding: 16px 18px;
  border-left: 3px solid var(--signal);
  background: var(--karte);
  max-width: 68ch;
}

.entwurf {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--karte);
  border: 1px solid var(--haar);
  border-radius: 2px;
  padding: 18px 20px;
  font-size: 14px;
  max-width: 68ch;
  overflow-x: auto;
}