/* Own The Feed · Noir: Schwarz, Weiß, Rot nur als Detail. Regeln dazu prüft tests/noir.test.js. */
:root {
  color-scheme: dark;
  --bg: #000000;
  --flaeche: #111113;
  --flaeche-2: #1c1c1e;
  --text: #ffffff;
  --leise: #a1a1a6;
  --linie: #27272a;
  --linie-stark: #48484a;
  --akzent: #ffffff;
  --akzent-dunkel: #d1d1d6;
  --akzent-hell: #1c1c1e;
  --auf-akzent: #000000;
  --gesperrt-text: #8e8e93;
  --gruen: #30d158;
  --gelb: #ffd60a;
  --rot: #ff5a67;
  --grau: #8e8e93;
  --marke-rot: #e5001e; --orange: #FF9F0A;
  --schrift:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial,
    sans-serif;
  --titel: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  line-height: 1.5;
  letter-spacing: -0.008em;
  font-variant-numeric: tabular-nums;
}
h1 {
  font-family: var(--titel);
  font-size: 2.7rem;
  line-height: 1.04;
  margin: 0 0 0.8rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}
h2 {
  font-family: var(--titel);
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}
p {
  margin: 0 0 1rem;
}
a {
  color: var(--text);
  text-underline-offset: 0.18em;
  text-decoration-color: var(--linie-stark);
}
a:hover {
  text-decoration-color: var(--text);
}
.klein {
  font-size: 0.88rem;
  color: var(--leise);
}
.lead {
  font-size: 1.15rem;
  color: var(--leise);
  max-width: 40rem;
}

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 6px;
}

.seite {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.seite.schmal {
  max-width: 720px;
}
.marke {
  margin-bottom: 3rem;
}
.marke-logo {
  display: block;
  height: 2rem;
  width: auto;
}

/* Knöpfe */
/* hidden gilt immer: .knopf & Co. setzen display und würden das Attribut sonst schlagen */
[hidden] {
  display: none !important;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--akzent);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.knopf:hover {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
}
.knopf:active {
  transform: scale(0.98);
}
.knopf.zweit {
  background: transparent;
  color: var(--text);
  border-color: var(--linie-stark);
}
.knopf.zweit:hover {
  background: var(--flaeche-2);
  border-color: var(--akzent);
}
.knopf.gross {
  min-height: 60px;
  font-size: 1.2rem;
  padding: 0.8rem 2.2rem;
}
.knopf[disabled],
.knopf[aria-disabled="true"] {
  background: var(--flaeche-2);
  border-color: var(--flaeche-2);
  color: var(--gesperrt-text);
  cursor: not-allowed;
  transform: none;
}

/* Start */
.band {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--gelb);
  background: var(--flaeche-2);
  border-radius: 0 10px 10px 0;
  margin-bottom: 2rem;
}
.band strong {
  white-space: nowrap;
}
.band-warnung {
  border-left-color: var(--rot);
}
.band-warnung strong {
  color: var(--rot);
}
.band-warnung ul {
  margin: 0;
  padding-left: 1.1rem;
}
.aktionen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
  margin: 2.4rem 0 1rem;
}
.aktionen .knopf {
  min-height: 104px;
  font-size: 1.25rem;
  flex-direction: column;
  border-radius: 18px;
  text-align: center;
}
.aktionen .knopf small {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.72;
}
.sperr-hinweis {
  margin: 0 0 1rem;
  color: var(--leise);
}

