/* ideenhunger Kickoff-Tool. Dark, editorial, reduced.
   Hierarchy comes from size and space, not from weight, boxes or caps. */

@font-face { font-family: "Brockmann"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/brockmann-regular-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/brockmann-regularitalic-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/brockmann-medium-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/brockmann-mediumitalic-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/brockmann-semibold-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 600; font-style: italic; font-display: swap; src: url("../fonts/brockmann-semibolditalic-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/brockmann-bold-webfont.woff2") format("woff2"); }
@font-face { font-family: "Brockmann"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/brockmann-bolditalic-webfont.woff2") format("woff2"); }

:root {
  --eerie: #151B1E;
  --white: #FFFFFF;
  --tea: #C9FFB3;

  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.4);
  --muted: rgba(255, 255, 255, 0.64);

  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  --gutter: 1.5rem;
  --maxw: 72rem;
  --read: 44rem;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--eerie);
  color: var(--white);
  font-family: "Brockmann", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-18);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; font-weight: 400; }
b, strong { font-weight: 400; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--tea); outline-offset: 3px; }
::selection { background: var(--tea); color: var(--eerie); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--tea); color: var(--eerie); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { top: 1rem; }

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

/* Header and footer */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem var(--gutter);
  width: 100%; max-width: var(--maxw); margin: 0 auto;
}
.kopf__logo img { height: 2rem; width: auto; }
.kopf__status { font-size: var(--fs-14); color: var(--muted); }

.fuss {
  margin-top: auto; padding: 2rem var(--gutter);
  width: 100%; max-width: var(--maxw); margin-left: auto; margin-right: auto;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: var(--fs-14); color: var(--muted);
  border-top: 1px solid var(--line);
}
.fuss p { max-width: 40rem; }
.fuss nav { display: flex; gap: 1.5rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tea); }

main {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
  outline: none;
}

/* Type */
.kicker, .schritt-zaehler { font-size: var(--fs-14); color: var(--muted); }
.titel-gross {
  font-size: var(--fs-48); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 16ch; margin-top: 1rem;
}
.titel-frage {
  font-size: var(--fs-32); line-height: 1.2; letter-spacing: -0.01em;
  margin-top: 1.5rem; max-width: 28ch;
}
.intro { font-size: var(--fs-20); color: var(--muted); max-width: 36rem; margin-top: 1.5rem; }
.hilfe { color: var(--muted); max-width: var(--read); margin-top: 1rem; font-size: var(--fs-18); }
.notiz { color: var(--muted); font-size: var(--fs-16); }
.beispiel { max-width: var(--read); margin-top: 1rem; color: var(--muted); }
.beispiel b { color: var(--white); }

