/* ==========================================================================
   Kernholz – Komponenten
   Knöpfe · Positionsballon · Abschnittskopf · Bemaßung · Schriftfeld · Listen ·
   Kettenmaß · Ablauf · Projektkarte · Stimmen · Blaupause · FAQ · Formulare · Hinweise
   ========================================================================== */

/* --- Knöpfe ---------------------------------------------------------------- */
.knopf {
  --k-grund: var(--c-nacht-900);
  --k-text: var(--c-papier);
  --k-rand: var(--c-nacht-900);
  --k-grund-hover: var(--c-nacht-700);
  --k-text-hover: var(--c-papier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  border: var(--linie-dick) solid var(--k-rand);
  background: var(--k-grund);
  color: var(--k-text);
  font-family: var(--schrift-label);
  font-size: var(--fs-m);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve), transform var(--dauer-kurz) var(--kurve);
}

.knopf:hover {
  background: var(--k-grund-hover);
  border-color: var(--k-grund-hover);
  color: var(--k-text-hover);
}

.knopf:active {
  transform: translateY(1px);
}

.knopf:disabled,
.knopf[aria-disabled="true"] {
  opacity: 0.45;
  transform: none;
  pointer-events: none;
}

.knopf .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--dauer) var(--kurve);
}

.knopf:hover .icon--weiter {
  transform: translateX(4px);
}

.knopf:hover .icon--zurueck {
  transform: translateX(-4px);
}

.knopf--sekundaer {
  --k-grund: transparent;
  --k-text: var(--c-nacht-900);
  --k-grund-hover: var(--c-nacht-900);
}

.knopf--akzent {
  --k-grund: var(--c-ocker-500);
  --k-rand: var(--c-ocker-500);
  --k-text: var(--c-nacht-950);
  --k-grund-hover: var(--c-ocker-400);
  --k-text-hover: var(--c-nacht-950);
}

.knopf--hell {
  --k-grund: transparent;
  --k-rand: var(--c-papier);
  --k-text: var(--c-papier);
  --k-grund-hover: var(--c-papier);
  --k-text-hover: var(--c-nacht-900);
}

.knopf--klein {
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-s);
}

.knopf-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Schlichter Textknopf mit Pfeil */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-nacht-900);
  font-family: var(--schrift-label);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--linie-dick) solid var(--farbe-akzent);
  padding-bottom: 2px;
}

.pfeil-link .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dauer-kurz) var(--kurve);
}

.pfeil-link:hover {
  color: var(--farbe-akzent-text);
}

.pfeil-link:hover .icon {
  transform: translateX(3px);
}

/* --- Positionsballon (wie Positionsnummern in einer Werkzeichnung) -------- */
.ballon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--linie) solid currentColor;
  border-radius: 50%; /* einzige Rundung: technisches Zeichen, kein Oberflächendekor */
  font-family: var(--schrift-label);
  font-size: var(--fs-s);
  font-weight: var(--gewicht-kraeftig);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Kleine Überzeile */
.label {
  font-family: var(--schrift-label);
  font-size: var(--fs-xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: var(--sperrung-label);
  text-transform: uppercase;
  color: var(--farbe-akzent-text);
}

/* --- Abschnittskopf ------------------------------------------------------- */
.abschnittskopf {
  row-gap: var(--s-5);
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}

.abschnittskopf__pos {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-nacht-900);
}

.abschnittskopf__pos .label {
  color: var(--c-nacht-900);
}

/* Hinweislinie vom Ballon bis zum Rand */
.abschnittskopf__pos::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-nacht-900);
}

.abschnittskopf__text {
  max-width: 52ch;
  color: var(--farbe-text-leise);
  font-size: var(--fs-m);
}

@media (min-width: 64rem) {
  .abschnittskopf h2 {
    grid-column: 1 / span 7;
  }

  .abschnittskopf__text {
    grid-column: 9 / span 4;
    align-self: end;
  }
}

.dunkel {
  background: var(--farbe-dunkel);
  color: var(--farbe-dunkel-leise);
  --farbe-ueberschrift: var(--c-papier);
  --farbe-fokus: var(--c-ocker-400);
  --farbe-raster: color-mix(in srgb, var(--c-nacht-300) 9%, transparent);
  --farbe-akzent-text: var(--c-ocker-400);
  --farbe-text-leise: var(--c-nacht-300);
}