/* Pitch */
.umschalter {
  display: inline-flex;
  border: 2px solid var(--linie-stark);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 2rem;
  padding: 3px;
  gap: 3px;
}
.umschalter button {
  min-height: 44px;
  padding: 0.4rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.umschalter button:hover {
  background: var(--flaeche-2);
}
.umschalter button[aria-pressed="true"] {
  background: var(--akzent);
  color: var(--auf-akzent);
}
.satz {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linie);
}
.satz:last-of-type {
  border-bottom: 1px solid var(--linie);
}
.satz p {
  font-family: var(--titel);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0 0 0.5rem;
  max-width: 44rem;
}
.pitch-los {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Datenschutz lang */
.text-lang {
  max-width: 44rem;
}
.text-lang h1 {
  font-size: 1.9rem;
}
.text-lang li {
  margin-bottom: 0.8rem;
}

/* Aufnahme: Leiste oben, Inhalt, Leiste unten */
.rahmen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.oben {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.oben-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.fortschritt-text {
  font-weight: 600;
}
.uhr {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}
.uhr .wort {
  font-size: 0.9rem;
  font-weight: 600;
}
.uhr.warn {
  color: var(--gelb);
}
.uhr.ueber {
  color: var(--rot);
}
.balken {
  height: 2px;
  background: var(--linie);
}
.balken > div {
  height: 100%;
  background: var(--marke-rot);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.frage {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 2rem 9rem;
}
.frage h1 {
  font-size: 2.2rem;
}
.hinweis {
  color: var(--leise);
  margin: -0.2rem 0 1.4rem;
}
.unten {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid var(--linie);
  z-index: 5;
}
.unten-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.unten .meldung {
  flex: 1;
  color: var(--rot);
  font-weight: 600;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
}
.chip {
  min-height: 52px;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1.06rem;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.chip:hover {
  border-color: var(--akzent);
}
.chip .haken {
  width: 1.1em;
  font-weight: 700;
  display: none;
}
.chip[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 600;
}
.chip[aria-pressed="true"] .haken {
  display: inline-block;
}
.chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.genau {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.genau input {
  width: 9rem;
}

label.feld {
  display: block;
  margin-bottom: 1rem;
}
label.feld > span {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--leise);
}
label.feld > span em {
  font-style: normal;
  font-weight: 400;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input:not([type]) {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1.06rem;
}
input::placeholder {
  color: var(--grau);
}
input:focus {
  border-color: var(--akzent);
  outline: 1px solid var(--akzent);
  outline-offset: 0;
}
.felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}
.felder .breit {
  grid-column: 1 / -1;
}

.laden-suche {
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--linie);
}
.treffer {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
  overflow: hidden;
}
.treffer button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border: 0;
  border-top: 1px solid var(--linie);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.treffer li:first-child button {
  border-top: 0;
}
.treffer button:hover {
  background: var(--flaeche-2);
}
.status-zeile {
  margin: 0.6rem 0 0;
  min-height: 1.6rem;
}
.verknuepft {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--flaeche-2);
  color: var(--text);
  border-radius: 8px;
  font-weight: 600;
}
.leise-knopf {
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  margin-top: 0.6rem;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.leise-knopf:hover {
  background: var(--flaeche-2);
}
.leise-knopf[aria-pressed="true"] {
  background: var(--flaeche-2);
  border-color: var(--akzent);
  font-weight: 600;
}

.haken-zeile {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  cursor: pointer;
}
.haken-zeile input {
  width: 28px;
  height: 28px;
  margin-top: 0.1rem;
  accent-color: var(--akzent);
  flex: none;
}
.haken-zeile span {
  font-size: 1.06rem;
}
.dsgvo {
  padding: 1.1rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  margin-bottom: 1.2rem;
}
.dsgvo-mail { display: grid; gap: 0.7rem; }
.dsgvo-mail .knopf-reihe input { flex: 1 1 16rem; min-width: 0; }
.dsgvo p:last-child {
  margin-bottom: 0;
}
.dsgvo h2 {
  font-size: 1rem;
}
.gruppe {
  margin-bottom: 1.6rem;
}
.gruppe h2 {
  font-family: var(--schrift);
  color: var(--leise);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.7rem;
}
.getrennt {
  border-top: 1px solid var(--linie);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}
.toast {
  position: fixed;
  right: 1.2rem;
  bottom: 6rem;
  background: var(--flaeche-2);
  color: var(--text);
  border: 1px solid var(--linie-stark);
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  z-index: 9;
  max-width: 22rem;
}
.toast.toast-fehler {
  border-color: var(--rot);
  font-weight: 600;
  max-width: 26rem;
}

@media (max-width: 760px) {
  h1 {
    font-size: 2.1rem;
  }
  .aktionen,
  .felder {
    grid-template-columns: 1fr;
  }
  .seite,
  .frage,
  .oben-zeile,
  .unten-zeile {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Ergebnis, Angebot, Unterschrift */
.block {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linie);
}
.block:first-of-type {
  border-top: 0;
}
.band-hinweis {
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--gelb);
  background: var(--flaeche-2);
  border-radius: 0 10px 10px 0;
  margin: 0 0 1rem;
}
.quelle {
  margin-top: 0.5rem;
  max-width: 46rem;
}
.ampel {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ampel-zeile {
  display: grid;
  grid-template-columns: 1.2rem 9rem 7.5rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: 1px solid var(--linie);
}
.ampel-zeile:first-child {
  border-top: 0;
}
.ampel-zeile .punkt {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--grau);
  align-self: center;
}
.ampel-zeile.gruen .punkt {
  background: var(--gruen);
}
.ampel-zeile.gelb .punkt {
  background: var(--gelb);
}
.ampel-zeile.rot .punkt {
  background: var(--rot);
}
.ampel-zeile .bereich {
  font-weight: 600;
}
.ampel-zeile .wort {
  font-weight: 600;
}
.ampel-zeile.gruen .wort {
  color: var(--gruen);
}
.ampel-zeile.gelb .wort {
  color: var(--gelb);
}
.ampel-zeile.rot .wort {
  color: var(--rot);
}
.ampel-zeile.grau .wort {
  color: var(--leise);
}
.rang {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}
.rang li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--linie);
}
.rang li.eigen {
  font-weight: 700;
  background: var(--flaeche-2);
  border-radius: 10px;
}
.rang .werte {
  white-space: nowrap;
}
.gross-satz {
  font-family: var(--titel);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 44rem;
}
.weiter-zeile {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.angebot-raster {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 2.5rem;
  align-items: start;
}
.angebot-raster aside {
  position: sticky;
  top: 1rem;
}
.leistung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  margin-bottom: 0.5rem;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.leistung.an {
  border-color: var(--akzent);
  background: var(--flaeche-2);
}
.leistung.grau {
  opacity: 0.6;
}
.leistung-label {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  flex: 1 1 18rem;
  min-height: 44px;
  cursor: pointer;
}
.leistung-label input {
  width: 28px;
  height: 28px;
  margin-top: 0.1rem;
  accent-color: var(--akzent);
  flex: none;
}
.leistung-text {
  display: flex;
  flex-direction: column;
}
.preis {
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.preis-feld {
  width: 6.5rem !important;
  text-align: right;
}
.preis .min {
  font-weight: 400;
  flex-basis: 100%;
  text-align: right;
}
.zeile-fehler {
  flex-basis: 100%;
  color: var(--rot);
  font-weight: 600;
}
.zeile-fehler:empty {
  display: none;
}
.summe {
  border-top: 0;
}
.summen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1.2rem;
  margin: 0 0 0.6rem;
}
.summen dt {
  color: var(--leise);
}
.summen dd {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  text-align: right;
  font-size: 1.15rem;
}
.knopf-spalte {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.kunden-posten {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kunden-posten li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  margin-bottom: 0.5rem;
}
.kunden-posten .haken {
  color: var(--text);
  font-weight: 700;
}
.kunden-posten .preis {
  margin-left: auto;
  font-weight: 600;
}
.aktion-meldung {
  min-height: 1.5rem;
  margin: 0.4rem 0;
}
.aktion-meldung.fehler,
.fehler {
  color: var(--rot);
  font-weight: 600;
}
input[type="date"] {
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1.06rem;
  width: 100%;
}
.zeichen-rahmen {
  margin: 1.2rem 0;
}
.zeichnung {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 1;
  border: 0;
  border-radius: 12px;
  background: #fff;
  cursor: crosshair;
}
@media (max-width: 900px) {
  .angebot-raster {
    grid-template-columns: 1fr;
  }
  .ampel-zeile {
    grid-template-columns: 1.2rem 1fr;
  }
  .ampel-zeile .wort,
  .ampel-zeile .satz-text {
    grid-column: 2;
  }
}
.summen.luecke {
  max-width: 36rem;
}

/* Backoffice + Einstellungen */
.seite.breit {
  max-width: 1100px;
}
.zurueck {
  display: inline-block;
  margin-bottom: 1rem;
  min-height: 44px;
  line-height: 44px;
  font-weight: 600;
}
.kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.4rem 0 0.6rem;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.kachel-zahl {
  font-family: var(--titel);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.kachel-text {
  color: var(--leise);
  font-size: 0.95rem;
}
.heute-gruppe {
  margin-bottom: 1rem;
}
.heute-gruppe h3,
.block-inner h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.heute-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.heute-zeile {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.4rem 0;
  border-top: 1px solid var(--linie);
  min-height: 52px;
}
.heute-firma {
  font-weight: 600;
}
.heute-text {
  color: var(--leise);
}
.heute-knoepfe {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.klein-knopf {
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  font-size: 0.98rem;
}
.knopf.gefahr {
  background: transparent;
  border-color: var(--rot);
  color: var(--rot);
}
.knopf.gefahr:hover {
  background: var(--flaeche-2);
  border-color: var(--rot);
}
.bestaetigung {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.frage-text {
  font-weight: 600;
  color: var(--rot);
}
.tabelle-rahmen {
  overflow-x: auto;
}
.tabelle {
  width: 100%;
  border-collapse: collapse;
}
.tabelle th {
  text-align: left;
  font-size: 0.82rem;
  color: var(--leise);
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--linie-stark);
}
.tabelle td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
.tabelle .zahl {
  text-align: right;
}
.tabelle.liste td {
  min-height: 48px;
}
.zeilen-link {
  font-weight: 600;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.punkte {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.pkt {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--grau);
  display: inline-block;
}
.pkt.gruen {
  background: var(--gruen);
}
.pkt.gelb {
  background: var(--gelb);
}
.pkt.rot {
  background: var(--rot);
}
.status-wort {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 8px;
  background: var(--flaeche-2);
  font-weight: 600;
}
.status-wort.s-kunde {
  background: var(--akzent);
  color: var(--auf-akzent);
}
.status-wort.s-nein,
.status-wort.s-ehemalig {
  color: var(--leise);
}
.auswahl {
  min-height: 48px;
  width: 100%;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1.06rem;
}
input[type="number"],
input[type="date"],
.felder input {
  width: 100%;
}
.block-inner {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.knopf-reihe {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.8rem 0;
  align-items: center;
}
.einmalig-box {
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 0.8rem 1rem 1rem;
  margin: 0 0 1rem;
}
.einmalig-box legend {
  font-weight: 600;
  padding: 0 0.4rem;
}
.einmalig-zeile {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.5rem;
  min-height: 48px;
}
.einmalig-name {
  flex: 1;
  font-weight: 600;
}
.einmalig-neu {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}
.einmalig-neu .auswahl {
  width: auto;
  min-width: 16rem;
}
.datei {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.datei-knopf {
  cursor: pointer;
  position: relative;
}
.datei-knopf:focus-within {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}
.summen.links dd {
  text-align: left;
  font-weight: 600;
  font-size: 1.02rem;
}
.gefahr-bereich h2 {
  color: var(--rot);
}
.felder.drei {
  grid-template-columns: repeat(3, 1fr);
}
.befehl {
  background: var(--flaeche-2);
  color: var(--text);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.95rem;
  user-select: all;
}
.pruef-haken {
  border: 2px solid var(--rot);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  background: transparent;
  max-width: 32rem;
}
.preise input {
  width: 100%;
}
.preise .preis-feld {
  width: 7.5rem;
  text-align: right;
}
.heute-zeile + .heute-zeile {
  border-top: 1px solid var(--linie);
}
@media (max-width: 900px) {
  .kacheln,
  .felder.drei {
    grid-template-columns: 1fr;
  }
  .heute-zeile {
    grid-template-columns: 1fr;
  }
  .heute-knoepfe {
    justify-content: flex-start;
  }
}
.preise td:first-child {
  width: 45%;
}
.preise td:nth-child(3) {
  white-space: nowrap;
}
.punkte-mit-text {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
}
.ampel-summe {
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
}
.ampel-liste {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
}
.ampel-eintrag {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-height: 36px;
}
.ampel-eintrag .pkt {
  background: var(--grau);
}
.ampel-eintrag.gruen .pkt {
  background: var(--gruen);
}
.ampel-eintrag.gelb .pkt {
  background: var(--gelb);
}
.ampel-eintrag.rot .pkt {
  background: var(--rot);
}
.ampel-eintrag .bereich-name {
  font-weight: 600;
  min-width: 8rem;
}
.ampel-eintrag .wort {
  font-weight: 600;
}
.ampel-eintrag.gruen .wort {
  color: var(--gruen);
}
.ampel-eintrag.gelb .wort {
  color: var(--gelb);
}
.ampel-eintrag.rot .wort {
  color: var(--rot);
}
.ampel-eintrag.grau .wort {
  color: var(--leise);
}

/* Gutachten Stufe 2 */
textarea.freitext { width: 100%; padding: .7rem .9rem; border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 1.06rem; resize: vertical; }
textarea.freitext:focus { border-color: var(--akzent); outline: 1px solid var(--akzent); outline-offset: 0; }

/* Gutachten: Kopf, echte Ampeln, Lob, Diagramme, Karten */
.gutachten .marke { margin-bottom: 1.6rem; }
.gutachten h1 { overflow-wrap: anywhere; }
.gutachten .lead { margin-bottom: 0.4rem; }
.g-etikett { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: .7rem; }
.g-abschnitt { padding: 2rem 0; }
.g-abschnitt:last-child { padding-bottom: 0; }
.g-abschnitt > h2 { font-size: 1.7rem; letter-spacing: -.03em; margin-bottom: 1.3rem; }
.g-ampeln { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.g-ampel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .9rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--linie); }
.g-ampel:first-child { border-top: 0; }
.g-ampel .info-feld { grid-column: 1 / -1; }
.g-ampel-text { display: flex; flex-direction: column; min-width: 0; }
.g-ampel strong { font-weight: 600; line-height: 1.25; }
.g-wort { font-size: .9rem; color: var(--leise); }
.ampelgehaeuse { display: flex; flex-direction: column; gap: 3px; padding: 5px; border-radius: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.licht { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--flaeche-2); }
.licht.rot.an { background: var(--rot); box-shadow: 0 0 14px var(--rot); }
.licht.gelb.an { background: var(--gelb); box-shadow: 0 0 14px var(--gelb); }
.licht.gruen.an { background: var(--gruen); box-shadow: 0 0 14px var(--gruen); }
.g-gut { list-style: none; margin: 0; padding: 0; }
.g-gut li { padding: .75rem 0 .75rem 1.9rem; border-top: 1px solid var(--linie); position: relative; font-size: 1.08rem; }
.g-gut li:first-child { border-top: 0; }
.g-gut li::before { content: "✓"; position: absolute; left: .2rem; font-weight: 700; color: var(--gruen); }
.g-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .75rem; }
.g-diagramm { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.g-diagramm figcaption { font-weight: 600; }
.g-quelle { margin: 0; color: var(--leise); }
.g-abschnitt > .g-quelle.g-marke { margin-top: .75rem; }
.g-quelle a { color: inherit; }
.g-zeile-balken { display: grid; grid-template-columns: 7.5rem 1fr 3.2rem; gap: .6rem; align-items: center; padding: .28rem 0; font-size: .95rem; color: var(--leise); }
.g-zeile-balken.eigen { color: var(--text); font-weight: 600; }
.g-balken-spur { display: block; height: 10px; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; }
.g-balken-fuell { display: block; height: 100%; border-radius: 99px; background: var(--linie-stark); }
.eigen .g-balken-fuell { background: var(--text); }
.g-balken-wert { text-align: right; }
.g-karten { display: flex; flex-direction: column; gap: .75rem; }
.g-karte { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark); border-radius: 18px; padding: 1.4rem 1.5rem; }
.g-karte.rot { border-left-color: var(--rot); } .g-karte.gelb { border-left-color: var(--gelb); } .g-karte.gruen { border-left-color: var(--gruen); }
.g-karte h3 { font-family: var(--titel); font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; margin: 0; align-self: center; }
.g-karte > .info-feld { margin-bottom: .6rem; }
.g-karte > h3 { margin-bottom: .6rem; }
.g-karte > .info-zeile { margin-bottom: .6rem; }
.g-teil { padding: .75rem 0; border-top: 1px solid var(--linie); }
.g-teil h4 { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 0 0 .4rem; }
.g-teil p { margin: 0; }
.g-zahlen { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; color: var(--leise); font-size: .95rem; overflow-wrap: anywhere; }
.g-aussage > p { margin: 0; }
.g-aussage + .g-aussage { margin-top: 1.1rem; }
.g-abschnitt > p + .g-quelle { margin-top: -.6rem; }
.g-aussage .g-quelle { margin-top: .25rem; }
.g-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .75rem; align-items: start; margin-top: 1.1rem; }
.g-live-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.g-live-karte h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.g-befund { margin: 0; color: var(--leise); }
.g-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.g-chip { font-size: .82rem; padding: .22rem .65rem; border-radius: 999px; background: var(--flaeche-2); }
.g-ig-kopf { display: flex; gap: .8rem; align-items: center; }
.g-ig-kopf p { margin: 0; }
.g-ig-bild { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: none; }
.g-ig-bio { margin: 0; font-size: .92rem; white-space: pre-line; }
.g-ig-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.g-ig-raster figure { margin: 0; min-width: 0; }
.g-ig-raster img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.g-ig-raster figcaption { padding: .2rem 0; }
.g-warte { margin-top: .9rem; max-width: 34rem; }
.g-warte-spur { height: .6rem; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.g-warte-fuell { height: 100%; background: var(--marke-rot); }
.g-warte-null { margin: .3rem 0 0; }
.g-warte-marke { position: relative; height: 2.6rem; }
.g-warte-marke > span { position: absolute; top: 0; display: flex; flex-direction: column; white-space: nowrap; }
.g-tiktok { width: 100%; height: 26rem; border: 0; border-radius: 12px; background: var(--flaeche-2); }
.g-website { width: 100%; height: 32rem; border: 0; border-radius: 12px; background: var(--flaeche-2); }
.g-website-bild { width: 100%; max-width: 20rem; height: auto; align-self: center; border-radius: 12px; }
.g-website-oeffnen { align-self: flex-start; }
.g-google-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.g-google-raster figure { margin: 0; min-width: 0; }
.g-google-raster img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.g-google-raster figcaption { padding: .2rem 0; overflow-wrap: anywhere; }
.g-google-oeffnen, .g-tiktok-oeffnen, .g-tiktok-zeigen { align-self: flex-start; }
.g-tiktok-name { margin: .15rem 0 0; }
.g-google-adresse { margin: -.4rem 0 0; color: var(--leise); }
.g-live-karte h3 .g-marke-google { font-weight: 400; } /* Googles Richtlinie: Der Text „Google Maps“ in Schriftstärke 400 */
.g-google-raster figure > a { display: block; }
@media print { .weiter-zeile, .g-live { display: none; } }

/* Block 6 und 7: Leistungen und Schätzfrage */
.g-leistungen { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: .5rem; }
.g-leistungen .leistung { margin: 0; }
.g-aus-auswertung { color: var(--text); }
.g-schaetzfelder { max-width: 34rem; margin-top: 1.2rem; }
.g-schaetzung { font-size: 1.05rem; }

/* Das ⓘ: Knopf groß genug für den Finger, Feld klappt unter die Zeile */
.info-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.info-zeile > :first-child { flex: 1; min-width: 0; }
.info-knopf { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -.2rem -.5rem 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--leise); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: color .2s, background-color .2s; }
.info-knopf:hover { color: var(--text); }
.info-knopf[aria-expanded="true"] { color: var(--text); background: var(--flaeche-2); }
.info-feld { margin: .5rem 0; padding: .1rem 0 .1rem .9rem; border-left: 2px solid var(--linie-stark); }
.info-feld p { margin: 0 0 .6rem; }
.info-feld p:last-child { margin-bottom: 0; }
.info-feld strong { display: block; font-size: .88rem; font-weight: 600; color: var(--leise); }

/* Funde: je Satz eine Zeile, groß, ohne Rahmen */
.funde { list-style: none; margin: 0; padding: 0; }
.fund { padding: 1.5rem 0; border-top: 1px solid var(--linie); }
.fund:first-child { border-top: 0; padding-top: .4rem; }
.fund:last-child { padding-bottom: 0; }
.fund .gross-satz { font-size: 1.5rem; line-height: 1.22; margin: 0; }
.fund .g-quelle { margin-top: .6rem; }

/* Gäste-Zitate: von Google, klar getrennt von unseren Inhalten */
.g-zitate .zitat-marke { margin: -.8rem 0 1rem; font-size: .88rem; font-weight: 500; color: var(--leise); }
.zitat-liste { list-style: none; margin: 0 0 1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--linie-stark); display: flex; flex-direction: column; gap: 1.1rem; }
.zitat blockquote { margin: 0 0 .3rem; font-size: 1.06rem; overflow-wrap: anywhere; }
.zitat-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .55rem; margin: 0; }
.zitat-autor a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.zitat-bild { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--flaeche-2); }
.zitat-herkunft { margin: 0; }
.zitat-herkunft a { display: inline-flex; align-items: center; min-height: 44px; }

/* Block 6: was wir tun, was Sie tun */
.loesung-zeilen { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.loesung-zeile { padding: 1.3rem 0; border-top: 1px solid var(--linie); }
.loesung-zeile:first-child { border-top: 0; padding-top: 0; }
.loesung-zeile:last-child { padding-bottom: .4rem; }
.loesung-zeile h2 { margin-bottom: .5rem; }
.loesung-zeile .g-etikett { margin-bottom: .4rem; }
.loesung-zeile .g-teil { border-top: 0; padding: .4rem 0; }

/* Zum Mitnehmen im Angebot: klein, ein Link */
.g-mitnehmen { margin: 1.2rem 0 0; }
.g-mitnehmen a { display: inline-flex; align-items: center; min-height: 44px; }
.g-mitnehmen .aktion-meldung { display: block; min-height: 0; }
.text-knopf { min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .18em; cursor: pointer; }
.text-knopf:hover { color: var(--text); }
.text-knopf[disabled] { color: var(--gesperrt-text); cursor: not-allowed; }

/* Fußleiste des Pitches: der lange Knopf der Schätzfrage bricht um, statt herauszuragen */
.gutachten ~ .unten .knopf { min-width: 0; text-align: center; }
.gutachten ~ .unten .knopf.gross { padding-left: 1.6rem; padding-right: 1.6rem; line-height: 1.2; }
@media (max-width: 760px) {
  .fund .gross-satz { font-size: 1.32rem; }
}

/* Nachschauen: was die Suche im Hintergrund gefunden hat, mit Ja/Nein bei Unsicherem */
.nachschau {
  margin: 0 auto 1rem;
  max-width: 46rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--flaeche);
}
.nachschau p {
  margin: 0;
}
.nachschau-zeile {
  color: var(--leise);
}
.nachschau-treffer {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}
.nachschau-treffer li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--text);
}
.nachschau-treffer span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nachschau-nein {
  flex: none;
  margin-top: 0;
  padding: 0.2rem 0.75rem;
  border-color: var(--linie);
  color: var(--leise);
}
.nachschau-frage {
  margin-top: 0.6rem;
}
.nachschau-label {
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--leise);
  font-weight: 600;
}
.nachschau-knoepfe {
  display: flex;
  gap: 0.6rem;
}