@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; }
  .titel-gross { font-size: var(--fs-64); }
  .titel-frage { font-size: var(--fs-40); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem 1.5rem;
  background: var(--tea); color: var(--eerie);
  border: 1px solid var(--tea); border-radius: 0;
  font-size: var(--fs-16); cursor: pointer; text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.15s;
}
.btn:hover { background: var(--white); border-color: var(--white); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--tea); border-color: var(--tea); }
.btn--text {
  background: none; border: 0; padding: 0.5rem 0; min-height: 0; border-radius: 0;
  color: var(--muted); text-decoration: underline; text-underline-offset: 0.25em;
}
.btn--text:hover { background: none; color: var(--tea); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Start */
.start-karten { margin-top: 4rem; border-top: 1px solid var(--line); }
.karte {
  display: grid; gap: 1rem 1.5rem; grid-template-columns: 2.5rem 1fr;
  padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.karte__nr { font-size: var(--fs-24); line-height: 1.2; color: var(--tea); }
.karte__fuss { grid-column: 2; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 48rem) {
  .karte { grid-template-columns: 4rem 1fr auto; }
  .karte__fuss { grid-column: 3; justify-content: flex-end; min-width: 14rem; align-self: center; margin-top: 0; }
}
.karte--aus .karte__titel, .karte--aus .karte__text { color: var(--muted); }
.karte__titel { font-size: var(--fs-24); line-height: 1.2; }
.karte__text { margin-top: 0.5rem; max-width: 36rem; }
.karte__tag { font-size: var(--fs-14); color: var(--muted); }

.meldung { margin-top: 2rem; padding-left: 1rem; border-left: 2px solid var(--line-strong); font-size: var(--fs-16); }
.meldung--fehler { border-left-color: #ff8a80; color: #ffd4d0; }

.zwischenstand, .abgeschlossen {
  margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--tea); border-bottom: 1px solid var(--line);
}
.zwischenstand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.zwischenstand__titel, .abgeschlossen h2 { font-size: var(--fs-24); }
.abgeschlossen p { margin-top: 0.25rem; }
.zwischenstand__aktionen, .abgeschlossen__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.abgeschlossen__aktionen { margin-top: 1.5rem; }

/* Flow */
.flow-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.fortschritt { margin-top: 1rem; height: 1px; background: var(--line); }
.fortschritt__balken { height: 100%; width: 0; background: var(--tea); transition: width 0.4s ease; }

.schritt { margin-top: 0; }
.felder { margin-top: 3rem; display: grid; gap: 2.5rem; max-width: var(--read); }
.felder--breit { max-width: none; }

.feld { max-width: var(--read); }
.feld__label { display: block; font-size: var(--fs-18); margin-bottom: 0.5rem; color: var(--muted); }
.feld__unter { font-size: var(--fs-24); line-height: 1.2; margin-top: 1rem; }

.eingabe {
  display: block; width: 100%; padding: 1rem; background: var(--white); color: var(--eerie);
  border: 1px solid var(--white); border-radius: 0;
  font-size: var(--fs-18); line-height: 1.4; appearance: none;
}
.eingabe::placeholder { color: #75808a; }
.eingabe:focus-visible { outline: 2px solid var(--tea); outline-offset: 2px; }
textarea.eingabe { resize: vertical; min-height: 7rem; }

/* Choice list */
.auswahl { display: block; padding: 0; margin: 0; border: 0; min-width: 0; border-top: 1px solid var(--line); }
.option { position: relative; display: block; border-bottom: 1px solid var(--line); }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option__box { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; font-size: var(--fs-18); transition: color 0.2s; }
.option:hover .option__box { color: var(--tea); }
.weiss { margin-top: 3rem; display: flex; }
.weiss .option { display: inline-block; }
.weiss .option { border: 1px dashed var(--line-strong); transition: border-color 0.2s, background-color 0.2s; }
.weiss .option__box { padding: 1rem 1.25rem; color: var(--muted); }
.weiss .option:hover { border-color: var(--tea); }
.weiss .option input:checked + .option__box { color: var(--eerie); background: var(--tea); }
.weiss .option input:checked + .option__box .option__marke { border-color: var(--eerie); }
.weiss .option input:checked + .option__box .option__marke::after { background: var(--eerie); }
.option__marke {
  flex: none; width: 1rem; height: 1rem; border: 1px solid var(--line-strong); border-radius: 0;
  position: relative; top: 0.1rem; transition: border-color 0.2s;
}
.option__marke::after {
  content: ""; position: absolute; inset: 0.1875rem; background: var(--tea);
  transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.option input:checked + .option__box .option__marke { border-color: var(--tea); }
.option input:checked + .option__box .option__marke::after { transform: scale(1); }
.option input:checked + .option__box { color: var(--tea); }
.option input:focus-visible + .option__box { outline: 2px solid var(--tea); outline-offset: 2px; }

/* Matrix */
.matrix { width: 100%; }
.matrix__tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.matrix__tabelle thead th:first-child { width: 32%; }
.matrix__tabelle th, .matrix__tabelle td { padding: 0; text-align: center; vertical-align: middle; font-weight: 400; }
.matrix__tabelle thead th {
  font-size: var(--fs-14); color: var(--muted); line-height: 1.3;
  padding: 0 0.5rem 1rem; vertical-align: top;
}
.matrix__tabelle tbody tr { border-top: 1px solid var(--line); }
.matrix__tabelle tbody tr:last-child { border-bottom: 1px solid var(--line); }
.matrix__tabelle tbody th { text-align: left; font-size: var(--fs-18); padding: 1.25rem 1rem 1.25rem 0; }

.matrix__label {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 4rem; cursor: pointer; margin: 0;
}
.matrix__label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.matrix__punkt {
  display: block; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 0;
  border: 1px solid var(--line-strong); position: relative; transition: border-color 0.2s;
}
.matrix__punkt::after {
  content: ""; position: absolute; inset: 0.25rem; background: var(--tea);
  transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.matrix__label:hover .matrix__punkt { border-color: var(--white); }
.matrix__label input:checked ~ .matrix__punkt { border-color: var(--tea); }
.matrix__label input:checked ~ .matrix__punkt::after { transform: scale(1); }
.matrix__label input:focus-visible ~ .matrix__punkt { outline: 2px solid var(--tea); outline-offset: 3px; }
.matrix__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 47.99rem) {
  .matrix__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .matrix__tabelle, .matrix__tabelle tbody, .matrix__tabelle tr, .matrix__tabelle th, .matrix__tabelle td { display: block; }
  .matrix__tabelle tbody tr { padding: 1rem 0; }
  .matrix__tabelle tbody th { padding: 0 0 0.25rem; }
  .matrix__label { justify-content: flex-start; gap: 0.75rem; min-height: 2.75rem; }
  .matrix__text {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    white-space: normal; font-size: var(--fs-16); line-height: 1.3;
  }
}

/* Scale 1 to 10 */
.skala { max-width: var(--read); }
.skala__reihe { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.25rem; }
.skala__marke { position: absolute; left: 0; top: 0; height: 100%; background: var(--tea); opacity: 0; pointer-events: none; }
.skala__feld { position: relative; z-index: 1; }
.skala__feld input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.skala__zahl {
  display: flex; align-items: center; justify-content: center; height: 3rem;
  border: 1px solid var(--line); border-radius: 0; font-size: var(--fs-16);
  transition: border-color 0.2s, color 0.2s;
}
.skala__feld:hover .skala__zahl { border-color: var(--white); }
.skala__feld input:checked + .skala__zahl { color: var(--eerie); border-color: var(--tea); }
.skala__feld input:focus-visible + .skala__zahl { outline: 2px solid var(--tea); outline-offset: 2px; }
.skala__enden { display: flex; justify-content: space-between; margin-top: 0.75rem; font-size: var(--fs-14); color: var(--muted); }

/* Image pairs (QC4) */
.paare { display: block; border-bottom: 1px solid var(--line); }
.paar-zeile { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.paar { border: 0; margin: 0; min-width: 0; padding: 0; }
.paar__titel { display: flex; align-items: baseline; gap: 1rem; font-size: var(--fs-24); margin-bottom: 1.5rem; padding: 0; }
.paar__nr { color: var(--tea); }
.paar__titel small { font-size: var(--fs-14); color: var(--muted); }
.paar__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bildkarte { margin: 0; }
.bildkarte__bild {
  aspect-ratio: 4 / 3; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--muted); font-size: var(--fs-14);
}
.bildkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.bildkarte figcaption { margin-top: 0.5rem; font-size: var(--fs-16); }
.bildkarte--rechts figcaption { text-align: right; }
.paar__enden { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: var(--fs-14); color: var(--muted); }

/* Slider, ten steps */
.slider__wrap { margin-top: 1.5rem; }
.slider__feld { position: relative; }
.slider {
  display: block; width: 100%; height: 2.5rem; margin: 0; padding: 0; background: transparent;
  appearance: none; -webkit-appearance: none; cursor: pointer; position: relative; z-index: 1;
}
.slider::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
.slider::-moz-range-track { height: 1px; background: var(--line-strong); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem;
  background: var(--tea); border: 1px solid var(--tea); border-radius: 0;
  transition: background-color 0.2s, transform 0.15s;
}
.slider::-moz-range-thumb { width: 1.25rem; height: 1.25rem; background: var(--tea); border: 1px solid var(--tea); border-radius: 0; box-sizing: border-box; }
.slider.ungesetzt::-webkit-slider-thumb { background: var(--eerie); border-color: var(--line-strong); }
.slider.ungesetzt::-moz-range-thumb { background: var(--eerie); border-color: var(--line-strong); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--white); outline-offset: 2px; }
.slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--white); outline-offset: 2px; }
.slider__ticks {
  position: absolute; left: 0.625rem; right: 0.625rem; top: 50%; height: 0.5rem; margin-top: 0.75rem;
  display: flex; justify-content: space-between; pointer-events: none;
}
.slider__ticks i { width: 1px; height: 100%; background: var(--line-strong); }
.slider__aktion { display: flex; justify-content: center; align-items: center; min-height: 2.5rem; margin-top: 2rem; }
.slider__reset { min-height: 2.5rem; padding: 0 1.25rem; font-size: var(--fs-14); }
.slider__reset[hidden] { display: none; }

/* Notes */
.tipp { max-width: var(--read); margin-top: 2.5rem; }
.tipp b { color: var(--white); }

.info-liste { list-style: none; margin: 3rem 0 0; padding: 0; max-width: var(--read); counter-reset: info; border-top: 1px solid var(--line); }
.info-liste li { padding: 1.5rem 0 1.5rem 3rem; border-bottom: 1px solid var(--line); position: relative; counter-increment: info; }
.info-liste li::before { content: counter(info); position: absolute; left: 0; top: 1.5rem; font-size: var(--fs-20); color: var(--muted); }
.info-liste h3 { font-size: var(--fs-20); }
.info-liste p { color: var(--muted); margin-top: 0.25rem; font-size: var(--fs-16); }

.soft-hinweis { min-height: 1.5rem; margin-top: 2rem; max-width: var(--read); font-size: var(--fs-16); color: var(--tea); }
.soft-hinweis p + p { margin-top: 0.25rem; }

/* Navigation */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; max-width: var(--read);
}
.nav__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* Summary */
.zusammenfassung { margin-top: 2rem; max-width: var(--read); display: grid; gap: 1rem; }
.zf-block { padding: 1.5rem; border: 1px solid var(--line-strong); }
.zf-block__kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.zf-block__kicker { font-size: var(--fs-14); color: var(--muted); }
.zf-block__id { color: var(--tea); }
.zf-block__frage { font-size: var(--fs-20); margin-top: 0.25rem; }
.zf-block dl { margin: 1.5rem 0 0 3rem; display: grid; gap: 1rem; }
.zf-block dt { font-size: var(--fs-14); color: var(--muted); }
.zf-block dd { font-size: var(--fs-18); white-space: pre-wrap; overflow-wrap: anywhere; }
.zf-leer { color: var(--muted); }
.zf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.zf-liste li { position: relative; padding-left: 1.25rem; }
.zf-liste li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; background: var(--tea); }
@media (max-width: 39.99rem) { .zf-block { padding: 1rem; } .zf-block dl { margin-left: 1rem; } }

