/* ==================================================================
   CAIDAO Leverage — Frage-Antwort-Dialog
   Farben und Schriften aus dem Leverage-Pitchdeck, geprüft gegen die
   Layoutspezifikation der Gruppe.

   Navy 244061 · Dunkelblau 142740 · Signal-Orange FF6601
   Hellblau A7C0E0 · Flächenblau EEF3FA · Grau 595959 · Linie DDDDDD
   Leverage/KT01 AD3235 · KT02 D05134

   Mobil zuerst. Alle Bedienelemente mindestens 48 px hoch, alle
   Eingabefelder mindestens 16 px groß — darunter zoomt iOS beim
   Antippen ins Formular hinein.
   ================================================================== */

/* ---------------- Schrift ----------------
   Lato liegt selbst auf dem Server. Eine Einbindung über fremde
   Server verbietet die Content-Security-Policy — und sie schickt
   außerdem die IP jedes Besuchers dorthin. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("schrift/lato-300.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schrift/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schrift/lato-700.woff2") format("woff2");
}

:root {
  --navy: #244061;
  --dunkel: #142740;
  --orange: #FF6601;
  --hellblau: #A7C0E0;
  --flaeche: #EEF3FA;
  --grau: #595959;
  --grau-hell: #7A8794;
  --linie: #DCE3EC;
  --weiss: #FFFFFF;
  --papier: #F7F9FC;

  --leverage: #AD3235;
  --leverage-tint: #FBEFEF;
  --kt02: #D05134;
  --kt02-tint: #FDF1EC;
  --gruen: #1F6B47;
  --gruen-tint: #EAF4EF;

  --bahn: 1120px;
  --schmal: 44rem;

  --r-klein: 8px;
  --r: 12px;
  --r-gross: 18px;

  --schatten: 0 1px 2px rgba(20, 39, 64, .05), 0 6px 18px rgba(20, 39, 64, .06);
  --schatten-tief: 0 2px 4px rgba(20, 39, 64, .06), 0 14px 34px rgba(20, 39, 64, .10);

  --tippziel: 3rem;   /* 48px */
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--dunkel);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 24px;
}

.bahn-schmal { max-width: var(--schmal); }

/* ==================================================================
   Produktkopfzeile — nach der Spezifikation für alle CAIDAO-Produkte
   (Vorlage foresight.caidao.de, Stand 27.09.2026). Werte unverändert
   übernommen; nicht "angleichen", sonst weicht der Kopf von Foresight ab.
   ================================================================== */

:root {
  --surface: #FFFFFF;
  --surface-2: #E6EBF1;
  --line: #CFD8E2;
  --line-strong: #AAB8C8;
  --ink: #101A26;
  --ink-2: #46566A;
  --ink-3: #78889C;
  /* --navy ist oben schon #244061 */
  --navy-2: #152740;
  --on-navy: #F4F7FB;
  --f-body: "Lato", "Segoe UI", Helvetica, Arial, sans-serif;
}

.sitehead {
  position: sticky; top: 0; z-index: 30; background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-body);
  line-height: 1.5;
}
.sitehead .inner {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px; max-width: 1120px; margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: inherit; margin-right: auto; min-width: 0;
}
.logo img { height: 30px; width: auto; display: block; flex: none; }
.logo span {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
  padding-left: 12px; border-left: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) { .logo span { display: none; } }
.sitenav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sitenav a.link {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 7px 10px; border-radius: 5px;
}
.sitenav a.link:hover { background: var(--surface-2); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); color: var(--on-navy); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.sm { padding: 5px 11px; font-size: 13px; }

/* Platzhalter, solange es keine Wortmarke des Produkts gibt (Spezifikation
   Abschnitt 5): Produktname in Lato Light 300, auf die 30px der Bildmarke gesetzt. */
.logo-wort {
  font-weight: 300; font-size: 23px; line-height: 30px; height: 30px;
  color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; flex: none;
}

/* Damit der Kopf auf dem Telefon einzeilig bleibt (Prüfliste), weichen die
   Ankerlinks der Landingpage und im Konto "Vorgänge" — dorthin führt auch
   die Marke. Anmelden, Kostenlos testen, Verwaltung und Abmelden bleiben. */
