/* Schriften liegen lokal, damit keine Anfrage an Dritte geht. Lizenz: SIL OFL 1.1 */
@font-face {
  font-family: "Archivo";
  src: url("schrift/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("schrift/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("schrift/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("schrift/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.symbol-quelle { display: none; }

:root {
  color-scheme: light;

  --graphit: #17191e;
  --graphit-2: #22252b;
  --graphit-3: #31353d;
  --graphit-text: #b9bdc6;

  --kreide: #f1f2ee;
  --papier: #ffffff;
  --nebel: #f7f8f5;
  --linie: #e0e2dc;
  --linie-stark: #c8cbc3;

  --tinte: #17191e;
  --still: #575c65;
  --leise: #80858d;

  --marker: #f2cc2e;
  --marker-hell: #fdf2c4;
  --marker-tief: #6b5000;

  --gruen: #1d7a4c;
  --gruen-hell: #e2f1e8;
  --rot: #b8372a;
  --rot-hell: #fbe9e6;
  --blau: #2f5bd3;
  --blau-hell: #e8eefc;

  --g0: #0f7b7b;
  --g1: #8a3b7a;
  --g2: #4b4fc4;
  --g3: #5b7f2a;
  --g4: #3f6e9e;
  --g5: #6a3fa0;
  --g6: #a55a2a;
  --g7: #4e5d6c;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 10px;
  --r-s: 6px;
  --schatten: 0 1px 0 rgb(23 25 30 / 0.04), 0 1px 3px rgb(23 25 30 / 0.07);
  --schatten-hoch: 0 2px 4px rgb(23 25 30 / 0.05), 0 12px 32px -8px rgb(23 25 30 / 0.18);
  --leiste: 264px;
}

.g-0 { --g: var(--g0); }
.g-1 { --g: var(--g1); }
.g-2 { --g: var(--g2); }
.g-3 { --g: var(--g3); }
.g-4 { --g: var(--g4); }
.g-5 { --g: var(--g5); }
.g-6 { --g: var(--g6); }
.g-7 { --g: var(--g7); }

/* Grundlage */

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

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

body {
  margin: 0;
  background: var(--kreide);
  color: var(--tinte);
  font: 400 15px/1.5 var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 760;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 660;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 0.98rem;
  font-weight: 640;
  line-height: 1.3;
}

p { margin: 0; }

a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

pre, code, .mono { font-family: var(--mono); font-size: 0.86em; }

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}

.nur-leser {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 50;
  background: var(--marker);
  color: var(--graphit);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-s);
  font-weight: 600;
}
.sprung:focus { top: 1rem; }

.symbol {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* App-Rahmen */

.schale {
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  min-height: 100vh;
}
.buehne, .weite { min-width: 0; }

.leiste {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.1rem 0.85rem 1rem;
  background: var(--graphit);
  color: var(--graphit-text);
  overflow-y: auto;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 780;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.marke svg { width: 28px; height: 28px; flex: none; }

.leiste nav { display: grid; gap: 1px; }

.leiste-titel {
  margin: 1rem 0 0.35rem;
  padding: 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7d828c;
}
.leiste-titel:first-child { margin-top: 0; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-s);
  color: var(--graphit-text);
  text-decoration: none;
  font-weight: 500;
}
.nav:hover { background: var(--graphit-2); color: #fff; }
.nav[aria-current="page"] { background: var(--graphit-3); color: #fff; }
.nav[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -0.85rem; top: 0.45rem; bottom: 0.45rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--marker);
}
.nav .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .zahl { font-family: var(--mono); font-size: 0.75rem; color: #7d828c; }

.nav-suche { padding: 0.15rem 0.35rem 0.55rem; }
.nav-suche input {
  width: 100%;
  background: var(--graphit-2);
  color: #fff;
  border: 1px solid var(--graphit-3);
  border-radius: var(--r-s);
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
}
.nav-suche input::placeholder { color: #8b909a; }

.nav .punkt { margin-inline: 4px 3px; }

.offen-zahl {
  min-width: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 99px;
  background: var(--marker);
  color: var(--graphit);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35rem;
  text-align: center;
}

.leiste-fuss {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--graphit-3);
}
.leiste-fuss .wer { flex: 1; min-width: 0; line-height: 1.25; }
.leiste-fuss .wer strong { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-fuss .wer span { font-size: 0.8rem; color: #8d929b; }

.avatar {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: var(--marker);
  color: var(--graphit);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
}

.leiste-fuss button {
  padding: 0.4rem;
  background: transparent;
  border: 1px solid var(--graphit-3);
  color: var(--graphit-text);
}
.leiste-fuss button:hover { background: var(--graphit-2); color: #fff; }

.buehne {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3.5vw, 3rem) 4rem;
}

.weite { max-width: 1180px; margin-inline: auto; }
.weite-schmal { max-width: 760px; }

/* Seitenkopf */

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}
.seitenkopf > div { display: grid; gap: 0.45rem; min-width: 0; }

.ueber {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--still);
}
.ueber a { text-decoration: none; }
.ueber a:hover { color: var(--tinte); text-decoration: underline; }

.lede { color: var(--still); max-width: 62ch; }

.kopf-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Knöpfe */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--graphit);
  border-radius: var(--r-s);
  background: var(--graphit);
  color: #fff;
  font: 600 0.9rem/1.2 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  width: fit-content;
}
button:hover, .knopf:hover { background: var(--graphit-3); border-color: var(--graphit-3); }
button:active, .knopf:active { transform: translateY(1px); }

.zweit, button.zweit {
  background: var(--papier);
  color: var(--tinte);
  border-color: var(--linie-stark);
}
.zweit:hover, button.zweit:hover { background: var(--nebel); border-color: var(--still); }

.gefahr, button.gefahr {
  background: var(--papier);
  color: var(--rot);
  border-color: color-mix(in srgb, var(--rot) 40%, white);
}
.gefahr:hover, button.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); }