.kontakt { margin-top: 4rem; max-width: var(--read); display: grid; gap: 2rem; }
.kontakt h2 { font-size: var(--fs-32); line-height: 1.2; }
.kontakt__sub { margin-top: -1rem; }
.kontakt__raster { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .kontakt__raster { grid-template-columns: 1fr 1fr; } }
.pflicht::after { content: " *"; color: var(--tea); }
.feld__fehler { color: #ffd4d0; font-size: var(--fs-14); margin-top: 0.5rem; }
.eingabe[aria-invalid="true"] { border-color: #ff8a80; outline: 2px solid #ff8a80; outline-offset: 0; }

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

.zustimmung { display: flex; gap: 0.875rem; align-items: flex-start; font-size: var(--fs-16); }
.zustimmung input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--tea); flex: none; }
.zustimmung a { color: var(--tea); }

.captcha { min-height: 4rem; }
.captcha .notiz { margin-bottom: 0.5rem; }

/* Success */
.id-box { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--tea); border-bottom: 1px solid var(--line); max-width: var(--read); }
.id-box__label { font-size: var(--fs-14); color: var(--muted); }
.id-box__id { font-size: var(--fs-48); line-height: 1.1; color: var(--tea); margin-top: 0.25rem; }
.id-box .hilfe { margin-top: 1rem; }
.downloads { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Design-Kickoff: examples, ranking, checklist ---------- */

.beispiel-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--read); border-top: 1px solid var(--line); }
.beispiel-liste li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-16); }
.beispiel-liste__art { color: var(--muted); font-size: var(--fs-14); padding-top: 0.15rem; }