@media (max-width: 560px) {
  .sitehead .inner { padding: 12px 16px; gap: 10px; }
  .sitenav { flex-wrap: nowrap; }
  .sitenav a.link { padding: 7px 8px; white-space: nowrap; }
  .sitenav a.link-weit { display: none; }
  .sitenav .btn { white-space: nowrap; }
  .logo-wort { font-size: 16px; }
  .sitenav { gap: 4px; }
  .sitenav .btn.sm { padding: 5px 9px; }
}

/* ---------------- Seitentitel im Konto (unter dem Kopf) ---------------- */

.seitenkopf { margin-bottom: 1.75rem; }
.seitenkopf h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 700; color: var(--navy); margin: 0; line-height: 1.25; }
.seitenkopf .unterzeile { margin: 0.25rem 0 0; color: var(--grau); font-size: 0.95rem; }
.seitenkopf-wer { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--grau-hell); }

/* ---------------- Inhalt ---------------- */

.inhalt {
  flex: 1 0 auto;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 2.25rem 0 0.75rem;
  letter-spacing: -0.005em;
}
h2:first-child { margin-top: 0; }

h3 { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 0.5rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--leverage); }

.leise { color: var(--grau); font-size: 0.9rem; }
.abstand-oben { margin-top: 2rem; }

/* ---------------- Bühne der Landingpage ---------------- */

.buehne {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.buehne::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--orange), var(--leverage));
}

.buehne-innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.buehne-text { flex: 1 1 20rem; min-width: 0; }

.claim {
  font-weight: 300;
  font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.35rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.buehne-titel {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--leverage);
  margin: 0 0 0.15rem;
}

.buehne-unter { margin: 0; color: var(--grau); font-size: 0.93rem; }

.buehne-motiv {
  flex: 0 0 auto;
  width: 160px;
  height: auto;
  opacity: 0.9;
}

/* ---------------- Einstiege ---------------- */

.einstiege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.einstieg {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.einstieg:focus-within,
.einstieg:hover {
  box-shadow: var(--schatten-tief);
  border-color: var(--hellblau);
  transform: translateY(-1px);
}

.einstieg h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.einstieg p { margin: 0 0 1.25rem; color: var(--grau); font-size: 0.95rem; }
.einstieg .knopf { align-self: stretch; margin-top: auto; text-align: center; }

.einstieg-warnung {
  color: var(--leverage) !important;
  font-weight: 700;
  font-size: 0.92rem !important;
}

.start-fuss {
  color: var(--grau);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

/* ---------------- Formular ---------------- */

form { margin: 0; }

.feldgruppe { margin-bottom: 1.5rem; }

fieldset.feldgruppe {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.97rem;
}

.feld-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.97rem;
}

.feld-kopf label { margin: 0; }

.beschriftung-zusatz {
  display: block;
  font-weight: 400;
  color: var(--grau);
  font-size: 0.88rem;
  margin-top: 0.15rem;
  line-height: 1.45;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: max(1rem, 16px);
  color: var(--dunkel);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 0.75rem 0.9rem;
  min-height: var(--tippziel);
  box-shadow: inset 0 1px 2px rgba(20, 39, 64, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder, textarea::placeholder { color: var(--grau-hell); }

textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
select:hover,
textarea:hover { border-color: var(--hellblau); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(36, 64, 97, .14);
}

a:focus-visible,
button:focus-visible,
.knopf:focus-visible,
.chip input:focus-visible + .chip-text,
.wahl-knopf:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Eigene Auswahl statt des Systemmenüs */
.auswahl { position: relative; display: block; }

.auswahl select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}

.auswahl::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------------- Chips statt Aufklappmenü ---------------- */

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

.chip { display: block; margin: 0; font-weight: 400; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.chip-text {
  display: flex;
  align-items: center;
  min-height: var(--tippziel);
  padding: 0.55rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.chip-text:hover { border-color: var(--hellblau); background: var(--flaeche); }

.chip input:checked + .chip-text {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--weiss);
  font-weight: 700;
}

/* ---------------- Zwei große Wahlknöpfe ---------------- */

.wahl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.25rem 0 0.5rem;
}

.wahl-knopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
  text-align: left;
  font: inherit;
  color: var(--dunkel);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.wahl-knopf:hover {
  border-color: var(--navy);
  box-shadow: var(--schatten-tief);
  transform: translateY(-1px);
}

.wahl-text { flex: 1 1 auto; min-width: 0; }

.wahl-titel {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.3;
}

.wahl-stand {
  display: block;
  font-size: 0.88rem;
  color: var(--grau);
  margin-top: 0.1rem;
}

.wahl-stand-offen { color: var(--leverage); font-weight: 700; }

.wahl-pfeil {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--navy);
  border-top: 2px solid var(--navy);
  transform: rotate(45deg);
}

/* ---------------- Knöpfe ---------------- */

button,
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippziel);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--weiss);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--r);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:hover, .knopf:hover {
  background: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--weiss);
}