.gut, button.gut {
  background: var(--gruen);
  border-color: var(--gruen);
}
.gut:hover, button.gut:hover { background: #166240; border-color: #166240; }

.klein, button.klein { min-height: 1.9rem; padding: 0.3rem 0.7rem; font-size: 0.84rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.knopfreihe form { display: contents; }

/* Formulare */

.formular { display: grid; gap: 0.95rem; }
.formular.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.formular .ganz { grid-column: 1 / -1; }

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tinte);
}

label.wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 0.92rem;
  cursor: pointer;
}
label.wahl input { margin-top: 0.2rem; }

input, select, textarea {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--tinte);
  font: 400 0.95rem/1.4 var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 4.5rem; }
input:hover, select:hover, textarea:hover { border-color: var(--still); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--graphit);
  box-shadow: 0 0 0 3px rgb(23 25 30 / 0.12);
}
input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem;
  min-height: 0;
  flex: none;
  padding: 0;
  accent-color: var(--graphit);
}

select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23575c65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

.hilfe { font-size: 0.8rem; font-weight: 400; color: var(--still); }

fieldset {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--nebel);
}
legend { padding: 0 0.3rem; font-size: 0.86rem; font-weight: 600; }

/* Meldungen und leere Zustände */

.fehler, .meldung {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.75rem 0.95rem;
  border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--rot) 35%, white);
  background: var(--rot-hell);
  color: #7c1f15;
  font-weight: 500;
}
.fehler::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
}
.meldung { border-color: var(--linie); background: var(--papier); color: var(--tinte); }
.meldung.ok { border-color: color-mix(in srgb, var(--gruen) 35%, white); background: var(--gruen-hell); color: #134d31; }

.leer {
  color: var(--still);
}
.leer-feld {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding: 1.6rem 1.4rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--papier) 55%, transparent);
}
.leer-feld strong { font-family: var(--display); font-stretch: 112%; font-weight: 640; font-size: 1.02rem; }

.gesperrt {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: var(--r);
  background: var(--papier);
  border: 1px solid var(--linie);
  color: var(--still);
}

/* Karten und Abschnitte */

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
}
.karte-innen { padding: 1.1rem 1.2rem; }

.abschnitt { margin-top: 2.25rem; scroll-margin-top: 4.5rem; }
.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
.abschnitt-kopf h2 { display: flex; align-items: baseline; gap: 0.55rem; }
.abschnitt-kopf .anzahl { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--leise); }

.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.25rem;
  align-items: start;
}
.zwei-spalten.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.klebt { position: sticky; top: 4.5rem; }
.abschnitt.erster { margin-top: 0; }

.hinweis-mehr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}

/* Gesellschaftsfarbe */

.punkt {
  display: inline-block;
  width: 9px; height: 9px;
  flex: none;
  border-radius: 3px;
  background: var(--g, var(--leise));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g, var(--leise)) 22%, transparent);
}