.rang { border-top: 1px solid var(--line); }
.rang__zeile {
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 0; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer;
  font-size: var(--fs-18); transition: color 0.2s;
}
.rang__zeile:hover { color: var(--tea); }
.rang__nr {
  flex: none; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--line-strong); font-size: var(--fs-14); color: var(--eerie);
  transition: background-color 0.25s, border-color 0.25s;
}
.rang__zeile.ist-gewaehlt { color: var(--tea); }
.rang__zeile.ist-gewaehlt .rang__nr { background: var(--tea); border-color: var(--tea); }
.feld--rang .notiz { margin-top: 1rem; min-height: 1.5rem; }

.checkliste { border-top: 1px solid var(--line); max-width: var(--read); }
.checkliste__zeile { border-bottom: 1px solid var(--line); }
.checkliste__zeile .option { border-bottom: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 0 1rem 2rem; }
.seg[hidden] { display: none; }
.seg__feld { position: relative; }
.seg__feld input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg__text {
  display: block; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); font-size: var(--fs-16);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.seg__feld:hover .seg__text { border-color: var(--white); }
.seg__feld input:checked + .seg__text { background: var(--tea); color: var(--eerie); border-color: var(--tea); }
.seg__feld input:focus-visible + .seg__text { outline: 2px solid var(--tea); outline-offset: 2px; }