.dunkel .abschnittskopf__pos,
.dunkel .abschnittskopf__pos .label {
  color: var(--c-papier);
}

.dunkel .abschnittskopf__pos::after {
  background: var(--c-nacht-600);
}

/* --- Bemaßungslinie -------------------------------------------------------- */
.masz {
  --masz-farbe: var(--c-ocker-600);
  --strich: linear-gradient(
    45deg,
    transparent calc(50% - 0.75px),
    var(--masz-farbe) calc(50% - 0.75px) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 1.25rem;
  border-inline: var(--linie) solid var(--masz-farbe);
  background: var(--strich) left -5px center / 11px 11px no-repeat, var(--strich) right -5px center / 11px 11px no-repeat;
  color: var(--farbe-akzent-text);
}

.masz::before,
.masz::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--masz-farbe);
}

.masz__wert {
  font-family: var(--schrift-label);
  font-size: var(--fs-xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.masz--senkrecht {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-height: 0;
  min-width: 1.25rem;
  border-inline: 0;
  border-block: var(--linie) solid var(--masz-farbe);
  background: var(--strich) center top -5px / 11px 11px no-repeat, var(--strich) center bottom -5px / 11px 11px no-repeat;
}

.masz--senkrecht::before,
.masz--senkrecht::after {
  width: 1px;
  height: auto;
}

.dunkel .masz {
  --masz-farbe: var(--c-ocker-500);
}

/* --- Bemaßter Bildrahmen --------------------------------------------------- */
.bemasst {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-rows: 1.5rem auto auto;
  column-gap: var(--s-2);
  row-gap: var(--s-2);
}

.bemasst__oben {
  grid-column: 2;
  grid-row: 1;
}

.bemasst__seite {
  grid-column: 1;
  grid-row: 2;
}

.bemasst__bild {
  position: relative;
  grid-column: 2;
  grid-row: 2;
}

.bemasst__bild img {
  width: 100%;
  aspect-ratio: var(--seitenverhaeltnis, 4 / 5);
  object-fit: cover;
  background: var(--c-grau-100);
}

/* Passermarken an den Bildecken */
.bemasst__bild::before,
.bemasst__bild::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: var(--c-nacht-900);
  border-style: solid;
  pointer-events: none;
}

.bemasst__bild::before {
  top: -0.375rem;
  left: -0.375rem;
  border-width: 2px 0 0 2px;
}

.bemasst__bild::after {
  right: -0.375rem;
  bottom: -0.375rem;
  border-width: 0 2px 2px 0;
}

.bemasst figcaption {
  grid-column: 2;
  grid-row: 3;
}

/* --- Schriftfeld (Plankopf-Tabelle) --------------------------------------- */
.schriftfeld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  border-top: var(--linie) solid var(--c-nacht-900);
  border-left: var(--linie) solid var(--c-nacht-900);
  background: var(--farbe-grund);
  font-size: var(--fs-s);
  line-height: var(--zh-mittel);
}

.schriftfeld > div {
  padding: var(--s-2) var(--s-3);
  border-right: var(--linie) solid var(--c-nacht-900);
  border-bottom: var(--linie) solid var(--c-nacht-900);
}

.schriftfeld dt {
  color: var(--farbe-text-leise);
  font-family: var(--schrift-label);
  font-size: var(--fs-2xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.schriftfeld dd {
  margin: 0;
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-mittel);
}

/* --- Listen ---------------------------------------------------------------- */
.haken-liste {
  display: grid;
  gap: var(--s-3);
  list-style: none;
}

.haken-liste li {
  position: relative;
  padding-left: 1.875rem;
}

/* Haken wie ein Prüfvermerk auf der Zeichnung */
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.38em;
  width: 0.95rem;
  height: 0.5rem;
  border-left: 2px solid var(--c-ocker-500);
  border-bottom: 2px solid var(--c-ocker-500);
  transform: rotate(-45deg);
}

.strich-liste {
  display: grid;
  list-style: none;
  border-top: var(--linie) solid var(--farbe-linie);
}

.strich-liste li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--linie) solid var(--farbe-linie);
}

.fliesstext {
  max-width: var(--zeile-max);
}

.fliesstext > * + * {
  margin-top: var(--s-4);
}

.fliesstext h2,
.fliesstext h3 {
  margin-top: var(--s-7);
}

.fliesstext h3 + * {
  margin-top: var(--s-3);
}