.uebergabe {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.86rem;
}
.uebergabe .stelle { display: inline-flex; align-items: center; gap: 0.45rem; }
.uebergabe .symbol { width: 15px; height: 15px; color: var(--leise); }
.uebergabe .offen { color: var(--leise); font-style: italic; }

/* Pillen */

.pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.pille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.6rem;
  padding: 0.12rem 0.6rem;
  border-radius: 99px;
  background: var(--kreide);
  border: 1px solid var(--linie);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.pille.stufe { background: var(--graphit); border-color: var(--graphit); color: #fff; }
.pille.stufe.gewonnen { background: var(--gruen); border-color: var(--gruen); }
.pille.stufe.verloren { background: var(--papier); border-color: var(--rot); color: var(--rot); }
.pille.warn { background: var(--rot-hell); border-color: color-mix(in srgb, var(--rot) 30%, white); color: #8c2419; }
.pille.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rot); }
.pille.wartet { background: var(--marker-hell); border-color: #ecd57a; color: var(--marker-tief); }
.pille.leise { background: transparent; color: var(--still); font-weight: 500; }

.markiert {
  background: linear-gradient(transparent 58%, var(--marker-hell) 58%);
  padding-inline: 0.1em;
}

/* Stufenbahn: fünf Laufstufen und ein Ergebnisfeld */

.bahn {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 0.9fr;
  gap: 3px;
  margin: 0.15rem 0 0.1rem;
}
.bahn i {
  height: 6px;
  border-radius: 2px;
  background: var(--linie);
}
.bahn i.voll { background: var(--graphit); }
.bahn i.jetzt { background: var(--marker); box-shadow: 0 0 0 1px #d9b316 inset; }
.bahn i.ziel { margin-left: 4px; background: repeating-linear-gradient(90deg, var(--linie) 0 4px, transparent 4px 7px); }
.bahn.gewonnen i { background: var(--gruen); }
.bahn.verloren i.voll { background: var(--linie-stark); }
.bahn.verloren i.ziel { background: var(--rot); }

.bahn-text {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--leise);
}

/* Lead-Karte */

.leads { display: grid; gap: 1rem; }

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
  scroll-margin-top: 4.5rem;
  overflow: hidden;
}
.lead:target { box-shadow: 0 0 0 2px var(--marker), var(--schatten-hoch); }

.lead-haupt { display: grid; gap: 0.9rem; padding: 1.15rem 1.25rem 1.25rem; align-content: start; }
.lead-seite {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.15rem 1.2rem;
  background: var(--nebel);
  border-left: 1px solid var(--linie);
}

.lead-kopf { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.lead-nr { font-family: var(--mono); font-size: 0.75rem; color: var(--leise); }

.lead-titel {
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.25;
}

.daten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  color: var(--still);
  font-size: 0.88rem;
}
.daten span { display: inline-flex; align-items: center; gap: 0.35rem; }

.naechste {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-s);
  background: var(--kreide);
  font-weight: 600;
  font-size: 0.9rem;
}
.naechste .symbol { color: var(--still); }
.naechste.ohne { background: transparent; border: 1px dashed var(--linie-stark); color: var(--still); font-weight: 500; }

.wartet-zeile {
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-s);
  background: var(--marker-hell);
  color: var(--marker-tief);
  font-weight: 600;
  font-size: 0.86rem;
}

.teil {
  border-top: 1px solid var(--linie);
  padding-top: 0.9rem;
  display: grid;
  gap: 0.6rem;
}
.teil > h3, .teil-titel {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--still);
}

details.aufklapp > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tinte);
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
  margin-right: 0.15rem;
}
details.aufklapp[open] > summary::before { transform: rotate(45deg); }
details.aufklapp[open] > summary { margin-bottom: 0.8rem; }

.uebergabe-zeile { display: grid; gap: 0.7rem; justify-items: start; }
.uebergabe-zeile > details { justify-self: stretch; }
details.teil { display: block; }
details.bearbeiten-auf > summary {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--still);
}
details.bearbeiten-auf > summary .symbol { width: 14px; height: 14px; }
details.bearbeiten-auf[open] > summary { margin-bottom: 0.3rem; }

/* Mailentwurf */