button[disabled] { opacity: .45; cursor: not-allowed; }

.knopf-leise { background: var(--weiss); color: var(--navy); }
.knopf-leise:hover { background: var(--flaeche); color: var(--navy); border-color: var(--navy); }

.knopfreihe {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.6rem;
}

.knopfreihe-eng { margin-top: 0; }

/* Auf dem Telefon führt der Hauptknopf, und beide sind voll breit */
@media (max-width: 30rem) {
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe > button, .knopfreihe > .knopf { width: 100%; }
}

/* ---------------- Hinweise ---------------- */

.hinweis {
  border-radius: var(--r);
  padding: 0.95rem 1.15rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--navy);
  background: var(--weiss);
  font-size: 0.97rem;
}

.hinweis-erfolg { border-left-color: var(--gruen); background: var(--gruen-tint); border-color: #CFE3D8; }
.hinweis-fehler { border-left-color: var(--leverage); background: var(--leverage-tint); border-color: #EDD2D3; }
.hinweis-warnung { border-left-color: var(--kt02); background: var(--kt02-tint); border-color: #F2D9CF; }

/* ---------------- Karte für Formulare ---------------- */

.blatt {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  padding: 1.5rem 1.4rem;
}

.anmeldung { max-width: 24rem; }

/* ---------------- Zeichenzähler ---------------- */

.zaehler {
  font-size: 0.82rem;
  color: var(--grau-hell);
  text-align: right;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
  min-height: 1.1em;
}

.zaehler-eng { color: var(--kt02); font-weight: 700; }

/* ---------------- Auswertung ---------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.75rem;
}

.kennzahl {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
}

.kennzahl .wert {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.kennzahl .bezeichnung { font-size: 0.85rem; color: var(--grau); }

.werkzeuge {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1.75rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1rem;
}

.werkzeuge .feldgruppe { margin-bottom: 0; flex: 1 1 12rem; }

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

.karte-kopf {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 0.6rem;
}

.marke-nummer, .karte-kopf .marke {
  display: inline-block;
  background: var(--flaeche);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.marke-nummer { background: var(--leverage); color: var(--weiss); }

.karte-frage { margin: 0 0 0.55rem; font-weight: 700; color: var(--dunkel); }
.karte-zusatz { margin: 0 0 0.4rem; font-size: 0.93rem; color: var(--grau); }

.karte-fuss {
  font-size: 0.85rem;
  color: var(--grau);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
}

.status-uebernommen { border-left: 4px solid var(--gruen); }
.status-uebernommen .karte-frage::before { content: "\2713\00a0"; color: var(--gruen); }
.status-verworfen { opacity: 0.6; background: var(--papier); border-style: dashed; }
.status-verworfen .karte-frage { text-decoration: line-through; }

.status-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.status-form .auswahl { display: inline-block; }
.status-form select { width: auto; min-height: 2.4rem; padding: 0.3rem 2.2rem 0.3rem 0.6rem; font-size: 0.88rem; }
.status-form .auswahl::after { right: 0.8rem; width: 0.4rem; height: 0.4rem; margin-top: -0.3rem; }
.status-form button { min-height: 2.4rem; padding: 0.3rem 0.85rem; font-size: 0.88rem; font-weight: 400; }

.feldname-leise { font-weight: 400; margin: 0; color: var(--grau); font-size: 0.85rem; }

.knopf-loeschen { color: var(--leverage); border-color: var(--linie); background: var(--weiss); }
.knopf-loeschen:hover { background: var(--leverage-tint); color: var(--leverage); border-color: var(--leverage); }

.ausgabefeld {
  width: 100%;
  min-height: 18rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Versteckte Falle gegen Formular-Roboter. Menschen sehen das Feld nie. */
.falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- Fuß ---------------- */

.fuss { flex: none; background: var(--navy); color: var(--weiss); position: relative; }
.fuss-marke { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--orange); }

.fuss-innen {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.82rem;
}

.fuss-abschnitt { color: var(--hellblau); }

/* ---------------- Ab Tablet ---------------- */

@media (min-width: 40rem) {
  .einstiege { grid-template-columns: 1fr 1fr; }
  .wahl { grid-template-columns: 1fr 1fr; }
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
  .buehne { padding: 2.25rem 2rem; }
  .buehne-motiv { width: 190px; }
  .blatt { padding: 1.75rem 1.9rem; }
  .einstieg .knopf { align-self: flex-start; }
}

/* ---------------- Klein ---------------- */

@media (max-width: 40rem) {
  body { font-size: 16.5px; }
  .bahn { padding: 0 16px; }
  .inhalt { padding-top: 1.5rem; }
  .buehne-motiv { width: 104px; }
  .buehne-innen { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .einstieg:hover, .wahl-knopf:hover { transform: none; }
}


/* ==================================================================
   Frage-Antwort-Dialog — Ergänzungen
   ================================================================== */

.entwurf {
  background: var(--kt02-tint);
  color: var(--kt02);
  border-bottom: 1px solid #F2D9CF;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
}


/* ---------------- Vorgänge ---------------- */

.einstiege-liste .einstieg p { margin-bottom: 0.6rem; }
.einstiege-liste .knopfreihe { margin-top: auto; padding-top: 0.6rem; }
.einstiege-liste .einstieg .knopf { align-self: auto; margin-top: 0; }
.einstieg-marke {
  font-size: 0.75rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--leverage) !important;
  margin-bottom: 0.3rem !important;
}
.einstieg-ruhig { opacity: 0.75; }
.einstieg-ruhig .einstieg-marke { color: var(--grau) !important; }

/* ---------------- Strang: Frage, Antworten, Nachfragen ---------------- */

.karte-kopf > span:first-child { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }

.marke-status { background: var(--weiss) !important; border: 1px solid var(--linie); color: var(--grau) !important; font-weight: 400 !important; }
.marke-uebernommen { border-color: #CFE3D8; color: var(--gruen) !important; }
.marke-beantwortet { background: var(--gruen) !important; border-color: var(--gruen); color: var(--weiss) !important; }
.marke-verworfen { background: var(--grau-hell) !important; border-color: var(--grau-hell); color: var(--weiss) !important; }
.marke-abgeschaltet { background: var(--grau-hell) !important; border-color: var(--grau-hell); color: var(--weiss) !important; }
.marke-nachfrage { background: var(--kt02-tint) !important; color: var(--kt02) !important; }

.status-beantwortet { border-left: 4px solid var(--gruen); }
.strang.status-verworfen { opacity: 0.6; background: var(--papier); border-style: dashed; }
.strang.status-verworfen > .karte-frage { text-decoration: line-through; }
.status-uebernommen .karte-frage::before { content: none; }

.nachfrage {
  margin: 1rem 0 0 0.6rem;
  padding: 0.85rem 0 0 1rem;
  border-left: 3px solid var(--kt02);
  border-top: 1px dashed var(--linie);
}
.nachfrage.status-verworfen { opacity: 0.6; }

.antwort {
  background: var(--flaeche);
  border-radius: var(--r-klein);
  padding: 0.7rem 0.9rem;
  margin: 0.7rem 0 0.2rem;
  border-left: 3px solid var(--navy);
}
.antwort-vollstaendig { border-left-color: var(--gruen); background: var(--gruen-tint); }
.antwort-teilweise { border-left-color: var(--kt02); }
.antwort-unzureichend { border-left-color: var(--leverage); background: var(--leverage-tint); }
.antwort-kopf { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.antwort-text { margin: 0; font-size: 0.95rem; }
.antwort .status-form { margin-top: 0.4rem; }
.antwort-fehlt { font-size: 0.88rem; color: var(--kt02); font-style: italic; margin: 0.4rem 0 0; }

.steuerung {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.7rem;
}

.bezug {
  border-left: 3px solid var(--kt02);
  padding: 0.2rem 0 0.2rem 0.9rem;
  margin-bottom: 1.25rem;
}
.bezug .leise { margin-bottom: 0.2rem; }

.knopf-mini { min-height: 2.2rem !important; padding: 0.25rem 0.8rem !important; font-size: 0.85rem !important; font-weight: 400 !important; }
.inline-form { display: inline-block; margin-left: 0.4rem; vertical-align: middle; }

.kennzahlen-fuenf { grid-template-columns: repeat(3, 1fr); }

/* ---------------- Formulare im Konto ---------------- */

.haken { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.haken input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.2rem 0 0; flex: none; accent-color: var(--navy); }
.haken-klein { align-items: center; font-size: 0.88rem; margin: 0; }
.haken-klein input { margin: 0; }

.zeilenform { display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap; }
.zeilenform .feldgruppe { flex: 1 1 16rem; margin-bottom: 0; }

.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.2rem; margin: 1.4rem 0 1rem; font-size: 0.95rem; }
.angaben dt { color: var(--grau); }
.angaben dd { margin: 0; font-weight: 700; color: var(--dunkel); }

/* ==================================================================
   Öffentliche Seiten: Landingpage, Anmeldung, Rechtliches
   ================================================================== */

.sicht-lp { background: var(--weiss); }

.lp-bahn { width: 100%; max-width: var(--bahn); margin: 0 auto; padding: 0 24px; }
.lp-schmal { max-width: 40rem; }

.lp-knopf-dunkel { background: var(--dunkel); border-color: var(--dunkel); color: var(--weiss); }
.lp-knopf-dunkel:hover { background: var(--navy); border-color: var(--navy); }

.lp-inhalt { flex: 1 0 auto; }

.lp-augenbraue {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leverage);
  margin: 0 0 0.9rem;
}

.lp-buehne {
  background: linear-gradient(180deg, var(--papier), var(--weiss));
  border-bottom: 1px solid var(--linie);
  padding: 3.5rem 0 4rem;
}
.lp-buehne-innen { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.lp-titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 1.3rem;
}
.lp-lead { font-size: 1.08rem; color: var(--grau); max-width: 36rem; margin: 0; }
.lp-klein { font-size: 0.85rem; color: var(--grau-hell); margin-top: 1rem; }
.lp-titel-klein { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 300; color: var(--navy); margin: 0 0 1rem; letter-spacing: -0.02em; line-height: 1.2; }

.lp-fenster {
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-tief);
  overflow: hidden;
}
.lp-fenster-leiste { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.lp-fenster-leiste span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--hellblau); }
.lp-fenster-inhalt { padding: 1.25rem 1.3rem 1.4rem; }
.lp-muster-kopf { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.lp-muster-kopf .marke { display: inline-block; background: var(--flaeche); color: var(--navy); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.78rem; font-weight: 700; line-height: 1.5; }
.lp-muster-kopf .marke-nummer { background: var(--leverage); color: var(--weiss); }
.lp-muster-frage { font-weight: 700; margin: 0 0 0.2rem; font-size: 0.98rem; }

.lp-abschnitt { padding: 4.5rem 0; }
.lp-abschnitt-flaeche { background: var(--papier); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.lp-h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 300; color: var(--navy); margin: 0 0 0.8rem; letter-spacing: -0.02em; line-height: 1.2; }
.lp-einleitung { color: var(--grau); max-width: 40rem; margin: 0 0 2.25rem; font-size: 1.05rem; }

.lp-funktionen { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.lp-funktion { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.4rem 1.4rem 1.5rem; background: var(--weiss); }
.lp-funktion h3 { margin: 0.7rem 0 0.4rem; font-size: 1.05rem; }
.lp-funktion p { margin: 0; color: var(--grau); font-size: 0.97rem; }
.lp-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r);
  background: var(--leverage-tint); color: var(--leverage); font-size: 1.2rem; font-weight: 700;
}