.fliesstext ul,
.fliesstext ol {
  padding-left: 1.25rem;
}

.fliesstext li + li {
  margin-top: var(--s-2);
}

.lead {
  font-size: var(--fs-l);
  line-height: 1.5;
}

/* --- Kennzahlen als Kettenmaß --------------------------------------------- */
.kettenmass {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--s-7);
}

.kettenmass__glied {
  --masz-farbe: var(--c-ocker-500);
  --strich: linear-gradient(
    45deg,
    transparent calc(50% - 0.75px),
    var(--masz-farbe) calc(50% - 0.75px) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
  position: relative;
  /* Zahl steht optisch oben, im Quelltext folgt sie als <dd> dem Begriff */
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: var(--s-6) var(--s-4) 0;
  /* Maßlinie oben, Hilfslinie links, Schrägstrich am Schnittpunkt */
  background: linear-gradient(var(--masz-farbe), var(--masz-farbe)) left 0 top 0.75rem / 100% 1px no-repeat,
    linear-gradient(var(--masz-farbe), var(--masz-farbe)) left 0 top 0 / 1px 1.75rem no-repeat,
    var(--strich) left -5px top calc(0.75rem - 5px) / 11px 11px no-repeat;
}

/* Rechtes Ende der Kette (Zeilenende): zweite Hilfslinie mit Schrägstrich */
.kettenmass__glied:nth-child(2n)::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 11px;
  height: 1.75rem;
  background: linear-gradient(var(--masz-farbe), var(--masz-farbe)) center top / 1px 100% no-repeat,
    var(--strich) center top calc(0.75rem - 5px) / 11px 11px no-repeat;
}

.kettenmass__zahl {
  display: block;
  margin: 0;
  color: var(--farbe-ueberschrift);
  font-family: var(--schrift-label);
  font-size: var(--fs-zahl);
  font-weight: var(--gewicht-kraeftig);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

.kettenmass__einheit {
  font-size: 0.5em;
  margin-left: 0.1em;
}

.kettenmass__text {
  margin-top: var(--s-3);
  max-width: 22ch;
  font-size: var(--fs-s);
  line-height: var(--zh-mittel);
}

@media (min-width: 64rem) {
  .kettenmass {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kettenmass__glied:nth-child(2n)::after {
    content: none;
  }

  .kettenmass__glied:last-child::after {
    content: "";
  }
}

/* --- Ablauf in nummerierten Schritten ------------------------------------ */
.ablauf {
  display: grid;
  gap: var(--s-6);
  list-style: none;
  counter-reset: schritt;
}

.ablauf__schritt {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
}

.ablauf__schritt .ballon {
  grid-row: 1 / span 3;
  background: var(--farbe-grund);
  color: var(--c-nacht-900);
  position: relative;
  z-index: 1;
}

/* Verbindungslinie zwischen den Ballons (mobil senkrecht) */
.ablauf__schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: calc(-1 * var(--s-6));
  width: 1px;
  background: var(--c-nacht-900);
}

.ablauf__titel {
  font-size: var(--fs-l);
}

.ablauf__text {
  color: var(--farbe-text);
  font-size: var(--fs-s);
}

.ablauf__dauer {
  margin-top: var(--s-2);
}

@media (min-width: 64rem) {
  .ablauf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--rinne);
  }

  .ablauf__schritt {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    row-gap: var(--s-4);
  }

  .ablauf__schritt .ballon {
    grid-row: auto;
  }

  .ablauf__schritt:not(:last-child)::before {
    left: 2.5rem;
    right: calc(-1 * var(--rinne));
    top: 1.25rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* --- Projektkarte (Referenzen) -------------------------------------------- */
.projekt {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.projekt__bild {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-grau-100);
}

.projekt__bild img {
  width: 100%;
  aspect-ratio: var(--seitenverhaeltnis, 4 / 3);
  object-fit: cover;
  transition: transform 400ms var(--kurve);
}

a.projekt__bild:hover img,
button.projekt__bild:hover img {
  transform: scale(1.025);
}

.projekt__lupe {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--c-nacht-900);
  color: var(--c-papier);
}

.projekt__lupe .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Kategorie steht als Überzeile über dem Titel (keine Trennung langer Labels) */
.projekt__kopf {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--s-1);
}

.projekt__kopf .label {
  white-space: nowrap;
  hyphens: manual;
}

.projekt__titel {
  font-size: var(--fs-l);
}