.brief {
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--papier);
  overflow: hidden;
}
.brief-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--linie);
  background: var(--nebel);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--still);
}
.entwurf {
  margin: 0;
  padding: 0.8rem 0.9rem;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
}
.brief-fuss {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px dashed var(--linie);
  background: var(--nebel);
}
.brief-fuss .knopfreihe a {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--linie-stark);
  border-radius: 99px;
  background: var(--papier);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.brief-fuss .knopfreihe a:hover { border-color: var(--graphit); }

/* Einwilligungs-Siegel */

.siegel {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--r-s);
  border: 1px solid var(--linie);
  background: var(--papier);
  font-size: 0.88rem;
}
.siegel-kopf { display: flex; align-items: center; gap: 0.55rem; font-weight: 650; }
.siegel-kopf .symbol { width: 20px; height: 20px; }
.siegel.keine .siegel-kopf { color: var(--still); }
.siegel.wartet { border-color: #ecd57a; background: linear-gradient(var(--marker-hell), var(--papier) 70%); }
.siegel.wartet .siegel-kopf { color: var(--marker-tief); }
.siegel.gueltig { border-color: color-mix(in srgb, var(--gruen) 35%, white); background: linear-gradient(var(--gruen-hell), var(--papier) 70%); }
.siegel.gueltig .siegel-kopf { color: var(--gruen); }
.siegel.widerrufen { border-color: color-mix(in srgb, var(--rot) 30%, white); background: linear-gradient(var(--rot-hell), var(--papier) 70%); }
.siegel.widerrufen .siegel-kopf { color: var(--rot); }
.siegel .angaben { display: grid; gap: 0.2rem; color: var(--still); }
.siegel-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.siegel-zeile:not(:has(*)) { display: none; }
.siegel-zeile .knopfreihe { margin-left: auto; }
details.nachweis > summary { font-size: 0.8rem; color: var(--still); }
details.nachweis[open] > summary { margin-bottom: 0.4rem; }
.siegel .wortlaut { font-style: italic; }
.weitergabe { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.weitergabe.ja { color: var(--gruen); }
.weitergabe.nein { color: var(--rot); }
.weitergabe::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Verlauf */

.zeitleiste { display: grid; gap: 0; }
.zeitleiste li {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.85rem 1.15rem;
  font-size: 0.86rem;
}
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--papier);
  border: 1.6px solid var(--still);
}
.zeitleiste li::after {
  content: "";
  position: absolute;
  left: 3px; top: 1.05rem; bottom: 0.1rem;
  width: 1px;
  background: var(--linie-stark);
}
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste li:first-child::before { background: var(--marker); border-color: #c9a514; }
.zeitleiste .wann { font-family: var(--mono); font-size: 0.72rem; color: var(--leise); }
.zeitleiste .wer { font-weight: 600; font-size: 0.8rem; }
.zeitleiste .was { color: var(--tinte); overflow-wrap: anywhere; }
details.aeltere { margin-top: 0.85rem; padding-left: 1.15rem; }
details.aeltere > summary { font-size: 0.8rem; color: var(--still); }
details.aeltere .zeitleiste { margin-left: -1.15rem; }
details.aeltere .zeitleiste li:first-child::before { background: var(--papier); border-color: var(--still); }

/* Gesellschaften */

.gesellschaften {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.gesellschaften > li {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1.15rem 1.2rem 1.1rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  overflow: hidden;
}
.gesellschaften .band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--g);
}
.gesellschaften > li:hover { box-shadow: var(--schatten-hoch); border-color: var(--linie-stark); transform: translateY(-1px); }
.gesellschaften > li > a {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 680;
  font-size: 1.15rem;
  text-decoration: none;
}
.gesellschaften > li > a::after { content: ""; position: absolute; inset: 0; }
.gesellschaften .ap { color: var(--still); font-size: 0.88rem; }
.gesellschaften .steck { color: var(--still); font-size: 0.84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gesellschaften .pillen { margin-top: 0.2rem; }

.karte-hilfe { margin: 0.35rem 0 1rem; }
.zugang-form .seitenkopf { margin: 0; }

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  color: var(--still);
  font-size: 0.9rem;
}
.kennzahlen b { font-family: var(--display); font-stretch: 112%; color: var(--tinte); font-size: 1.05rem; margin-right: 0.25rem; }

/* Gesellschaftsseite */

.firmenkopf {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding-left: 1.1rem;
}
.firmenkopf::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2rem; bottom: 0.2rem;
  width: 5px;
  border-radius: 3px;
  background: var(--g);
}