.lp-preise { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; margin-top: 2rem; }
.lp-preis {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.lp-preis h3 { margin: 0 0 0.6rem; font-size: 1.02rem; }
.lp-betrag { font-size: 2rem; font-weight: 300; color: var(--navy); margin: 0 0 1rem; letter-spacing: -0.02em; }
.lp-betrag span { font-size: 0.95rem; color: var(--grau); letter-spacing: 0; }
.lp-preis ul { margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: 0.95rem; color: var(--grau); }
.lp-preis li { padding: 0.35rem 0 0.35rem 1.4rem; position: relative; border-top: 1px solid var(--linie); }
.lp-preis li::before { content: "\2713"; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }
.lp-preis .knopf { margin-top: auto; }
.lp-preis-hervor { border: 2px solid var(--navy); box-shadow: var(--schatten-tief); }
.lp-preis-etikett {
  position: absolute; top: -0.8rem; left: 1.5rem;
  background: var(--navy); color: var(--weiss);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.7rem; border-radius: 999px; margin: 0;
}
.lp-fussnote { font-size: 0.88rem; color: var(--grau); margin-top: 1.5rem; }

.lp-kontakt { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.lp-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.lp-schritt { counter-increment: schritt; position: relative; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.4rem 1.4rem 1.5rem; background: var(--weiss); }
.lp-schritt::before { content: counter(schritt); display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: var(--weiss); font-weight: 700; }
.lp-schritt h3 { margin: 0.8rem 0 0.4rem; font-size: 1.05rem; }
.lp-schritt p { margin: 0; color: var(--grau); font-size: 0.97rem; }

.lp-faq { margin-top: 2rem; max-width: 48rem; }
.lp-faq details { border-top: 1px solid var(--linie); padding: 0.9rem 0; }
.lp-faq details:last-child { border-bottom: 1px solid var(--linie); }
.lp-faq summary { cursor: pointer; font-weight: 700; color: var(--dunkel); }
.lp-faq details p { margin: 0.6rem 0 0; color: var(--grau); }
.lp-karte { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 1.5rem; background: var(--weiss); }
.lp-karte h3 { margin: 0 0 0.6rem; }
.lp-mail { font-size: 1.15rem; font-weight: 700; }

.lp-formular { padding-top: 3rem; padding-bottom: 4rem; }
.lp-formular .blatt { margin-top: 1.25rem; }

.lp-text { padding-top: 3rem; padding-bottom: 4rem; }
.lp-text h2 { margin-top: 2rem; }

.lp-fuss { background: var(--navy); color: var(--weiss); padding: 3rem 0 1.25rem; border-top: 5px solid var(--orange); }
.lp-fuss a { color: var(--weiss); text-decoration: none; }
.lp-fuss a:hover { color: var(--hellblau); text-decoration: underline; }
.lp-fuss-innen { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.lp-fuss-marke img { width: 200px; height: auto; display: block; }
.lp-fuss-marke p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--hellblau); }
.lp-fuss-marke .lp-fuss-produkt { color: var(--weiss); font-weight: 700; font-size: 1rem; margin-top: 1rem; }
.lp-fuss-betreiber { color: var(--weiss) !important; }
.lp-fuss-spalte { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.93rem; }
.lp-fuss-kopf { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hellblau); }
.lp-fuss-zeile { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 0.8rem; color: var(--hellblau); }

