/* Kostenlose Werkzeuge: Lieferanten-Fragebogen (/fragebogen) und Registrierungsbogen (/registrierung).

   Linie "Instrument" wie oesterreich.css: Haarlinien statt Kacheln, ruhige grosse Ziffern,
   Beschriftung in Versalien mit Sperrung, EIN Akzent (Orange) nur dort, wo er etwas markiert.
   Alle Farben aus den Rollen von styles.css, damit hell und dunkel ohne eigene Werte stimmen. */

.gr-eyebrow {
  margin: 0 0 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-buehne);
}
.gr-kennzahlen .at-fakt-wert { white-space: nowrap; }
.gr-fakt-text { font-size: 12px; line-height: 1.4; color: var(--stage-3rd); }

.n2-block.gr-breit { max-width: 1120px; }
.gr-still { font-size: .9rem; color: var(--muted); max-width: 72ch; margin: 0 0 28px; }
.gr-druckkopf { display: none; }

/* ---------- Werkzeugleiste ---------- */
.gr-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 16px 0; margin: 0 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.gr-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.gr-aktionen .n2-btn { padding: 10px 18px; font-size: .9rem; }
.gr-schalter { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.gr-schalter button {
  appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 700;
  padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gr-schalter button span { font-variant-numeric: tabular-nums; color: var(--muted); margin-left: 6px; font-weight: 600; }
.gr-schalter button[aria-checked="true"] { background: var(--surface-3); color: var(--head); }
.gr-schalter button[aria-checked="true"] span { color: var(--orange-text); }
.gr-schalter button:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }

/* ---------- Fragebogen ---------- */
.fb-katalog[data-ansicht="alle"] [data-bereich="software"] { display: none; }
.fb-kategorie { padding: 34px 0 6px; }
.fb-kategorie + .fb-kategorie { border-top: 1px solid var(--line); }
.fb-kategorie h3 {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; font-size: 1.12rem; color: var(--head);
}
.fb-k-nr { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--orange-text); font-variant-numeric: tabular-nums; }
.fb-k-zahl {
  margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.fb-liste { list-style: none; margin: 0; padding: 0; }
.fb-frage {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(15rem, 19rem); gap: 6px 28px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line-weak);
}
.fb-liste .fb-frage:first-child { border-top: 0; }
.fb-code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  letter-spacing: .04em; color: var(--muted); padding-top: 3px;
}
.n2-block .fb-text { margin: 0; color: var(--head); line-height: 1.55; max-width: none; }
.fb-meta { margin: 0; display: grid; grid-template-columns: auto auto; gap: 8px 18px; justify-content: start; }
.fb-meta div { display: grid; gap: 2px; min-width: 0; }
.fb-meta-refs { grid-column: 1 / -1; }
.fb-meta dt { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fb-meta dd { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fb-frage[data-bereich="software"] .fb-code::after {
  content: "Software"; display: block; margin-top: 6px; font-family: inherit; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text);
}
@media (max-width: 900px) {
  .fb-frage { grid-template-columns: 6rem minmax(0, 1fr); }
  .fb-meta { grid-column: 2; }
}
@media (max-width: 560px) {
  .fb-frage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fb-meta { grid-column: 1; }
  .fb-kategorie h3 { flex-wrap: wrap; }
  .fb-k-zahl { margin-left: 0; flex-basis: 100%; }
  .gr-schalter { display: grid; width: 100%; border-radius: var(--radius-sm); }
  .gr-schalter button { border-radius: var(--radius-sm); white-space: normal; text-align: left; }
}

/* ---------- Vergleich und Ausblick ---------- */
.gr-vergleich { list-style: none; counter-reset: gr; margin: 8px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.gr-vergleich li { counter-increment: gr; padding: 20px 22px 8px 0; color: var(--ink-2); line-height: 1.6; font-size: .95rem; }
.gr-vergleich li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.gr-vergleich li::before {
  content: counter(gr, decimal-leading-zero); display: block; font-size: 30px; font-weight: 400; line-height: 1;
  color: var(--orange-text); font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.gr-v-kopf { display: block; font-weight: 700; color: var(--head); margin-bottom: 6px; }
@media (max-width: 900px) {
  .gr-vergleich { grid-template-columns: minmax(0, 1fr); }
  .gr-vergleich li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Registrierungsbogen ---------- */
.rb-bogen { display: grid; gap: 0; }
.rb-angabe { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 26px 0 30px; min-width: 0; display: grid; gap: 14px; }
.rb-angabe legend { padding: 0; display: flex; align-items: baseline; gap: 14px; font-size: 1.12rem; font-weight: 700; color: var(--head); float: left; width: 100%; }
.rb-angabe legend + * { clear: both; }
.rb-nr {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; flex: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rb-angabe.ist-vollstaendig .rb-nr { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.n2-block .rb-hilfe { margin: 0; font-size: .92rem; color: var(--muted); max-width: 72ch; }
.rb-hilfe a { color: var(--pulse-text); }
.rb-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
/* styles.css setzt label global in Versalien (Formulare der App); hier traegt das Label ganze Saetze. */
.rb-feld, .rb-wahl { text-transform: none; letter-spacing: normal; margin-bottom: 0; }
.rb-feld { display: grid; gap: 6px; min-width: 0; }
.rb-halb { max-width: 26rem; }
.rb-feld > span { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rb-feld input, .rb-feld textarea, .rb-feld select {
  font: inherit; font-size: .98rem; color: var(--head); background: var(--surface); width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rb-feld textarea { resize: vertical; min-height: 2.8em; }
.rb-feld input:focus, .rb-feld textarea:focus, .rb-feld select:focus {
  outline: none; border-color: var(--pulse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 22%, transparent);
}
.rb-feld textarea:disabled { opacity: .45; }
.rb-sektorwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.rb-sektoren { border: 0; margin: 0; padding: 0; min-width: 0; }
.rb-sektoren legend { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
.rb-wahl {
  font-weight: 400; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 9px 0;
  border-top: 1px solid var(--line-weak); cursor: pointer; color: var(--ink-2); font-size: .92rem; line-height: 1.45;
}
.rb-wahl input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--orange); }
.rb-wahl small { grid-column: 2; font-size: .76rem; color: var(--muted); }
.rb-wahl:has(input:checked) { color: var(--head); }
.rb-wahl-einzeln { border-top: 0; padding-top: 0; }
.n2-block .rb-schwelle { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 72ch; }
.rb-schwelle:empty { display: none; }
.rb-leiste { margin-top: 0; position: sticky; bottom: 0; background: var(--surface); z-index: 2; }
.n2-block .rb-stand { margin: 0; font-size: .95rem; color: var(--ink-2); }
.rb-stand [data-rb-erledigt] { font-size: 1.5rem; color: var(--orange-text); font-variant-numeric: tabular-nums; margin-right: 4px; }
@media (max-width: 900px) {
  .rb-zeile, .rb-sektorwahl { grid-template-columns: minmax(0, 1fr); }
  .rb-leiste { position: static; }
}

/* ---------- Druck: nur das Werkzeug, mit Kopfzeile ---------- */
@media print {
  .n2-top, .n2-fuss, tm-consent, .n2-hero, .gr-leiste .gr-aktionen, .gr-schalter, #einsatz, #danach, .gr-still, .n2-tat { display: none !important; }
  .gr-druckkopf { display: block; font-size: 10pt; color: #000; margin: 0 0 12pt; padding-bottom: 6pt; border-bottom: 1px solid #000; }
  .gr-leiste { border: 0; padding: 0; position: static; }
  body, .n2-block, .n2-block p, .fb-text, .fb-meta dd, .rb-wahl { color: #000 !important; background: #fff !important; }
  .n2-block.gr-breit { padding: 0; max-width: none; }
  .fb-frage, .rb-angabe { break-inside: avoid; }
  .fb-frage { grid-template-columns: 5.5rem minmax(0, 1fr) 12rem; padding: 8pt 0; }
  .rb-wahl:not(:has(input:checked)) { display: none; }
  .rb-feld input, .rb-feld textarea, .rb-feld select { border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 2pt 0; }
}