.unternav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.25rem;
  margin: 0 calc(-1 * clamp(1rem, 3.5vw, 3rem)) 0;
  padding: 0.55rem clamp(1rem, 3.5vw, 3rem);
  background: color-mix(in srgb, var(--kreide) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}
.unternav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--still);
  white-space: nowrap;
}
.unternav a:hover { background: var(--papier); color: var(--tinte); }
.unternav .anzahl { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; }
.unternav a.dringend { background: var(--marker-hell); color: var(--marker-tief); }

.steckbrief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.steckbrief > * { padding: 1rem 1.2rem; border-left: 1px solid var(--linie); }
.steckbrief > *:first-child { border-left: 0; }
.steckbrief p { font-size: 0.92rem; overflow-wrap: anywhere; }
.steckbrief .leer { font-style: italic; }
.steckbrief-fuss {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid var(--linie);
  background: var(--nebel);
  border-radius: 0 0 var(--r) var(--r);
}
.website { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--still); }

.aenderung {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-s);
  background: var(--marker-hell);
  border: 1px solid #ecd57a;
}
.aenderung h3 { color: var(--marker-tief); }
.aenderung .entwurf { border-radius: var(--r-s); }

.stufenleiste {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.stufenleiste div {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r-s);
  background: var(--papier);
  border: 1px solid var(--linie);
  min-width: 0;
}
.stufenleiste span { font-size: 0.74rem; color: var(--still); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stufenleiste b { font-family: var(--display); font-stretch: 112%; font-size: 1.15rem; font-weight: 680; }
.stufenleiste .null b { color: var(--linie-stark); }
.stufenleiste .gewonnen { border-color: color-mix(in srgb, var(--gruen) 35%, white); }
.stufenleiste .gewonnen b { color: var(--gruen); }
.stufenleiste .verloren b { color: var(--rot); }
.stufenleiste .null.gewonnen b, .stufenleiste .null.verloren b { color: var(--linie-stark); }

.hinweise { display: grid; gap: 0.75rem; }
.hinweis {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
}
.hinweis.offen { border-left: 4px solid var(--marker); }
.hinweis-kopf { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }

.freigaben { display: grid; gap: 0.75rem; }
.freigabe {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ecd57a;
  border-left: 4px solid var(--marker);
  border-radius: var(--r);
  background: var(--papier);
  box-shadow: var(--schatten);
}
.freigabe .was { font-family: var(--display); font-stretch: 108%; font-weight: 650; font-size: 1.02rem; }

.vorschlaege { display: grid; gap: 0.5rem; }
.vorschlaege li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--papier);
  font-size: 0.88rem;
}
.vorschlaege li > span:first-child { font-weight: 650; display: flex; align-items: center; gap: 0.45rem; }
.vorschlaege .grund { grid-column: 1; color: var(--still); font-size: 0.82rem; }
.vorschlaege form { grid-column: 2; grid-row: 1 / span 2; }
.vorschlaege .zurueck { color: var(--leise); font-weight: 500 !important; text-decoration: line-through; text-decoration-color: var(--linie-stark); }

.bearbeiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  align-items: end;
}
.bearbeiten .ganz { grid-column: 1 / -1; }

/* Board */

.brett {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr);
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}
.spalte {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  min-height: 14rem;
  padding: 0.55rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--papier) 45%, var(--kreide));
  border: 1px solid var(--linie);
  scroll-snap-align: start;
}
.stufe-gruppe { display: grid; gap: 0.55rem; align-content: start; min-width: 0; }
.spalte, .spalte ul, .kachel { min-width: 0; }
.spalte.abschluss .stufe-gruppe + .stufe-gruppe { padding-top: 0.9rem; border-top: 1px dashed var(--linie-stark); }
.spalte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0 0.2rem; }
.spalte-kopf h3 { font-size: 0.84rem; }
.spalte-kopf .anzahl { font-family: var(--mono); font-size: 0.75rem; color: var(--leise); }
.stufe-gruppe.gewonnen .spalte-kopf h3 { color: var(--gruen); }
.stufe-gruppe.verloren .spalte-kopf h3 { color: var(--rot); }
.spalte ul { display: grid; gap: 0.5rem; align-content: start; }
.spalte .leer { font-size: 0.82rem; padding: 0.2rem; color: var(--leise); }