/* Anmeldung, Konto, Rollen */
.anmelden {
  max-width: 30rem;
}
.konto-form {
  max-width: 30rem;
}
.kopf-zeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem 1.5rem;
  flex-wrap: wrap;
}
.wer-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.wer-zeile .leise-knopf {
  margin-top: 0;
}
.wer-zeile a.leise-knopf {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.wer-name {
  font-weight: 600;
}
@media (min-width: 761px) {
  .aktionen.vier {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .aktionen.vier .knopf {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.von-filter {
  max-width: 18rem;
}
.konten-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.konto-zeile {
  padding: 0.8rem 0;
  border-top: 1px solid var(--linie);
}
.konto-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
}
.konto-kopf .klein {
  margin: 0;
}
.konto-link {
  width: 100%;
}
.konto-link-box .klein {
  margin: 0.6rem 0 0.4rem;
}
.konto-link-meldung {
  color: var(--leise);
}
.home {
  position: relative;
  flex: none;
}
.home-knopf {
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}
.home-fehler {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  width: min(20rem, 80vw);
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--flaeche-2);
  border: 1px solid var(--rot);
  font-size: 0.9rem;
  z-index: 6;
}
.home-fehler[hidden] {
  display: none;
}

/* Startseite: offene Aufnahmen */
.offene-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offene-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: center; }
.offene-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; }
.offene-knoepfe .leise-knopf { margin-top: 0; }
.offene-liste .aktion-meldung { flex-basis: 100%; margin: 0; }
.offene-liste .aktion-meldung:empty { display: none; }