.projekt .schriftfeld {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (max-width: 20rem) {
  .projekt .schriftfeld {
    grid-template-columns: 1fr 1fr;
  }

  .projekt .schriftfeld > div:first-child {
    grid-column: 1 / -1;
  }
}

/* --- Stimmen ---------------------------------------------------------------- */
.stimme {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--linie-dick) solid var(--c-nacht-900);
}

.stimme blockquote p {
  color: var(--c-nacht-900);
  font-size: var(--fs-l);
  line-height: 1.45;
}

.stimme figcaption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-s);
  color: var(--farbe-text-leise);
}

.stimme__initialen {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--c-nacht-900);
  color: var(--c-papier);
  font-family: var(--schrift-label);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.06em;
}

.stimme__name {
  display: block;
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-kraeftig);
}

/* --- Blaupause: Abschluss-Aufruf ------------------------------------------ */
.blaupause {
  position: relative;
  overflow: hidden;
  padding-block: var(--abschnitt);
  background-color: var(--c-nacht-900);
  background-image: linear-gradient(color-mix(in srgb, var(--c-nacht-300) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-nacht-300) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--c-nacht-300) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-nacht-300) 4.5%, transparent) 1px, transparent 1px);
  background-size: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;
}

.blaupause__innen {
  row-gap: var(--s-6);
  align-items: end;
}

.blaupause h2 {
  max-width: 18ch;
}

.blaupause__text {
  max-width: 48ch;
  font-size: var(--fs-l);
  line-height: 1.5;
  color: var(--c-nacht-300);
}

.blaupause__kontakt {
  display: grid;
  gap: var(--s-2);
  font-family: var(--schrift-label);
  font-size: var(--fs-s);
  letter-spacing: 0.04em;
}

.blaupause__kontakt a {
  color: var(--c-papier);
  font-size: var(--fs-l);
  font-weight: var(--gewicht-kraeftig);
  text-decoration: none;
}

.blaupause__kontakt a:hover {
  color: var(--c-ocker-400);
}

.blaupause__haupt,
.blaupause__seite {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.blaupause__haupt .knopf-gruppe {
  margin-top: var(--s-2);
}

@media (min-width: 64rem) {
  .blaupause__haupt {
    grid-column: 1 / span 7;
  }

  .blaupause__seite {
    grid-column: 9 / span 4;
  }
}

/* --- FAQ (aufklappbar ohne JavaScript) ------------------------------------ */
.faq {
  border-top: var(--linie) solid var(--c-nacht-900);
}

@media (min-width: 64rem) {
  .raster > .faq {
    grid-column: 1 / span 9;
  }
}

.faq details {
  border-bottom: var(--linie) solid var(--farbe-linie);
}

.faq summary {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  color: var(--c-nacht-900);
  font-size: var(--fs-l);
  font-weight: var(--gewicht-kraeftig);
  line-height: var(--zh-mittel);
}

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

.faq__nr {
  color: var(--farbe-akzent-text);
  font-family: var(--schrift-label);
  font-size: var(--fs-s);
}

/* Plus-Zeichen wird zum Minus */
.faq summary::after {
  content: "";
  align-self: center;
  width: 1rem;
  height: 1rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}

.faq details[open] summary::after {
  background-size: 100% 2px, 2px 0;
  transform: rotate(180deg);
}

.faq summary:hover {
  color: var(--farbe-akzent-text);
}

.faq summary:focus-visible {
  outline-offset: -2px;
}

.faq__antwort {
  max-width: var(--zeile-max);
  padding: 0 0 var(--s-6) calc(2.5rem + var(--s-3));
}

.faq__antwort > * + * {
  margin-top: var(--s-3);
}

/* --- Hinweisboxen ----------------------------------------------------------- */
.hinweis {
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-ocker-500);
  background: var(--c-ocker-100);
  color: var(--c-nacht-900);
}

.hinweis strong {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--schrift-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hinweis--fehler {
  border-left-color: var(--c-fehler);
  background: var(--c-fehler-hell);
}

.hinweis a {
  color: inherit;
}

/* --- Formulare -------------------------------------------------------------- */
.formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

/* min-width: 0 verhindert, dass lange Optionstexte das Raster sprengen */
.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
}

.feld__label,
.feldgruppe legend {
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-kraeftig);
  line-height: var(--zh-mittel);
}