.kachel {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 0.65rem 0.7rem;
  border-radius: var(--r-s);
  background: var(--papier);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  font-size: 0.84rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.kachel:hover { box-shadow: var(--schatten-hoch); border-color: var(--linie-stark); }
.kachel.warnt { border-left: 3px solid var(--rot); }
.kachel > a { font-weight: 650; font-size: 0.88rem; text-decoration: none; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.kachel > a::after { content: ""; position: absolute; inset: 0; }
.kachel .pillen { position: relative; }
.kachel .pille { font-size: 0.7rem; white-space: normal; max-width: 100%; }
.kachel-person { display: flex; align-items: center; gap: 0.35rem; color: var(--still); font-size: 0.8rem; }
.kachel-person .symbol { width: 13px; height: 13px; flex: none; }
.kachel-person a { position: relative; z-index: 1; }
.kachel-aktion {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: var(--nebel);
  font-size: 0.78rem;
  line-height: 1.35;
}
.kachel-fuss { display: grid; gap: 0.15rem; padding-top: 0.45rem; border-top: 1px solid var(--linie); font-size: 0.74rem; color: var(--still); }
.kachel-fuss .stelle { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.kachel-fuss .symbol { width: 12px; height: 12px; flex: none; }

/* Listen in Übersichten */

.zeilen { display: grid; gap: 0.6rem; }
.zeile {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1.1rem;
}
.zeile-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: start; }
.zeile-kopf .pillen { justify-content: flex-end; }
.zeile .titel { font-weight: 650; font-size: 0.98rem; }
a.titel { text-decoration: none; }
a.titel:hover { text-decoration: underline; }
.kontakt-links a { text-decoration: none; }
.kontakt-links a:hover { text-decoration: underline; }
.zuletzt { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.84rem; color: var(--still); }
.zuletzt .symbol { width: 14px; height: 14px; align-self: center; }

.mails { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
.mails li {
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.mails strong {
  display: block;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--linie);
  background: var(--nebel);
  font-size: 0.84rem;
}
.mails .entwurf { max-height: 15rem; overflow: auto; font-size: 0.74rem; line-height: 1.55; }

/* Rollen */

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--still);
  border-bottom: 1px solid var(--linie);
  background: var(--nebel);
}
.tabelle td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .person { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; }
.tabelle .avatar { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; background: var(--kreide); border: 1px solid var(--linie); }
.rolle-form { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.rolle-form label { display: block; }
.rolle-form select { width: auto; min-width: 9.5rem; }

/* Assistent */

.verbindung {
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
}
.verbindung-stand { display: flex; align-items: center; gap: 0.75rem; }
.lampe { width: 12px; height: 12px; border-radius: 50%; background: var(--linie-stark); box-shadow: 0 0 0 4px var(--kreide); }
.lampe.an { background: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-hell); }
.verbindung-stand p { font-family: var(--display); font-stretch: 112%; font-weight: 680; font-size: 1.15rem; }
.adresse {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.55rem 0.55rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--nebel);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.adresse a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.regeln { display: grid; gap: 0.6rem; }
.regeln li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--still); }
.regeln .symbol { color: var(--gruen); margin-top: 0.1rem; }

/* Zugang: Anmelden und Konto */

.zugang {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}
.zugang-buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--graphit);
  color: var(--graphit-text);
  overflow: hidden;
}
.zugang-buehne .marke { padding: 0; font-size: 1.35rem; }
.zugang-these { display: grid; gap: 1.25rem; max-width: 30rem; position: relative; z-index: 1; }
.zugang-these h2 {
  font-stretch: 125%;
  font-weight: 760;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.08;
  color: #fff;
  letter-spacing: -0.02em;
}
.zugang-these h2 em { font-style: normal; background: linear-gradient(transparent 80%, var(--marker) 80%, var(--marker) 94%, transparent 94%); }
.zugang-these p { font-size: 1.02rem; max-width: 34ch; }
.zugang-punkte { display: grid; gap: 0.55rem; font-size: 0.9rem; }
.zugang-punkte li { display: flex; gap: 0.6rem; align-items: center; }
.zugang-punkte .symbol { color: var(--marker); }
.zugang-fuss { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #6f747d; position: relative; z-index: 1; }

.relaisbild {
  position: absolute;
  right: 7%;
  bottom: 11%;
  width: min(46%, 240px);
  height: auto;
  pointer-events: none;
}

.zugang-form {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--papier);
}
.zugang-form > div { width: min(100%, 22rem); display: grid; gap: 1.4rem; }
.zugang-form .formular button { width: 100%; min-height: 2.6rem; }
.zugang-form .neben { color: var(--still); font-size: 0.9rem; }