/* Gesprächs-Bogen */
.gespraech-bogen { display: grid; gap: 1.2rem; }
.gespraech-bogen fieldset.chips { margin: 0; }
.bogen-frage { padding: 0; margin: 0 0 0.6rem; font-weight: 600; }
.gespraech-eintrag p { margin: 0.3rem 0; white-space: pre-wrap; }

/* Website-Bewertung (Design, CTA, Aussage): Prüf-Formular und Zeilen im Gutachten */
.urteil-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.urteil-zeile { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.urteil-zeile h2 { font-size: 1.1rem; margin: 0; }
.urteil-zeile .chips { margin: 0; }
.urteil-zeile .chip { min-height: 48px; padding: .45rem 1rem; }
.urteil-ohne { margin: 0; }
.g-urteil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.g-urteil-zeile { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: baseline; border-left: 3px solid var(--grau); padding-left: .8rem; min-width: 0; overflow-wrap: anywhere; }
.g-urteil-zeile.gut { border-left-color: var(--gruen); }
.g-urteil-zeile.mittel { border-left-color: var(--gelb); }
.g-urteil-zeile.schwach { border-left-color: var(--rot); }
.g-urteil-zeile p { grid-column: 1 / -1; margin: 0; }
.g-urteil-stufe { color: var(--leise); font-size: .9rem; }
.g-urteil-zusatz { margin: 0; color: var(--leise); }
.urteil-hand { margin-top: 1rem; }
.urteil-hand summary { cursor: pointer; color: var(--leise); min-height: 44px; display: flex; align-items: center; }
.urteil-hand[open] summary { margin-bottom: .8rem; }
.g-cta-info { display: inline-flex; align-items: center; gap: .4rem; }

/* Unterschrift am Handy: Laptop (QR-Code, Feld zum Aufklappen) und die Seite für den Kunden (handy.html) */
.handy-weg { margin: 1.2rem 0; }
.qr-flaeche { margin-top: 1rem; }
.qr-rahmen { display: inline-block; padding: 0.6rem; background: var(--text); border-radius: 12px; }
.qr-rahmen svg { display: block; width: min(100%, 17rem); height: auto; }
.am-geraet { margin: 1.2rem 0; border-top: 1px solid var(--linie); padding-top: 0.8rem; }
.am-geraet > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.handy-seite { overflow-wrap: anywhere; }
.handy-seite .marke { margin-bottom: 1.6rem; }
.handy-seite h1 { margin-bottom: 0.6rem; }
.handy-positionen { list-style: none; margin: 1rem 0; padding: 0; }
.handy-positionen li { padding: 0.8rem 0; border-top: 1px solid var(--linie); }
.handy-pos-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.handy-pos-kopf span { white-space: nowrap; font-weight: 600; }
.handy-summen { margin: 0 0 1rem; padding: 0.8rem 0; border-top: 1px solid var(--linie-stark); }
.handy-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.handy-zeile dt { color: var(--leise); }
.handy-zeile dd { margin: 0; font-weight: 600; text-align: right; }
.handy-pdf { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1rem 0 1.6rem; }
.handy-knoepfe { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }
.handy-knoepfe .knopf.gross { flex: 1 1 10rem; }
@media (max-width: 480px) {
  .handy-seite { padding: 1.4rem 1.1rem 3rem; }
}

/* Platz 1 im Ergebnis: Unterstreichung statt Fläche, Rot nie als Textfarbe */
.ziel-wort { border-bottom: 3px solid var(--marke-rot); }

/* Wissen: Skripte zum Lernen und Nachschlagen. Wortlaut groß, Abfragekarten zum Antippen, nichts ragt am Handy heraus */
.wissen {
  overflow-wrap: anywhere;
}
.wissen h1 {
  font-size: 2.3rem;
}
.wissen-kennung {
  margin: 0 0 0.4rem;
  color: var(--leise);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wissen-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0 0;
}
.wissen-kachel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  min-height: 104px;
  padding: 1.1rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  text-decoration: none;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.wissen-kachel:hover {
  background: var(--flaeche-2);
  border-color: var(--linie-stark);
}
.wissen-kachel-titel {
  font-family: var(--titel);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wissen-liste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  border-bottom: 1px solid var(--linie);
}
.wissen-liste + .weiter-zeile {
  border-top: 0;
}
.wissen-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.7rem 0.2rem;
  border-top: 1px solid var(--linie);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.wissen-zeile:hover {
  background: var(--flaeche);
}
.wissen-nr {
  color: var(--leise);
  font-weight: 400;
}
.wissen-pfeil {
  flex: none;
  color: var(--leise);
  font-size: 1.4rem;
  line-height: 1;
}
.wissen-eckdaten {
  display: grid;
  gap: 0.8rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
}
.wissen-eckdaten dt,
.wissen-wortlaut h2,
.wissen-feld h2 {
  color: var(--leise);
  font-family: var(--schrift);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.wissen-eckdaten dd {
  margin: 0.15rem 0 0;
}
.wissen-eckdaten dd p,
.wissen-eckdaten dd ul {
  margin: 0;
}
.wissen-wortlaut {
  margin: 2.2rem 0 0;
  padding: 0.1rem 0 0.1rem 1.2rem;
  border-left: 3px solid var(--marke-rot);
}
.wissen-wortlaut h2,
.wissen-feld h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.7rem;
  margin: 0 0 0.7rem;
}
.wissen-hinweis {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.wissen-wortlaut p {
  font-family: var(--titel);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 0 0 0.9rem;
  max-width: 38rem;
}
.wissen-wortlaut p:last-child {
  margin-bottom: 0;
}
.wissen-feld {
  padding: 1.4rem 0 0.4rem;
  border-top: 1px solid var(--linie);
}
.wissen-wortlaut + .wissen-feld {
  margin-top: 2.2rem;
}
.wissen-feld p {
  margin: 0 0 0.7rem;
}
.wissen ul:not(.wissen-paare) {
  margin: 0 0 0.7rem;
  padding-left: 1.2rem;
}
.wissen ul:not(.wissen-paare) li {
  margin-bottom: 0.4rem;
}
.wissen li::marker {
  color: var(--leise);
}
.wissen-feld[data-feld="pflichtfrage"] {
  margin: 0.6rem 0 1rem;
  padding: 1rem 1.2rem 0.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
}
.wissen-feld[data-feld="pflichtfrage"] + .wissen-feld {
  border-top: 0;
}
.wissen-feld[data-feld="nieSagen"] {
  padding-left: 1.2rem;
  border-left: 3px solid var(--rot);
}
.wissen-paare {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}
.wissen-paare li {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.wissen-falsch,
.wissen-richtig {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.wissen-falsch {
  color: var(--leise);
}
.wissen-zeichen {
  flex: none;
  width: 1rem;
  font-weight: 700;
}
.wissen-falsch .wissen-zeichen {
  color: var(--rot);
}
.wissen-richtig .wissen-zeichen {
  color: var(--gruen);
}
.wissen-karten {
  display: grid;
  gap: 0.75rem;
}
.wissen-karten h2 {
  margin-bottom: 0;
}
.wissen-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 64px;
  padding: 1rem 1.2rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.wissen-karte:hover {
  border-color: var(--linie-stark);
}
.wissen-karte[aria-expanded="true"] {
  background: var(--flaeche-2);
  border-color: var(--linie-stark);
}
.wissen-karte-frage {
  font-size: 1.05rem;
  font-weight: 600;
}
.wissen-karte-antwort {
  width: 100%;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie-stark);
  font-size: 1.05rem;
}
.wissen-karte-tipp {
  color: var(--leise);
  font-size: 0.82rem;
}
.wissen-text {
  margin-top: 1.4rem;
}
.wissen-punkte {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.wissen-punkt {
  padding: 1.1rem 1.2rem 0.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
}
.wissen-punkt h2 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.wissen-punkt p {
  margin: 0 0 0.7rem;
}
.wissen-einwand {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
}
.wissen-einwand[open] {
  border-color: var(--linie-stark);
}
.wissen-einwand > summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 0.95rem 3rem 0.95rem 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.wissen-einwand > summary::-webkit-details-marker {
  display: none;
}
.wissen-einwand > summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--leise);
  font-size: 1.4rem;
  font-weight: 400;
}
.wissen-einwand[open] > summary::after {
  content: "\2212";
}
.wissen-einwand-inhalt {
  padding: 0 1.2rem 0.4rem;
}
.wissen-einwand-inhalt p {
  margin: 0 0 0.7rem;
}
.wissen-weiter {
  margin-top: 2.4rem;
}
.wissen-weiter .knopf {
  line-height: 1.3;
  text-align: center;
}
.wissen-weiter .knopf:not(.zweit) {
  max-width: 26rem;
  border-radius: 18px;
}
@media (max-width: 760px) {
  .wissen h1 {
    font-size: 1.9rem;
  }
  .wissen-wortlaut p {
    font-size: 1.32rem;
  }
  .wissen-weiter {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .wissen-weiter .knopf:not(.zweit) {
    max-width: none;
  }
}