.feld__pflicht {
  color: var(--farbe-akzent-text);
  font-weight: var(--gewicht-mittel);
}

.feld__hinweis {
  color: var(--farbe-text-leise);
  font-size: var(--fs-s);
  line-height: var(--zh-mittel);
}

.eingabe {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  border: var(--linie) solid var(--c-grau-400);
  border-bottom: var(--linie-dick) solid var(--c-nacht-900);
  border-radius: var(--radius);
  background: var(--farbe-feld);
  color: var(--farbe-text);
  transition: border-color var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}

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

select.eingabe {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132238' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  background-repeat: no-repeat;
}

.eingabe:hover {
  border-color: var(--c-nacht-600);
}

.eingabe:focus-visible {
  outline: var(--linie-dick) solid var(--farbe-fokus);
  outline-offset: 2px;
  border-color: var(--c-nacht-900);
}

.eingabe:disabled {
  background: var(--c-grau-100);
  color: var(--farbe-text-leise);
}

.eingabe::placeholder {
  color: var(--c-grau-500);
}

.eingabe[aria-invalid="true"] {
  border-color: var(--c-fehler);
  border-bottom-color: var(--c-fehler);
  background: var(--c-fehler-hell);
}

.feld__fehler {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  color: var(--c-fehler);
  font-size: var(--fs-s);
  font-weight: var(--gewicht-kraeftig);
  line-height: var(--zh-mittel);
}

.feld__fehler::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--c-fehler);
  color: var(--c-papier);
  font-size: var(--fs-2xs);
  transform: translateY(2px);
}

.feld__fehler:empty {
  display: none;
}

.feldgruppe {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.feldgruppe legend {
  padding: 0;
  margin-bottom: var(--s-3);
}

/* Auswahlkarten (Radio/Checkbox) */
.wahl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
}

.wahl {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: var(--linie) solid var(--c-grau-400);
  background: var(--farbe-feld);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve), background var(--dauer-kurz) var(--kurve);
}

.wahl:hover {
  border-color: var(--c-nacht-900);
}

.wahl:has(:checked) {
  border-color: var(--c-nacht-900);
  background: var(--c-grau-50);
  box-shadow: inset 0 0 0 1px var(--c-nacht-900);
}

/* Ocker-Ecke markiert die gewählte Karte */
.wahl:has(:checked)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 1.125rem 1.125rem 0;
  border-color: transparent var(--c-ocker-500) transparent transparent;
}

.wahl:has(:focus-visible) {
  outline: var(--linie-dick) solid var(--farbe-fokus);
  outline-offset: 2px;
}

.wahl__titel {
  display: block;
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-kraeftig);
  line-height: var(--zh-mittel);
}

.wahl__text {
  display: block;
  margin-top: var(--s-1);
  color: var(--farbe-text-leise);
  font-size: var(--fs-s);
  line-height: var(--zh-mittel);
}

.wahl--kompakt {
  padding: var(--s-3) var(--s-4);
  align-items: center;
}

.gruppe-ungueltig .wahl {
  border-color: var(--c-fehler);
}

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  border: var(--linie-dick) solid var(--c-nacht-900);
  background: var(--farbe-feld);
  cursor: pointer;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-nacht-900);
  transform: scale(0);
  transition: transform var(--dauer-kurz) var(--kurve);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--c-papier);
  border-bottom: 2px solid var(--c-papier);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--dauer-kurz) var(--kurve);
}

input[type="checkbox"]:checked {
  background: var(--c-nacht-900);
}

input[type="checkbox"]:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: var(--linie-dick) solid var(--farbe-fokus);
  outline-offset: 2px;
}

input[aria-invalid="true"] {
  border-color: var(--c-fehler);
}

.einwilligung {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-s);
  line-height: var(--zh-mittel);
  cursor: pointer;
}

/* Datei-Feld */
.datei {
  position: relative;
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: var(--s-5);
  border: var(--linie) dashed var(--c-nacht-600);
  background: var(--c-grau-50);
}

.datei input[type="file"] {
  max-width: 100%;
  font-size: var(--fs-s);
}

.datei input[type="file"]::file-selector-button {
  margin-right: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--linie-dick) solid var(--c-nacht-900);
  background: var(--c-papier);
  color: var(--c-nacht-900);
  font-family: var(--schrift-label);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.datei input[type="file"]::file-selector-button:hover {
  background: var(--c-nacht-900);
  color: var(--c-papier);
}