.sliders { display: grid; gap: 3rem; max-width: var(--read); }
.sliders .slider__wrap { margin-top: 0; }
.slider__wrap--gross .paar__enden { font-size: var(--fs-18); color: var(--white); margin-top: 0.5rem; }
.slider__wrap--gross .slider__aktion { margin-top: 1rem; }

/* three text columns */
.spalten { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .spalten { grid-template-columns: repeat(3, 1fr); } }

/* table */
.tabelle__kopf { display: none; }
.tabelle__zeile { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.tabelle__liste .tabelle__zeile:last-child, .tabelle > .tabelle__zeile:last-of-type { border-bottom: 1px solid var(--line); }
.tabelle__titel { font-size: var(--fs-20); margin-bottom: 1rem; }
.tabelle__zellen { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tabelle__label { display: block; font-size: var(--fs-14); color: var(--muted); margin-bottom: 0.5rem; }
.tabelle__weg { margin-top: 0.5rem; font-size: var(--fs-14); }
.tabelle__neu { margin-top: 1.5rem; }
.tabelle__neu[hidden] { display: none; }
@media (min-width: 48rem) {
  .tabelle__kopf { display: grid; grid-template-columns: var(--spalten); gap: 1rem; padding-bottom: 0.75rem; font-size: var(--fs-14); color: var(--muted); }
  .tabelle__zellen { grid-template-columns: var(--spalten); }
  .tabelle__zeile .tabelle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabelle__titel { margin-bottom: 0.75rem; }
}

/* image upload */
.upload + .upload, .upload + .feld, .felder > .upload { margin-top: 0; }
.upload__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.upload__zaehler { font-size: var(--fs-14); color: var(--muted); }
.upload__raster { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: 1.5rem 0; }
.upload__raster:empty { padding: 0; }
@media (min-width: 40rem) { .upload__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .upload__raster { grid-template-columns: repeat(3, 1fr); } }
.upload__karte { margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.upload__karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.upload__aktion { margin-top: 1.5rem; }
.upload .notiz { margin-top: 1rem; min-height: 1.5rem; }

/* word cloud */
.wolke { display: grid; gap: 2rem; }
.wolke__aktion { position: sticky; bottom: 1rem; z-index: 5; padding: 1.25rem 1.5rem; border: 1px solid var(--tea); background: var(--eerie); display: grid; gap: 1rem; }
.wolke__aktion[hidden] { display: none; }
.wolke__aktion-text { font-size: var(--fs-18); }
.wolke__aktion-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.wolke__zonen { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .wolke__zonen { grid-template-columns: 1fr 1fr; } }
.wolke__zone { border: 1px dashed var(--line-strong); padding: 1.5rem; min-height: 9rem; }
.wolke__zone--passt { border-color: var(--tea); }
.wolke__zone--pool { border: 0; padding: 0; min-height: 0; }
.wolke__zone-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.wolke__zone-kopf .feld__unter { margin-top: 0; }
.wolke__zaehler { font-size: var(--fs-14); color: var(--muted); white-space: nowrap; }
.wolke__zone-inhalt, .wolke__pool { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 2.75rem; }
.wolke__pool-titel { margin-top: 1rem; }
.wolke__eigene .feld__unter { margin-top: 0; margin-bottom: 1rem; }
.wolke__eigene-reihe { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .wolke__eigene-reihe { grid-template-columns: repeat(3, 1fr); } }
.wolke .notiz { min-height: 1.5rem; }

.chip {
  display: inline-flex; align-items: stretch; background: transparent; color: var(--white);
  border: 1px solid var(--line-strong); border-radius: 0; font-size: var(--fs-18); line-height: 1.3;
  cursor: grab; user-select: none; -webkit-user-select: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.chip__text { padding: 0.5rem 1rem; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; cursor: inherit; }
.chip__x {
  display: flex; align-items: center; padding: 0 0.75rem 0 0.25rem; background: none; border: 0; border-radius: 0;
  color: var(--muted); cursor: pointer; transition: color 0.2s;
}
.chip__x:hover { color: var(--tea); }
.chip--gesetzt .chip__text { padding-right: 0.5rem; }
.chip:hover { border-color: var(--tea); color: var(--tea); }
.chip--gesetzt { border-color: var(--tea); }
.chip.ist-gewaehlt { background: var(--tea); color: var(--eerie); border-color: var(--tea); }
.chip.ist-gewaehlt .chip__x { color: var(--eerie); }
.chip.zieht { cursor: grabbing; background: var(--eerie); box-shadow: 0 0 0 1px var(--tea); }
.chip:focus-within { outline: 2px solid var(--tea); outline-offset: 2px; }
.chip__text:focus-visible, .chip__x:focus-visible { outline: none; }

/* summary extras */
.zf-liste--nr { counter-reset: zf; }
.zf-liste--nr li { counter-increment: zf; padding-left: 1.75rem; }
.zf-liste--nr li::before { content: counter(zf); width: auto; height: auto; background: none; top: 0; color: var(--tea); font-size: var(--fs-14); line-height: 1.8; }
.zf-bilder { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.zf-bilder figure { margin: 0; }
.zf-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.zf-bilder figcaption { margin-top: 0.5rem; font-size: var(--fs-14); color: var(--muted); }

.weiter { margin-top: 3rem; }
.weiter .info-liste { margin-top: 1rem; }
@media (max-width: 39.99rem) { .beispiel-liste li { grid-template-columns: 1fr; gap: 0.25rem; } }
.upload__karte .btn { justify-self: start; }

/* ---------- icons ---------- */

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mit-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.chip__x .icon { width: 1rem; height: 1rem; }
.btn .icon { width: 1.125em; height: 1.125em; }
.feld__unter .icon, .feld__label .icon { color: var(--tea); }
.tabelle__kopf .icon, .tabelle__label .icon { width: 1em; height: 1em; }

/* K7: competitors and role model apart */
.tabelle__gruppe { margin-bottom: 1rem; }
.tabelle__gruppe .feld__unter { margin-top: 0; }
.tabelle__gruppe .notiz { margin-top: 0.25rem; }
.tabelle__gruppe--neu { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--tea); }
.tabelle > .tabelle__zeile:last-child { border-bottom: 1px solid var(--line); }

/* ranking counter */
.rang__zaehler { margin-bottom: 0.75rem; }
.feld__nichts { margin-top: 1rem; }