.fuss-abschnitt a { color: var(--hellblau); }

@media (min-width: 48rem) {
  .lp-buehne-innen { grid-template-columns: 1.15fr 1fr; }
  .lp-funktionen { grid-template-columns: repeat(3, 1fr); }
  .lp-funktion-breit { grid-column: 1 / -1; }
  .lp-preise { grid-template-columns: repeat(3, 1fr); }
  .lp-kontakt { grid-template-columns: 1fr 1fr; }
  .lp-schritte { grid-template-columns: repeat(4, 1fr); }
  .lp-fuss-innen { grid-template-columns: 2fr 1fr 1fr; }
  .kennzahlen-fuenf { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 40rem) {
  .lp-buehne { padding: 2.25rem 0 2.75rem; }
  .lp-abschnitt { padding: 3rem 0; }
  .lp-bahn { padding: 0 16px; }
}


/* ---------------- Betrieb (Superadmin) ---------------- */

.kennzahl-link { text-decoration: none; color: inherit; }
.kennzahl-link:hover { border-color: var(--navy); }
.betrieb-karte.zustand-gesperrt { border-left: 4px solid var(--leverage); }
.betrieb-karte.zustand-test { border-left: 4px solid var(--kt02); }
.betrieb-karte.zustand-bezahlt { border-left: 4px solid var(--gruen); }
.marke-zustand-test { border-color: #F2D9CF; color: var(--kt02) !important; }
.marke-zustand-bezahlt { border-color: #CFE3D8; color: var(--gruen) !important; }
.marke-zustand-gesperrt { background: var(--leverage) !important; border-color: var(--leverage); color: var(--weiss) !important; }
.angaben-eng { margin: 0.6rem 0 0.4rem; font-size: 0.92rem; }
.angaben-eng dd { font-weight: 400; }
.impressum-kontakt { font-size: inherit; margin: 0 0 1rem; gap: 0.2rem 1.5rem; }
.angaben .loeschung { color: var(--leverage); font-weight: 700; }
.betrieb-details { margin-top: 0.8rem; border-top: 1px solid var(--linie); padding-top: 0.7rem; }
.betrieb-details summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.betrieb-form { margin-top: 1rem; }
.betrieb-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }

@media print {
  body { background: var(--weiss); }
  .sitehead, .fuss, .werkzeuge, .knopfreihe, .status-form, .steuerung, .entwurf { display: none; }
  .karte { break-inside: avoid; border-color: #999; box-shadow: none; }
}

/* Betrieb: Umsatz, Aufgaben, Zahlungen */
.kennzahlen-vier { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .kennzahlen-vier { grid-template-columns: repeat(4, 1fr); } }
.aufgaben { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--linie); border-radius: var(--r); background: var(--weiss); }
.aufgabe { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; padding: 0.7rem 1rem; border-top: 1px solid var(--linie); font-size: 0.93rem; }
.aufgabe:first-child { border-top: 0; }
.aufgabe-art { flex: 0 0 6.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); }
.aufgabe-text { flex: 1 1 18rem; }
.aufgabe-zahlung .aufgabe-art, .aufgabe-preis .aufgabe-art { color: var(--leverage); }
.aufgabe-rechnung .aufgabe-art { color: var(--navy); }
.aufgabe .status-form { margin: 0; }
.vorgaenge-zahlen { margin: 0 0 0.2rem; padding-left: 1.1rem; }
.vorgaenge-zahlen li { margin: 0.1rem 0; }
.zahlungen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--r); background: var(--weiss); font-size: 0.92rem; }
.zahlungen li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.8rem; padding: 0.55rem 1rem; border-top: 1px solid var(--linie); }
.zahlungen li:first-child { border-top: 0; }
.zahlungen .betrag { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dunkel); text-align: right; }
@media (max-width: 40rem) { .zahlungen li { grid-template-columns: 1fr auto; } .zahlungen li span:first-child { grid-column: 1 / -1; color: var(--grau); } }
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r); background: var(--weiss); }
.verlauf { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.verlauf th, .verlauf td { padding: 0.45rem 0.8rem; border-top: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.verlauf thead th { border-top: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grau); }
.verlauf th:first-child { text-align: left; font-weight: 400; color: var(--dunkel); }
.verlauf thead th:first-child { color: var(--grau); }
.protokoll li { grid-template-columns: 6.5rem 1fr auto; }
.totp-schluessel { display: inline-block; margin: 0.3rem 0; padding: 0.4rem 0.6rem; font-size: 1.05rem; letter-spacing: 0.08em; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; user-select: all; }
.schritte { padding-left: 1.2rem; }
.schritte li { margin-bottom: 0.6rem; }
.protokoll-gremium { font-weight: 700; color: var(--dunkel); }