.datei-vorschau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--s-3);
  list-style: none;
  width: 100%;
}

.datei-vorschau li {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: var(--farbe-text-leise);
}

.datei-vorschau img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--linie) solid var(--c-nacht-900);
}

/* Zwei Felder nebeneinander, Aktionszeile, Dateiliste */
.formular__zeile {
  display: grid;
  gap: var(--s-5) var(--rinne);
}

@media (min-width: 40rem) {
  .formular__zeile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formular__zeile--drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.formular__aktion {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding-top: var(--s-4);
  border-top: var(--linie) solid var(--farbe-linie);
}

.datei-liste {
  display: grid;
  gap: var(--s-1);
  list-style: none;
  font-size: var(--fs-s);
}

.datei-liste li::before {
  content: "▪ ";
  color: var(--c-ocker-600);
}

/* Kontaktdaten mit Icon */
.kontaktliste {
  display: grid;
  gap: var(--s-3);
  list-style: none;
}

.kontaktliste li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.kontaktliste a {
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-kraeftig);
  text-decoration-color: var(--farbe-akzent);
}

/* Fehlerübersicht über dem Formular */
.fehleruebersicht ul {
  margin-top: var(--s-2);
  padding-left: 1.25rem;
}

.fehleruebersicht a {
  font-weight: var(--gewicht-kraeftig);
}

/* Demo-Bestätigung nach dem Absenden */
.bestaetigung {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: var(--linie-dick) solid var(--c-erfolg);
  background: var(--c-erfolg-hell);
  color: var(--c-nacht-900);
}

.bestaetigung h2,
.bestaetigung h3 {
  font-size: var(--fs-xl);
}

.bestaetigung:focus {
  outline: none;
}

.bestaetigung:focus-visible {
  outline: var(--linie-dick) solid var(--farbe-fokus);
  outline-offset: 3px;
}

/* --- Merkmale als Tabellenzellen (Vorteile, Grundsätze, Werte) ----------- */
.merkmale {
  display: grid;
  list-style: none;
  border-top: var(--linie) solid var(--c-nacht-900);
  border-left: var(--linie) solid var(--c-nacht-900);
}

.merkmal {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  border-right: var(--linie) solid var(--c-nacht-900);
  border-bottom: var(--linie) solid var(--c-nacht-900);
  background: var(--farbe-grund);
}

.merkmal__nr {
  color: var(--farbe-akzent-text);
  font-family: var(--schrift-label);
  font-size: var(--fs-xl);
  font-weight: var(--gewicht-kraeftig);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.merkmal h3 {
  font-size: var(--fs-l);
}

@media (min-width: 48rem) {
  .merkmale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .merkmale--vier {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Tabellen ---------------------------------------------------------------- */
/* Scroll-Schatten: zeigt an, dass eine breite Tabelle seitlich weitergeht */
.tabelle-huelle {
  overflow-x: auto;
  border-top: var(--linie-dick) solid var(--c-nacht-900);
  background:
    linear-gradient(to right, var(--farbe-grund) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--farbe-grund) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--c-nacht-900) 20%, transparent), transparent) left center / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--c-nacht-900) 20%, transparent), transparent) right center / 0.875rem 100% no-repeat scroll;
}

/* Scrollbarer Bereich ist per Tastatur fokussierbar (Pfeiltasten scrollen) */
.tabelle-huelle:focus-visible {
  outline-offset: 2px;
}

.tabelle {
  min-width: 36rem;
  font-size: var(--fs-s);
}

.tabelle caption {
  padding: var(--s-3) 0;
  text-align: left;
  color: var(--farbe-text-leise);
  font-size: var(--fs-s);
  caption-side: bottom;
}

.tabelle th,
.tabelle td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--linie) solid var(--farbe-linie);
  text-align: left;
  vertical-align: top;
}

.tabelle thead th {
  color: var(--farbe-text-leise);
  font-family: var(--schrift-label);
  font-size: var(--fs-xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tabelle tbody th {
  color: var(--c-nacht-900);
  font-weight: var(--gewicht-kraeftig);
  white-space: nowrap;
}

/* Hinweis, der nur ohne JavaScript erscheint */
.nur-ohne-js {
  display: none;
}

@media (scripting: none) {
  .nur-ohne-js {
    display: block;
  }

  .nur-mit-js {
    display: none !important;
  }
}