/* Öffentliche Seiten: Formular, Status, Assistentensicht */

.oeffentlich { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.oeffentlich-kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.oeffentlich-kopf .zeichen {
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 8px;
  background: var(--g, var(--graphit));
  color: #fff;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 760;
}
.oeffentlich-kopf .kopf-marke { width: 28px; height: 28px; color: var(--graphit); }
.oeffentlich-kopf strong { font-family: var(--display); font-stretch: 112%; font-weight: 680; font-size: 1.05rem; }
.oeffentlich main {
  width: min(100% - 2rem, 40rem);
  margin: clamp(1.5rem, 5vw, 3.5rem) auto;
}
.oeffentlich main.breit { width: min(100% - 2rem, 56rem); }
.oeffentlich-fuss {
  padding: 1.2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--leise);
}
.oeffentlich-fuss .marke-klein { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--still); font-weight: 600; }
.oeffentlich-fuss svg { width: 16px; height: 16px; }

.einwilligung-block {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--r-s);
  background: var(--nebel);
  border: 1px solid var(--linie);
}
.einwilligung-block .wortlaut { font-size: 0.88rem; color: var(--still); }
.einwilligung-block fieldset { background: var(--papier); }

.bestaetigung {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: clamp(1.75rem, 5vw, 3rem) 1.5rem;
  text-align: center;
}
.bestaetigung .kreis {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--gruen-hell);
  color: var(--gruen);
}
.bestaetigung .kreis.neutral { background: var(--kreide); color: var(--still); }
.bestaetigung .kreis .symbol { width: 26px; height: 26px; stroke-width: 2; }
.bestaetigung p { color: var(--still); max-width: 36ch; }
.bestaetigung .gross { font-family: var(--display); font-stretch: 112%; font-weight: 680; font-size: 1.25rem; color: var(--tinte); }
.oeffentlich .formular button { width: 100%; min-height: 2.6rem; }

/* Anpassungen für kleinere Bildschirme */

@media (max-width: 1100px) {
  .zwei-spalten, .zwei-spalten.gleich, .hinweis-mehr { grid-template-columns: minmax(0, 1fr); }
  .klebt { position: static; }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead-seite { border-left: 0; border-top: 1px solid var(--linie); }
  .stufenleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .schale { grid-template-columns: minmax(0, 1fr); }
  .leiste {
    position: sticky;
    top: 0;
    z-index: 10;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
  }
  .leiste .marke span { display: none; }
  .leiste nav { display: flex; gap: 0.15rem; flex: 1; min-width: 0; overflow-x: auto; }
  .leiste-titel, .leiste-fuss .wer { display: none; }
  .nav[aria-current="page"]::before { left: 0.5rem; right: 0.5rem; top: auto; bottom: -0.1rem; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .nav .text { overflow: hidden; text-overflow: ellipsis; max-width: 8.5rem; }
  .nav-suche { flex: 1 0 8rem; min-width: 0; padding: 0; }
  .nav-suche input { min-height: 2.2rem; }
  .brett {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
  }
  .bearbeiten, .zuweisen { grid-template-columns: minmax(0, 1fr); }
  .formular input, .formular select, .formular textarea { max-width: 100%; }
  .leiste-fuss { margin: 0; padding: 0; border: 0; flex: none; }
  .leiste-fuss .avatar { display: none; }
  .unternav { top: 3.2rem; }
  .steckbrief { grid-template-columns: minmax(0, 1fr); }
  .steckbrief > * { border-left: 0; border-top: 1px solid var(--linie); }
  .steckbrief > *:first-child { border-top: 0; }
  .zugang { grid-template-columns: minmax(0, 1fr); }
  .zugang-buehne { min-height: auto; padding-bottom: 2rem; }
  .relaisbild, .zugang-punkte, .zugang-fuss { display: none; }
  .stufenleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabelle thead { display: none; }
  .tabelle td { display: block; border-bottom: 0; padding: 0.5rem 1rem; }
  .tabelle tr { display: block; border-bottom: 1px solid var(--linie); padding: 0.4rem 0; }
  .rolle-form { justify-content: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .leiste, .unternav, form, button { display: none !important; }
  .schale { display: block; }
  body { background: #fff; }
}