/* ============================================================
   tools.css — Seitenfamilie /tools/ im services-Design (2026-08)
   Wird IMMER zusammen mit services.css geladen und nutzt dessen
   :root-Variablen (--service-*). Nur Tool-spezifische Bausteine.
   ============================================================ */

/* .hidden muss auch gegen display-setzende tool-Klassen gewinnen
   (site.css/Tailwind laedt VOR tools.css) */
.tools-page .hidden {
  display: none !important;
}

/* ---------- Hero: kompakt, Tool bleibt above the fold ---------- */

.tool-hero {
  position: relative;
  overflow: hidden;
  padding-block: 8.25rem 2.5rem;
}

.tool-hero > .service-shell {
  position: relative;
  z-index: 1;
}

.tool-hero h1 {
  max-width: 18ch;
  font-family: var(--service-display);
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  font-weight: 630;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.tool-hero-lead {
  max-width: 44rem;
  margin-top: 1.1rem;
  color: var(--service-ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
}

.tool-hero .service-breadcrumb {
  margin-bottom: 2.4rem;
}

.tool-hero .service-eyebrow {
  display: block;
  margin-bottom: 1.15rem;
}

/* Riesenwort wie auf den Leistungsseiten — nur auf dem Hub */
.tools-hub-word {
  position: absolute;
  right: -0.03em;
  bottom: -0.18em;
  color: rgba(13, 124, 102, 0.065);
  font-family: var(--service-display);
  font-size: clamp(8rem, 19vw, 19rem);
  font-weight: 700;
  letter-spacing: -0.09em;
  line-height: 0.8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Tool-Panel: die funktionale Karte ---------- */

.tool-panel-wrap {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.tool-panel {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--service-ink) 12%, transparent);
  border-radius: 18px;
  background: var(--service-paper-strong);
  box-shadow: 0 24px 60px rgba(17, 26, 22, 0.08);
}

.tool-trust {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 1.6rem;
  color: var(--service-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.tool-trust svg {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.1rem;
  color: var(--service-green);
}

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

.tool-field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--service-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tool-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.78rem 2.6rem 0.78rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23155e4b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  color: var(--service-ink);
  font-family: var(--service-body);
  font-size: 0.92rem;
  line-height: 1.4;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.tool-select:hover {
  border-color: color-mix(in srgb, var(--service-green) 55%, var(--service-line));
  background-color: #fff;
}

.tool-select:focus-visible {
  outline: none;
  border-color: var(--service-green);
  box-shadow: 0 0 0 3px var(--service-green-light);
}

.tool-input {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 12px;
  background: #fff;
  color: var(--service-ink);
  font-family: var(--service-body);
  font-size: 0.95rem;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.tool-input:focus-visible {
  outline: none;
  border-color: var(--service-green);
  box-shadow: 0 0 0 3px var(--service-green-light);
}

.tool-range {
  width: 100%;
  accent-color: var(--service-green);
}

.tool-hint {
  margin-top: 0.65rem;
  color: var(--service-ink-soft);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* Buttons in der services-Optik */
.tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.05rem;
  padding: 0.72rem 1.3rem;
  border: 1px solid var(--service-green);
  border-radius: 999px;
  background: var(--service-green);
  color: var(--service-paper-strong);
  font-family: var(--service-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.tool-button:hover {
  border-color: var(--service-green-dark);
  background: var(--service-green-dark);
}

.tool-button:active {
  transform: translateY(1px);
}

.tool-button[disabled] {
  opacity: 0.55;
  cursor: default;
}

.tool-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.7rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 28%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.tool-button-secondary:hover {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}

.tool-button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.35rem;
  border: 0;
  background: transparent;
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.tool-button-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* Einstellungs-Zone: hebt sich vom weißen Panel ab */
.tool-einstellungen {
  margin: 2rem 0 0;
  padding: 1.25rem 1.35rem 1.45rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: #f3efe7;
  min-inline-size: 0;
}

.tool-einstellungen legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-family: var(--service-display);
  font-size: 0.92rem;
  font-weight: 700;
}

.tool-gruppen-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tipp-Kasten mit Ein-Klick-Preset statt Fließtext-Hinweis */
.tool-tipp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--service-green) 45%, transparent);
  border-radius: 12px;
  background: var(--service-green-pale);
}

.tool-tipp p {
  flex: 1;
  min-width: 14rem;
  margin: 0;
  color: var(--service-ink);
  font-size: 0.82rem;
  line-height: 1.5;
}

.tool-tipp p strong {
  font-family: var(--service-display);
}

/* Chip-Gruppen: alle Optionen auf einen Blick (statt Dropdown) */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tool-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 12px;
  background: #fff;
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease;
}

.tool-chip small {
  color: var(--service-ink-soft);
  font-family: var(--service-body);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
}

.tool-chip:hover {
  border-color: var(--service-green);
}

.tool-chip.ist-aktiv {
  position: relative;
  border-color: var(--service-green-dark);
  background: var(--service-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 124, 102, 0.32);
}

.tool-chip.ist-aktiv small {
  color: rgba(255, 255, 255, 0.85);
}

.tool-chip.ist-aktiv::after {
  content: "✓";
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--service-green-dark);
  color: #fff;
  font-size: 0.68rem;
  line-height: 1;
}

/* ---------- Dropzone (Datei-Tools) ---------- */

.tool-dropzone {
  padding: clamp(1.75rem, 4.5vw, 3rem) 1.25rem;
  border: 2px dashed color-mix(in srgb, var(--service-ink) 28%, transparent);
  border-radius: 14px;
  background: var(--service-paper);
  text-align: center;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.tool-dropzone.drop-aktiv {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}

.tool-dropzone-title {
  font-family: var(--service-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 630;
}

/* ---------- Ampel-Zustaende ---------- */

.tool-ampel {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: var(--service-paper);
}

.tool-ampel-grün {
  border-color: color-mix(in srgb, var(--service-green) 38%, transparent);
  background: var(--service-green-pale);
}

.tool-ampel-gelb {
  border-color: #e5c76b;
  background: #fdf6e3;
}

.tool-ampel-rot {
  border-color: #dfa39e;
  background: #fbeeec;
}

.tool-ampel-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fff;
  font-family: var(--service-display);
  font-weight: 700;
}

.tool-ampel-grün .tool-ampel-symbol { color: var(--service-green-dark); }
.tool-ampel-gelb .tool-ampel-symbol { color: #8a6d1d; }
.tool-ampel-rot .tool-ampel-symbol { color: #a3352b; }

.tool-ampel strong {
  font-family: var(--service-display);
  font-weight: 630;
  line-height: 1.35;
}

.tool-ampel p {
  margin-top: 0.25rem;
  color: var(--service-ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Legacy-Aliasse: aeltere Tool-Skripte (frischecheck, ssl-check,
   xrechnung-*) setzen zur Laufzeit ampel-grün/-gelb/-rot — vor dem
   Redesign kamen die Farben aus Inline-Styles der jeweiligen Seite. */

.ampel-grün {
  border-color: color-mix(in srgb, var(--service-green) 38%, transparent);
  background-color: var(--service-green-pale);
}

.ampel-gelb {
  border-color: #e5c76b;
  background-color: #fdf6e3;
}

.ampel-rot {
  border-color: #dfa39e;
  background-color: #fbeeec;
}

/* ---------- Fortschritt ---------- */

.tool-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--service-ink) 10%, transparent);
}

.tool-progress > div {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--service-green);
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Ergebniszeilen (Datei-Tools) ---------- */

.tool-result-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.tool-result-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.15rem;
  align-items: center;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: var(--service-paper);
}

.tool-result-row img {
  width: 3.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--service-ink) 10%, transparent);
}

.tool-result-main {
  flex: 1;
  min-width: 14rem;
}

.tool-result-name {
  font-family: var(--service-display);
  font-size: 0.9rem;
  font-weight: 630;
  word-break: break-all;
}

.tool-result-detail {
  margin-top: 0.15rem;
  color: var(--service-ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.tool-result-detail strong {
  color: var(--service-ink);
}

.tool-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-family: var(--service-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tool-badge-grün { background: var(--service-green-light); color: var(--service-green-dark); }
.tool-badge-gelb { background: #f6e8bd; color: #7c621a; } /* 4,01 -> 4,74:1 */
.tool-badge-rot { background: #f6d7d3; color: #a3352b; }
.tool-badge-neutral { background: color-mix(in srgb, var(--service-ink) 8%, transparent); color: var(--service-ink-soft); }

.tool-result-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--service-ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}

.tool-result-entfernen:hover {
  border-color: #dfa39e;
  background: #fbeeec;
  color: #a3352b;
}

/* ---------- Sprungnavigation unter dem Tool ---------- */

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

.tool-jump a {
  padding: 0.55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 16%, transparent);
  border-radius: 999px;
  background: var(--service-paper-strong);
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.tool-jump a:hover {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}

/* ---------- Erklaer-Sektionen ---------- */

.tool-section {
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
  border-top: 1px solid color-mix(in srgb, var(--service-ink) 12%, transparent);
}

.tool-section .service-section-head {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}

.tool-section h2 {
  font-family: var(--service-display);
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight: 630;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.tool-section h3 {
  font-family: var(--service-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 630;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.tool-prose {
  max-width: 48rem;
}

.tool-prose p {
  margin-top: 1rem;
  color: var(--service-ink-soft);
  line-height: 1.7;
}

.tool-prose p strong {
  color: var(--service-ink);
}

.tool-prose code {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--service-ink) 7%, transparent);
  font-size: 0.86em;
}

.tool-subsection {
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
}

/* ---------- Hub: Tool-Karten ---------- */

.tools-category {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.tools-category + .tools-category {
  border-top: 1px solid color-mix(in srgb, var(--service-ink) 12%, transparent);
}

.tools-category-head {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tools-category-head span {
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.78rem;
  font-weight: 700;
}

.tools-category-head h2 {
  font-family: var(--service-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 630;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 12%, transparent);
  border-radius: 16px;
  background: var(--service-paper-strong);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.tool-card:hover {
  border-color: color-mix(in srgb, var(--service-green) 55%, transparent);
  box-shadow: 0 18px 44px rgba(17, 26, 22, 0.1);
  transform: translateY(-2px);
}

.tool-card > span {
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-card strong {
  font-family: var(--service-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 630;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.tool-card p {
  color: var(--service-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.tool-card-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.84rem;
  font-weight: 700;
}

/* ---------- Vorher/Nachher-Vergleich (Bilder-Tool) ---------- */

.vergleich-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.25rem;
  background: rgba(17, 26, 22, 0.82);
}

.vergleich-box {
  position: relative;
  overflow: hidden;
  max-width: min(920px, 100%);
  max-height: 72vh;
  border-radius: 14px;
  background:
    repeating-conic-gradient(#e8e4dd 0% 25%, #f7f4ee 0% 50%) 0 0 / 22px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
}

.vergleich-box img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  pointer-events: none;
}

.vergleich-box .vergleich-nachher {
  position: absolute;
  inset: 0;
}

.vergleich-linie {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.vergleich-linie::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.vergleich-label {
  position: absolute;
  top: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(17, 26, 22, 0.78);
  color: #fff;
  font-family: var(--service-display);
  font-size: 0.74rem;
  font-weight: 700;
  pointer-events: none;
}

.vergleich-label-vorher { left: 0.75rem; }
.vergleich-label-nachher { right: 0.75rem; }

.vergleich-schliessen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--service-display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.vergleich-schliessen:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vergleich-hinweis {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  text-align: center;
}

.tool-result-row img[data-vergleich] {
  cursor: zoom-in;
}

/* ---------- PDF-Unterschreiben ---------- */

@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/tools/pdf-unterschreiben/vendor/great-vibes.woff2) format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/tools/pdf-unterschreiben/vendor/caveat.woff2) format("woff2");
}

.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.tool-tab {
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.tool-tab:hover {
  border-color: var(--service-green);
}

.tool-tab.ist-aktiv {
  border-color: var(--service-green-dark);
  background: var(--service-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 124, 102, 0.32);
}

.signatur-pad {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(
      to top,
      transparent 24%,
      color-mix(in srgb, var(--service-ink) 16%, transparent) 24%,
      color-mix(in srgb, var(--service-ink) 16%, transparent) calc(24% + 1px),
      transparent calc(24% + 1px)
    ),
    #fff;
  touch-action: none;
  cursor: crosshair;
}

.signatur-pad canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.signatur-vorschau {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 18%, transparent);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.signatur-vorschau img {
  max-width: 100%;
  max-height: 5rem;
}

.farb-punkt {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.farb-punkt.ist-aktiv {
  border-color: var(--service-green);
  box-shadow: 0 0 0 2px var(--service-paper-strong) inset;
}

/* Arbeitsbereich: Werkzeuge links (sticky), Dokument rechts */
.pdf-arbeitsbereich {
  display: grid;
  grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.75rem;
}

.pdf-werkzeuge {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: #f3efe7;
}

.pdf-werkzeuge > * + * {
  margin-top: 1.9rem;
}

/* Dokumentbereich: dunklerer Grund, damit die weißen Seiten wie
   in einem PDF-Viewer hervortreten */
.pdf-dokument {
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: #d9d4c9;
  background-image: linear-gradient(
    to bottom,
    rgba(17, 26, 22, 0.05),
    transparent 6rem
  );
}

@media (max-width: 1023px) {
  .pdf-arbeitsbereich {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdf-werkzeuge {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Dropzone nach dem Laden auf eine Zeile eindampfen */
.tool-dropzone.ist-kompakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
}

.tool-dropzone.ist-kompakt .tool-dropzone-title {
  font-size: 0.9rem;
}

.tool-dropzone.ist-kompakt .tool-hint {
  margin: 0;
}

.tool-dropzone.ist-kompakt .tool-button {
  min-height: 2.4rem;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  margin: 0 !important;
}

/* Einfuege-Leiste — klebt unten am Dokument, zeigt den aktiven Modus */
.pdf-toolbar {
  position: sticky;
  bottom: 1rem;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 20%, transparent);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(17, 26, 22, 0.22);
}

.pdf-toolbar-knopf {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    color 130ms ease;
}

.pdf-toolbar-knopf svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.pdf-toolbar-knopf:hover {
  background: var(--service-green-pale);
}

.pdf-toolbar-knopf.ist-aktiv {
  border-color: var(--service-green);
  background: var(--service-green);
  color: #fff;
}

.pdf-toolbar-knopf[disabled] {
  opacity: 0.4;
  cursor: default;
}

.pdf-toolbar-input {
  width: 11rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.84rem;
}

.pdf-toolbar-trenner {
  align-self: stretch;
  width: 1px;
  margin: 0.25rem 0.2rem;
  background: color-mix(in srgb, var(--service-ink) 16%, transparent);
}

.pdf-toolbar-status {
  flex-basis: 100%;
  padding: 0.1rem 0.5rem 0.35rem;
  color: var(--service-green-dark);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.pdf-toolbar-status:empty {
  display: none;
}

/* Geister-Vorschau: haengt beim Platzieren am Cursor */
.platzier-ghost {
  position: absolute;
  z-index: 4;
  opacity: 0.65;
  pointer-events: none;
}

.platzier-ghost img {
  display: block;
  width: 100%;
  height: auto;
}

.platzier-ghost.ist-text {
  color: #14141f;
  font-family: Helvetica, Arial, sans-serif;
  white-space: nowrap;
}

/* Seiten-Navigation (Blaettern) — klebt oben im Dokumentbereich */
.pdf-navigation {
  position: sticky;
  top: 88px;
  z-index: 5;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 18%, transparent);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(17, 26, 22, 0.14);
}

.pdf-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--service-ink);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.pdf-navigation button:hover {
  background: var(--service-green-pale);
}

.pdf-navigation button[disabled] {
  opacity: 0.35;
  cursor: default;
}

.pdf-navigation .seiten-anzeige {
  min-width: 7.5rem;
  text-align: center;
  font-family: var(--service-display);
  font-size: 0.84rem;
  font-weight: 700;
}

.pdf-navigation .render-status {
  color: var(--service-ink-soft);
  font-size: 0.74rem;
}

/* Seitenliste + Platzierung */
.pdf-seiten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.pdf-seite {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--service-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 26, 22, 0.08);
}

.pdf-seite img.seitenbild {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.pdf-seite-platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--service-ink-soft);
  font-family: var(--service-display);
  font-size: 0.82rem;
  font-weight: 700;
}

.pdf-seite canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.pdf-seite.kann-platzieren {
  cursor: copy;
}

.pdf-seiten-nr {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  z-index: 2;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--service-ink) 72%, transparent);
  color: #fff;
  font-family: var(--service-display);
  font-size: 0.68rem;
  font-weight: 700;
  pointer-events: none;
}

.platzierung {
  position: absolute;
  z-index: 3;
  border: 1.5px dashed transparent;
  cursor: grab;
  touch-action: none;
}

.platzierung img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.platzierung.ist-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.platzierung:hover,
.platzierung.ist-aktiv {
  border-color: var(--service-green);
  background: color-mix(in srgb, var(--service-green) 6%, transparent);
}

.platzierung:active {
  cursor: grabbing;
}

.platzierung-entfernen {
  position: absolute;
  top: -0.85rem;
  right: -0.85rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid #dfa39e;
  border-radius: 999px;
  background: #fbeeec;
  color: #a3352b;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.platzierung-griff {
  position: absolute;
  right: -0.55rem;
  bottom: -0.55rem;
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--service-green);
  border-radius: 999px;
  background: var(--service-paper-strong);
  cursor: nwse-resize;
  touch-action: none;
}

.platzierung:hover .platzierung-entfernen,
.platzierung.ist-aktiv .platzierung-entfernen,
.platzierung:hover .platzierung-griff,
.platzierung.ist-aktiv .platzierung-griff {
  display: flex;
}

/* ---------- PDF-Zusammenfuegen ---------- */

/* Datei-Liste beim Mergen: Thumbnail + Name + Sortier-Knoepfe */
.merge-liste {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.merge-eintrag {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: var(--service-paper);
}

.merge-eintrag.wird-gezogen {
  opacity: 0.45;
}

.merge-nummer {
  flex-shrink: 0;
  min-width: 1.6rem;
  color: var(--service-green-dark);
  font-family: var(--service-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.merge-thumb {
  width: 3rem;
  height: 4rem;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--service-ink) 14%, transparent);
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.merge-info {
  flex: 1;
  min-width: 10rem;
}

.merge-name {
  font-family: var(--service-display);
  font-size: 0.9rem;
  font-weight: 630;
  word-break: break-all;
}

.merge-meta {
  margin-top: 0.15rem;
  color: var(--service-ink-soft);
  font-size: 0.8rem;
}

.merge-aktionen {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.merge-aktionen button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 18%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 130ms ease,
    background-color 130ms ease;
}

.merge-aktionen button:hover {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}

.merge-aktionen button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.merge-aktionen .eintrag-entfernen:hover {
  border-color: #dfa39e;
  background: #fbeeec;
  color: #a3352b;
}

/* Seiten-Raster beim Bearbeiten: Thumbnails aus-/abwaehlbar + drehbar */
.seiten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.seiten-kachel {
  position: relative;
  border: 2px solid var(--service-line);
  border-radius: 12px;
  background: #fff;
  padding: 0.5rem 0.5rem 2.3rem;
  cursor: pointer;
  transition:
    border-color 130ms ease,
    opacity 130ms ease,
    box-shadow 130ms ease;
}

.seiten-kachel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: transform 200ms ease;
}

.seiten-kachel.ist-gewaehlt {
  border-color: var(--service-green);
  box-shadow: 0 0 0 1px var(--service-green);
}

.seiten-kachel:not(.ist-gewaehlt) {
  opacity: 0.45;
}

.seiten-kachel:not(.ist-gewaehlt):hover {
  opacity: 0.75;
}

.seiten-kachel .kachel-haken {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--service-green);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

.seiten-kachel.ist-gewaehlt .kachel-haken {
  display: flex;
}

.kachel-fuss {
  position: absolute;
  right: 0.5rem;
  bottom: 0.4rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kachel-nr {
  color: var(--service-ink-soft);
  font-family: var(--service-display);
  font-size: 0.74rem;
  font-weight: 700;
}

.kachel-drehen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 18%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.kachel-drehen:hover {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}

/* ---------- Rechnungs-Pflichtangaben-Check ---------- */

.check-liste {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.check-punkt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: var(--service-paper);
  transition: border-color 140ms ease;
}

.check-punkt.ist-ja {
  border-color: color-mix(in srgb, var(--service-green) 45%, transparent);
  background: var(--service-green-pale);
}

.check-punkt.ist-nein {
  border-color: #dfa39e;
  background: #fbeeec;
}

.check-punkt-text {
  flex: 1;
  min-width: 14rem;
}

.check-punkt-titel {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--service-display);
  font-size: 0.95rem;
  font-weight: 630;
}

.check-punkt-erklaerung {
  margin-top: 0.25rem;
  color: var(--service-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.check-schalter {
  display: flex;
  gap: 0.4rem;
}

.check-schalter button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--service-ink) 24%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--service-ink);
  font-family: var(--service-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    color 130ms ease;
}

.check-schalter button:hover {
  border-color: var(--service-green);
}

.check-schalter .ja.ist-aktiv {
  border-color: var(--service-green-dark);
  background: var(--service-green);
  color: #fff;
}

.check-schalter .nein.ist-aktiv {
  border-color: #a3352b;
  background: #c0453a;
  color: #fff;
}

/* ---------- Feedback-/Wartungsblock ---------- */

.tool-feedback {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--service-ink) 12%, transparent);
}

.tool-feedback-note {
  max-width: 42rem;
  color: var(--service-ink-soft);
  font-size: 0.82rem;
  line-height: 1.6;
}

.tool-feedback-note button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--service-green-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tool-feedback-note button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.tool-feedback-form {
  max-width: 26rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--service-line);
  border-radius: 14px;
  background: var(--service-paper-strong);
}

.tool-feedback-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--service-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.tool-feedback-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--service-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--service-body);
  font-size: 0.9rem;
  resize: vertical;
}

.tool-feedback-form textarea:focus-visible,
.tool-feedback-form input:focus-visible {
  outline: none;
  border-color: var(--service-green);
  box-shadow: 0 0 0 3px var(--service-green-light);
}

.tool-feedback-form input[type="email"] {
  width: 100%;
  margin-bottom: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--service-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--service-body);
  font-size: 0.9rem;
}

.tool-feedback-form .tool-button {
  margin-top: 1rem;
}

.tool-feedback-status {
  max-width: 42rem;
  margin-bottom: 1rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.tool-feedback-status.ist-erfolg { color: var(--service-green-dark); }
.tool-feedback-status.ist-fehler { color: #a3352b; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tool-hero {
    padding-block: 6.75rem 1.75rem;
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-result-row {
    align-items: flex-start;
  }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-button,
  .tool-progress > div {
    transition: none;
  }
}


/* ---------- Ampel: ASCII-Aliasse ----------
   Die Ampel-Klassen tragen im CSS einen Umlaut (.tool-ampel-grün), die
   Tool-Skripte setzen aber "gruen". Dadurch blieb der gruene Zustand
   ungestylt — sichtbar im BFSG-Check und im Website-Frischecheck.
   Statt in jedem Tool nachzuziehen, gelten hier beide Schreibweisen. */
.tool-ampel-gruen {
  border-color: color-mix(in srgb, var(--service-green) 38%, transparent);
  background: var(--service-green-pale);
}
.tool-ampel-gruen .tool-ampel-symbol {
  color: var(--service-green-dark);
}
/* Muss die Umlaut-Fassung .tool-badge-grün Eigenschaft fuer Eigenschaft
   spiegeln. Der fruehere Alias setzte border-color statt background — solange
   das Markup den Umlaut trug, fiel das nicht auf; beim Umstellen auf ASCII
   verlor der Badge seinen Hintergrund. */
.tool-badge-gruen {
  background: var(--service-green-light);
  color: var(--service-green-dark);
}
.ampel-gruen {
  border-color: color-mix(in srgb, var(--service-green) 38%, transparent);
  background: var(--service-green-pale);
}

/* ==========================================================================
   BFSG-Check — Assistenten-Gestaltung (/tools/bfsg-check/)
   ==========================================================================
   Entwurfsentscheidung: immer nur ein Halt sichtbar, und die Seite benennt in
   jedem Moment ihren naechsten Halt. Daraus folgt alles andere — eine Frage
   pro Karte, grosse Antwortflaechen, ein Fortschrittsfaden, der nie vom
   Schirm verschwindet.

   Bewusst genau drei Rundungswerte (0 / 2 / 4 px) und eine Schriftfamilie
   im Fliesstext. Der Ist-Zustand hatte neun Radien und fuenfzehn gleich
   aussehende Komponenten — genau das machte ihn unuebersichtlich.

   Vorlage: produkt-bfsg-check/entwuerfe/entwurf-2-assistent.html
   ========================================================================== */

/* Der Baukasten ist beim BFSG-Check entstanden und traegt deshalb dessen
   Kuerzel. Er ist aber nicht an dieses Tool gebunden — jede Seite, die
   .tool-assistent traegt, bekommt dieselben Marken. Rein ergaenzend
   angeschrieben, damit der fertige und abgenommene BFSG-Check nicht
   angefasst werden muss. */
.tool-bfsg-check,
.tool-assistent {
  --bf-r: 4px;
  --bf-r-klein: 2px;
  --bf-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bf-rot: #a02a1f;
  --bf-rot-flaeche: #fbeceb;
  --bf-rot-linie: #e2bab5;
  --bf-gelb: #7a5a10;
  --bf-gelb-flaeche: #faf1dc;
  --bf-gelb-linie: #e0cb96;
  --bf-gruen: #1d5f34;
  --bf-gruen-flaeche: #e7f2e9;
  --bf-gruen-linie: #b3cdb8;
}

/* ---------- Fortschrittsfaden ---------- */

/* Die Navigationsleiste der Website ist eine schwebende Pille mit Rand und
   variabler Hoehe (88 / 80 / 74 Pixel je nach Breite). Ein starrer Abstand
   funktioniert deshalb nicht — die tatsaechliche Unterkante wird per Skript in
   --bf-nav-h geschrieben. Der Faden greift die Form der Leiste auf, statt als
   randlose Kante dagegen zu stossen. */
.bf-faden {
  position: sticky;
  top: calc(var(--bf-nav-h, 88px) + 8px);
  z-index: 30;
  pointer-events: none;
  padding-inline: var(--bf-nav-inset, 1rem);
}
.bf-faden-in {
  pointer-events: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.4rem;
  max-width: none;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--service-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 28, 25, 0.04), 0 10px 24px -18px rgba(16, 28, 25, 0.3);
}
@supports not (backdrop-filter: blur(8px)) {
  .bf-faden-in {
    background: #fff;
  }
}
.bf-faden p {
  margin: 0;
  font-size: 0.9rem;
}
.bf-faden-jetzt strong {
  font-family: var(--service-display);
  font-weight: 640;
}
.bf-faden-sep {
  color: var(--service-ink-soft);
  margin-inline: 0.35rem;
}
.bf-faden-lage,
#bf-faden-lage {
  color: var(--service-ink-soft);
}
.bf-faden-next {
  color: var(--service-ink-soft);
}
.bf-faden-next strong {
  color: var(--service-ink);
  font-weight: 620;
}

/* ---------- Werkzeugbereich ---------- */

.bf-werkzeug {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3.5rem);
  background: var(--service-paper-strong);
  border-block: 1px solid var(--service-line);
}

/* Aufmacher auf dieselbe Achse wie die Karten: ein Block, mittig gesetzt,
   Text darin linksbuendig. Zentrierter Text waere hier generisch, eine zweite
   Achse dagegen unruhig — im Test wirkte genau das "gequetscht". */
.tool-bfsg-check .tool-hero .service-reveal,
.tool-assistent .tool-hero .service-reveal,
.bf-werkzeug .service-shell > * {
  max-width: 46rem;
  margin-inline: auto;
}

.bf-merkmale {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.92rem;
  color: var(--service-ink-soft);
}
.bf-merkmale li::before {
  content: "—";
  margin-right: 0.5rem;
  color: var(--service-line-strong, var(--service-ink-soft));
}

/* ---------- Karte: der eine sichtbare Halt ---------- */

.bf-karte {
  scroll-margin-top: var(--bf-sprung, 9rem);
  background: #fff;
  border: 1px solid var(--service-line);
  border-radius: var(--bf-r);
  max-width: 46rem;
  margin-inline: auto;
}
.bf-karte + .bf-karte {
  margin-top: 1rem;
}
.bf-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.4rem;
  border-bottom: 1px solid var(--service-line);
  font-family: var(--service-display);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--service-ink-soft);
}
.bf-karte-leib {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
}
.bf-karte-titel {
  font-family: var(--service-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.bf-karte-hilfe {
  color: var(--service-ink-soft);
  margin: 0 0 1.4rem;
  max-width: 40rem;
}

/* ---------- Fragen ---------- */

.bf-fragen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-frage {
  scroll-margin-top: var(--bf-sprung, 9rem);
  background: #fff;
  border: 1px solid var(--service-line);
  border-radius: var(--bf-r);
  max-width: 46rem;
  margin-inline: auto;
}
.bf-frage[hidden] {
  display: none;
}
.bf-frage fieldset {
  border: 0;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
}
.bf-frage legend {
  scroll-margin-top: var(--bf-sprung, 9rem);
  font-family: var(--service-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -0.015em;
  padding: 0;
}
.bf-frage legend:focus-visible {
  outline: 3px solid var(--service-green);
  outline-offset: 4px;
}
.bf-frage-hilfe {
  color: var(--service-ink-soft);
  margin: 0.6rem 0 1.4rem;
  max-width: 38rem;
}

.bf-antworten {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.bf-antwort {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  border: 1px solid var(--service-line);
  border-radius: var(--bf-r);
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.15s var(--bf-ease),
    background 0.15s var(--bf-ease);
}
.bf-antwort:hover {
  border-color: var(--service-green);
}
.bf-antwort:has(input:checked) {
  border-color: var(--service-green);
  background: var(--service-green-pale);
  box-shadow: inset 0 0 0 1px var(--service-green);
}
.bf-antwort input {
  margin-top: 0.25rem;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--service-green);
}
.bf-antwort-titel {
  display: block;
  font-family: var(--service-display);
  font-weight: 620;
  line-height: 1.35;
}
.bf-antwort-zusatz {
  display: block;
  color: var(--service-ink-soft);
  font-size: 0.92rem;
  margin-top: 0.15rem;
}

.bf-beispiele {
  border-top: 1px solid var(--service-line);
  padding-top: 0.9rem;
  font-size: 0.95rem;
}
.bf-beispiele summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--service-green-dark);
  padding: 0.35rem 0;
  min-height: 1.5rem;
}
.bf-beispiele ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--service-ink-soft);
}

/* ---------- Aktionen ---------- */

.bf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.4rem;
}
.bf-btn {
  font-family: var(--service-display);
  font-size: 0.95rem;
  font-weight: 620;
  padding: 0.8rem 1.5rem;
  border-radius: var(--bf-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  transition: background 0.15s var(--bf-ease);
}
.bf-btn-haupt {
  background: var(--service-green);
  border-color: var(--service-green);
  color: #fff;
}
.bf-btn-haupt:hover {
  background: var(--service-green-dark);
}
/* Der Haupt-Knopf ist im Bericht ein <a>. Eine spezifischere Regel der Website
   setzt dort die Textfarbe auf den Fliesstext-Ton — gemessen 2,95:1 auf Gruen,
   also unter dem Mindestwert. Hoehere Spezifitaet holt die 6,0:1 zurueck. */
.tool-bfsg-check a.bf-btn-haupt,
.tool-bfsg-check a.bf-btn-haupt:hover,
.tool-bfsg-check a.bf-btn-haupt:visited,
.tool-assistent a.bf-btn-haupt,
.tool-assistent a.bf-btn-haupt:hover,
.tool-assistent a.bf-btn-haupt:visited {
  color: #fff;
}
.bf-btn-rand {
  background: #fff;
  border-color: var(--service-line-strong, var(--service-ink-soft));
  color: var(--service-ink);
}
.bf-btn-rand:hover {
  border-color: var(--service-ink);
}
.bf-btn-still {
  background: none;
  border: 0;
  padding: 0.35rem 0;
  font-family: var(--service-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--service-green-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 1.75rem;
}

/* ---------- Fehler ---------- */

.bf-fehlerbox {
  border: 2px solid var(--bf-rot);
  border-radius: var(--bf-r);
  background: var(--bf-rot-flaeche);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.bf-fehlerbox h2,
.bf-fehlerbox p.bf-fehler-titel {
  font-family: var(--service-display);
  font-size: 1.05rem;
  font-weight: 660;
  color: var(--bf-rot);
  margin: 0 0 0.5rem;
}
.bf-fehlerbox ul {
  margin: 0;
  padding-left: 1.2rem;
}
.bf-fehlerbox a {
  color: var(--bf-rot);
  font-weight: 600;
}
.bf-feldfehler {
  display: flex;
  gap: 0.5rem;
  border-left: 3px solid var(--bf-rot);
  padding: 0.4rem 0 0.4rem 0.7rem;
  margin: 0 0 1rem;
  color: var(--bf-rot);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Prüfseite: Ihre Antworten ---------- */

.bf-antwortliste {
  margin: 0 0 0.5rem;
  border-top: 1px solid var(--service-line);
}
.bf-antwortliste > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--service-line);
}
.bf-antwortliste dt {
  color: var(--service-ink-soft);
  font-size: 0.92rem;
}
.bf-antwortliste dd {
  margin: 0;
  font-weight: 600;
}

/* ---------- Ampel ---------- */

.bf-ampel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  border: 1px solid var(--service-line);
  border-left-width: 4px;
  border-radius: var(--bf-r);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.6rem;
}
.bf-ampel-glyph {
  font-size: 1.1rem;
  line-height: 1.6;
}
.bf-ampel-marke {
  font-family: var(--service-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.bf-ampel h2 {
  font-family: var(--service-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  font-weight: 660;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.bf-ampel p:last-child {
  margin: 0;
  color: var(--service-ink-soft);
}
.bf-ampel-rot {
  border-color: var(--bf-rot-linie);
  border-left-color: var(--bf-rot);
  background: var(--bf-rot-flaeche);
}
.bf-ampel-rot .bf-ampel-glyph,
.bf-ampel-rot .bf-ampel-marke {
  color: var(--bf-rot);
}
.bf-ampel-gelb {
  border-color: var(--bf-gelb-linie);
  border-left-color: var(--bf-gelb);
  background: var(--bf-gelb-flaeche);
}
.bf-ampel-gelb .bf-ampel-glyph,
.bf-ampel-gelb .bf-ampel-marke {
  color: var(--bf-gelb);
}
.bf-ampel-gruen {
  border-color: var(--bf-gruen-linie);
  border-left-color: var(--bf-gruen);
  background: var(--bf-gruen-flaeche);
}
.bf-ampel-gruen .bf-ampel-glyph,
.bf-ampel-gruen .bf-ampel-marke {
  color: var(--bf-gruen);
}

.bf-begruendung {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--service-ink-soft);
}
.bf-begruendung li {
  margin-bottom: 0.4rem;
}

/* ---------- Eingabe ---------- */

.bf-feld-label {
  display: block;
  font-family: var(--service-display);
  font-weight: 620;
  margin-bottom: 0.3rem;
}
.bf-feld-hilfe {
  color: var(--service-ink-soft);
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
}
.bf-eingabezeile {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.bf-input::placeholder {
  color: var(--service-ink-soft);
  opacity: 1;
}
.bf-input {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--service-line-strong, var(--service-ink-soft));
  border-radius: var(--bf-r);
  background: #fff;
  min-height: 2.75rem;
}

/* ---------- Prüffaden: senkrechter Fortschritt ---------- */

.bf-thread {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.bf-thread li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.1rem;
  position: relative;
}
.bf-thread li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.53rem;
  top: 1.4rem;
  bottom: 0;
  width: 2px;
  background: var(--service-line);
}
.bf-thread li[data-lage="fertig"]:not(:last-child)::before {
  background: var(--service-green);
}
.bf-thread-punkt {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--service-line);
  background: #fff;
  margin-top: 0.2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  color: #fff;
}
.bf-thread li[data-lage="laeuft"] .bf-thread-punkt {
  border-color: var(--service-green);
  box-shadow: 0 0 0 4px var(--service-green-pale);
}
.bf-thread li[data-lage="fertig"] .bf-thread-punkt {
  border-color: var(--service-green);
  background: var(--service-green);
}
.bf-thread-name {
  font-family: var(--service-display);
  font-weight: 620;
  color: var(--service-ink-soft);
}
.bf-thread li[data-lage="laeuft"] .bf-thread-name,
.bf-thread li[data-lage="fertig"] .bf-thread-name {
  color: var(--service-ink);
}
.bf-thread-teil {
  display: block;
  font-size: 0.9rem;
  color: var(--service-ink-soft);
  margin-top: 0.1rem;
}
.bf-lauf-hinweis {
  color: var(--service-ink-soft);
  font-size: 0.92rem;
  margin: 0;
}
.bf-lauf-ziel {
  color: var(--service-ink-soft);
}
.bf-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Bericht ---------- */

.bf-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--service-line);
  border-bottom: 1px solid var(--service-line);
  margin: 0 0 1.8rem;
}
.bf-kennzahlen > div {
  padding: 0.9rem 1rem 0.9rem 0;
}
.bf-kennzahlen dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--service-ink-soft);
}
.bf-kennzahlen dd {
  margin: 0.2rem 0 0;
  font-family: var(--service-display);
  font-size: 1.7rem;
  font-weight: 680;
  line-height: 1;
}

.bf-befunde-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.bf-befunde-kopf h3 {
  font-family: var(--service-display);
  font-size: 1.15rem;
  font-weight: 660;
  margin: 0;
}
.bf-befunde-sort {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--service-ink-soft);
}

.bf-befund {
  border: 1px solid var(--service-line);
  border-left-width: 4px;
  border-radius: var(--bf-r);
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.7rem;
}
.bf-befund-kritisch,
.bf-befund-hoch {
  border-left-color: var(--bf-rot);
}
.bf-befund-mittel {
  border-left-color: var(--bf-gelb);
}
.bf-befund-gering {
  border-left-color: var(--service-line-strong, var(--service-ink-soft));
}
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--service-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: var(--bf-r-klein);
  border: 1px solid currentColor;
}
.bf-badge-kritisch,
.bf-badge-hoch {
  color: var(--bf-rot);
  background: var(--bf-rot-flaeche);
}
.bf-badge-mittel {
  color: var(--bf-gelb);
  background: var(--bf-gelb-flaeche);
}
.bf-badge-offen {
  color: var(--service-ink-soft);
  background: var(--service-paper-strong);
}
.bf-befund h4 {
  font-family: var(--service-display);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 0.5rem 0 0.6rem;
}
.bf-befund-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--service-ink-soft);
}
.bf-befund-daten b {
  color: var(--service-ink);
  font-weight: 620;
}
.bf-befund p {
  margin: 0 0 0.6rem;
}
.bf-befund-fix {
  background: var(--service-paper-strong);
  border-radius: var(--bf-r-klein);
  padding: 0.7rem 0.9rem;
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
}
.bf-befund details {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.bf-befund summary {
  cursor: pointer;
  padding: 0.35rem 0;
  min-height: 1.5rem;
  color: var(--service-ink-soft);
}
.bf-befund code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.bf-formalien {
  border-top: 1px solid var(--service-line);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}
.bf-formalien p {
  margin: 0 0 0.6rem;
}

.bf-cta {
  border: 1px solid var(--service-green);
  border-radius: var(--bf-r);
  background: var(--service-green-pale);
  padding: 1.2rem 1.4rem;
  margin-top: 1.6rem;
}
.bf-cta p {
  margin: 0 0 1rem;
}
.bf-ergebnis-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.bf-fussnote {
  color: var(--service-ink-soft);
  font-size: 0.9rem;
  margin: 1.2rem auto 0;
  max-width: 46rem;
}

/* ---------- Wissen: Inhaltsverzeichnis links ---------- */

.bf-wissen {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: var(--bf-sprung, 9rem);
}

/* Bewusst eigenes Raster statt Tailwind-Utilities: das gebaute CSS der Website
   ist gepurgt, nicht verwendete Breakpoint-Klassen existieren dort nicht. */
.bf-wissen-raster {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 62rem) {
  .bf-wissen-raster {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 3rem;
  }
}
.bf-toc-spalte {
  display: none;
}
@media (min-width: 62rem) {
  .bf-toc-spalte {
    display: block;
  }
}
.bf-toc-haft {
  position: sticky;
  top: calc(var(--bf-nav-h, 88px) + 4.5rem);
}
.bf-toc-kopf {
  font-family: var(--service-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--service-ink-soft);
  margin: 0 0 0.9rem;
}
.bf-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--service-line);
  font-size: 0.86rem;
  line-height: 1.35;
}
.bf-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--service-ink-soft);
  text-decoration: none;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.bf-toc a:hover {
  color: var(--service-ink);
}
.bf-toc a.ist-aktiv {
  border-left-color: var(--service-green);
  color: var(--service-ink);
  font-weight: 620;
}

.bf-artikel {
  max-width: 42rem;
  /* Bei 200 % Textzoom lief der Artikel 127 Pixel breiter als der Rahmen und
     wurde von overflow-x: clip am body stumm abgeschnitten. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.bf-artikel p,
.bf-checkliste li,
.bf-befund p,
.bf-ampel p,
.bf-begruendung li {
  overflow-wrap: break-word;
  hyphens: auto;
}
.bf-artikel h2 {
  scroll-margin-top: var(--bf-sprung, 9rem);
  font-family: var(--service-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.6rem;
}
.bf-artikel h3 {
  scroll-margin-top: var(--bf-sprung, 9rem);
  font-family: var(--service-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  font-weight: 660;
  line-height: 1.3;
  margin: 2.4rem 0 0.8rem;
  scroll-margin-top: 5rem;
}
.bf-artikel p {
  margin: 0 0 1rem;
}
.bf-checkliste {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}
.bf-checkliste li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-bottom: 1px solid var(--service-line);
}
.bf-checkliste li::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: 0.6rem;
  font-size: 1.1rem;
  color: var(--service-green);
}

/* ---------- Schmale Schirme ---------- */

/* Auf Telefonen frass der Aufmacher rund 500 Pixel, bei 568 Pixel Schirmhoehe
   stand die erste Frage 88 Pixel unter der Falz. Vorspann und Merkmale wandern
   deshalb unter das Werkzeug; die Ueberschrift bleibt. */
@media (max-width: 48rem) {
  .tool-bfsg-check .tool-hero,
  .tool-assistent .tool-hero {
    padding-block: 5.5rem 1rem;
  }
  .tool-bfsg-check .tool-hero h1,
  .tool-assistent .tool-hero h1 {
    font-size: clamp(1.75rem, 1.4rem + 3vw, 2.4rem);
  }
  .tool-bfsg-check .tool-hero-lead,
  .tool-bfsg-check .bf-merkmale,
  .tool-assistent .tool-hero-lead,
  .tool-assistent .bf-merkmale {
    display: none;
  }
  .bf-merkmale-mobil {
    display: block;
  }
  .bf-werkzeug {
    padding-block: 1rem 2rem;
  }
  /* Solange der Einwilligungsbanner steht, unten Platz lassen — er ist fixiert
     und verdeckte sonst Antwortflaechen und den Pruefen-Knopf.

     Zwei Quellen, weil zwei Messungen existieren: --bf-banner-h stammt aus dem
     Tool-Skript, --geckit-banner-h meldet der Banner seit dem 19.08.2026
     selbst. max() nimmt den groesseren Wert und funktioniert damit auch dort,
     wo nur eine der beiden gesetzt ist. Noetig, weil messeBanner() im
     BFSG-Check das Host-Element <geckit-cookie-banner> misst — das ist als
     Licht-DOM-Huelle ohne eigene Hoehe immer 0, der fixierte Kasten liegt
     darin. Die Reservierung lief dort also ins Leere. */
  .bf-werkzeug {
    padding-bottom: calc(
      2rem + max(var(--bf-banner-h, 0px), var(--geckit-banner-h, 0px))
    );
  }
}
.bf-merkmale-mobil {
  display: none;
  margin: 1.5rem auto 0;
  max-width: 46rem;
}

@media (max-width: 40rem) {
  .bf-kennzahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bf-antwortliste > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
  .bf-eingabezeile .bf-btn {
    width: 100%;
    justify-content: center;
  }
  .bf-faden-in {
    padding: 0.45rem 1rem;
    border-radius: var(--bf-r);
    gap: 0.1rem 0.8rem;
    font-size: 0.85rem;
  }
  .bf-faden p {
    font-size: 0.82rem;
  }
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  .bf-antwort,
  .bf-btn,
  .bf-toc a {
    transition: none;
  }
}

/* ==========================================================================
   BFSG-Check — Mobiles Feintuning
   ==========================================================================
   Gemessen auf iPhone SE (320x568): Ueber der ersten Antwortflaeche lagen
   Navigationsleiste, Fortschrittsfaden, Brotkruemel, Eyebrow, Ueberschrift und
   Kartenkopf — zusammen 593 Pixel bei 568 Pixel Schirmhoehe. Die erste Antwort
   war damit nie im Bild. Alles Doppelte weicht.
   ========================================================================== */

/* Der Faden wuchs bei Zoom auf 207 Pixel und verdeckte den Assistenten. */
.bf-faden-in {
  max-height: 5rem;
  overflow: hidden;
}

@media (max-width: 30rem) {
  /* Der Ausblick weicht — die Schrittangabe links traegt die Orientierung. */
  .bf-faden-next {
    display: none;
  }
  /* "Betroffenheit" steht bereits im Kartenkopf und in der Ueberschrift. */
  .bf-faden-lage,
  .bf-faden-sep {
    display: none;
  }
  /* Der Eyebrow wiederholt, was Brotkruemel und Titel schon sagen. */
  .tool-bfsg-check .tool-hero .service-eyebrow,
  .tool-assistent .tool-hero .service-eyebrow {
    display: none;
  }
  /* "Frage 1 von 6" steht identisch im Faden. Der Zurueck-Verweis bleibt. */
  .bf-frage .bf-karte-kopf > span:first-child {
    display: none;
  }
  /* Dasselbe in Werkzeugen ohne Fragenkatalog: die Schrittzahl steht im
     Faden, das Sachlabel ("Adresse", "Ergebnis") bleibt — es ist die einzige
     Stelle, an der es auf schmalen Schirmen ueberhaupt noch steht.
     Auf 320 Pixeln sind das 44 Pixel, die das Werkzeug hoeher ruecken. */
  .tool-assistent .bf-kopf-schritt,
  .tool-assistent .bf-kopf-sep {
    display: none;
  }
  /* Der Kartentitel wiederholt auf schmalen Schirmen, was H1 und
     Feldbeschriftung schon sagen. Er bleibt fuer die Gliederung stehen,
     faellt aber von zwei Zeilen auf eine. */
  .tool-assistent .bf-karte-titel {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
  }
  .bf-frage .bf-karte-kopf {
    justify-content: flex-end;
    padding-block: 0.4rem;
  }
  .bf-frage .bf-karte-kopf:not(:has(button)) {
    display: none;
  }
  .bf-frage fieldset {
    padding-top: 1rem;
  }
  .bf-frage-hilfe {
    margin: 0.5rem 0 0.9rem;
  }
  .bf-antwort {
    padding: 0.8rem 0.9rem;
  }
}

/* Sehr schmale Telefone (iPhone SE und aehnliche, 320-368 px):
   Die Zusatzzeile der Antworten laeuft dort ueber zwei Zeilen und kostete die
   erste Antwortflaeche den Platz im ersten Bildschirm. Enger gesetzt statt
   ausgeblendet — der Text traegt zur Abgrenzung bei. Die zweite Antwort
   braucht auf diesen Geraeten einen kurzen Wisch; das ist vertretbar, weil ein
   Tipp auf eine Antwort ohnehin selbst weiterschaltet. */
@media (max-width: 23rem) {
  .bf-antwort {
    padding: 0.7rem 0.85rem;
    gap: 0.7rem;
  }
  .bf-antwort-zusatz {
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 0.1rem;
  }
  .bf-antworten {
    gap: 0.5rem;
  }
  .bf-frage legend {
    font-size: 1.2rem;
  }
  .bf-frage-hilfe {
    margin: 0.45rem 0 0.7rem;
  }
  .tool-bfsg-check .tool-hero,
  .tool-assistent .tool-hero {
    padding-block: 5.25rem 0.5rem;
  }
}

/* PDF-Verweis im Berichtskopf — kleiner als die Hauptknoepfe, aber deutlich. */
.bf-btn-klein {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  min-height: 2.25rem;
  text-decoration: none;
}
.tool-bfsg-check a.bf-btn-rand,
.tool-bfsg-check a.bf-btn-rand:visited,
.tool-assistent a.bf-btn-rand,
.tool-assistent a.bf-btn-rand:visited {
  color: var(--service-ink);
  text-decoration: none;
}

/* ==========================================================================
   Signal-Liste — Werkzeuge, die eine feste Zahl von Einzelpruefungen melden
   ==========================================================================
   Entstanden fuer /tools/website-frischecheck/ (fuenf Mindeststandards),
   bewusst allgemein gehalten: jede Pruefung mit Glyphe, Marke in
   Grossbuchstaben und ausgeschriebenem Befund. Nie Farbe allein — das
   verlangt tools-regeln.md § 8 und das Gestaltungsmuster gleichermassen.
   ========================================================================== */

.bf-signale {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  border-top: 1px solid var(--service-line);
}
.bf-signale > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--service-line);
}
.bf-signal-glyph {
  grid-row: span 2;
  font-size: 1rem;
  line-height: 1.55;
}
.bf-signal-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin: 0;
}
.bf-signal-name {
  font-family: var(--service-display);
  font-weight: 660;
  font-size: 1rem;
}
.bf-signal-marke {
  font-family: var(--service-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.bf-signal-text {
  margin: 0;
  color: var(--service-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.bf-signal-erfuellt .bf-signal-glyph,
.bf-signal-erfuellt .bf-signal-marke {
  color: var(--bf-gruen);
}
.bf-signal-offen .bf-signal-glyph,
.bf-signal-offen .bf-signal-marke {
  color: var(--bf-gelb);
}

/* Geprueft-Zeile ueber dem Ergebnis: nennt die tatsaechlich abgerufene
   Adresse nach allen Weiterleitungen, nicht die eingetippte. */
.bf-quelle {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  color: var(--service-ink-soft);
  overflow-wrap: anywhere;
}
.bf-quelle strong {
  color: var(--service-ink);
  font-weight: 600;
}

/* Kontext-Datenpunkt unter den Signalen — zaehlt bewusst nicht in die Ampel. */
.bf-kontext {
  border-left: 3px solid var(--service-line-strong, var(--service-ink-soft));
  padding: 0.15rem 0 0.15rem 0.9rem;
  margin: 0 0 1.6rem;
  color: var(--service-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Neutrale Ampel: der Abruf ist fehlgeschlagen. Bewusst grau und ohne
   Warnfarbe — eine nicht erreichbare Seite ist kein schlechtes Ergebnis,
   sondern gar keines. Rot waere hier eine Behauptung ueber die Website. */
.bf-ampel-neutral {
  border-color: var(--service-line-strong, var(--service-ink-soft));
  background: color-mix(in srgb, var(--service-ink) 4%, transparent);
}
.bf-ampel-neutral .bf-ampel-glyph,
.bf-ampel-neutral .bf-ampel-marke {
  color: var(--service-ink-soft);
}

/* Zwischenueberschrift ueber der Signal-Liste. */
.bf-signale-titel {
  font-family: var(--service-display);
  font-size: 1.15rem;
  font-weight: 660;
  margin: 0 0 0.9rem;
}


/* Technischer Kurzname neben dem Signal-Namen — "MX", "CAA", "og:image".
   Nennt die Fachbezeichnung, ohne sie in den Vordergrund zu stellen: wer sie
   kennt, findet sich schneller zurecht; wer nicht, liest den Klarnamen. */
.bf-signal-typ {
  font-size: 0.85rem;
  color: var(--service-ink-soft);
}
.bf-signal-typ code {
  font-size: 0.85rem;
}

/* Rohdaten unter dem Ergebnis: die tatsaechlich gefundenen Eintraege.
   Aufklappbar, weil sie fuer die meisten Lesenden nicht der Punkt sind —
   aber wer sie braucht, braucht sie vollstaendig. */
.bf-eintraege {
  display: grid;
  gap: 1.1rem;
  margin-top: 1rem;
}
.bf-gruppe-titel {
  font-family: var(--service-display);
  font-weight: 660;
  font-size: 1rem;
  margin: 0 0 0.35rem;
}
.bf-gruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}
.bf-gruppe li {
  font-size: 1rem;
  color: var(--service-ink-soft);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bf-gruppe code {
  font-size: 0.95rem;
  color: var(--service-ink);
}

/* ==========================================================================
   Abhak-Liste — Rechnungs-Pflichtangaben-Check
   ==========================================================================
   Bewusst alle Punkte nebeneinander statt eine Frage pro Karte: Man haelt die
   Rechnung daneben und hakt ab. Neun Kartenwechsel waehrend des Abgleichs mit
   einem Dokument waeren eine Verschlechterung. Das Muster verlangt einen
   sichtbaren Halt — die Liste IST dieser Halt.
   ========================================================================== */

.rp-liste {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  border-top: 1px solid var(--service-line);
}
.rp-punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1.2rem;
  align-items: start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--service-line);
  border-left: 3px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}
.rp-punkt.ist-ja {
  border-left-color: var(--bf-gruen);
}
.rp-punkt.ist-nein {
  border-left-color: var(--bf-rot);
  background: var(--bf-rot-flaeche);
}
.rp-punkt-titel {
  font-family: var(--service-display);
  font-weight: 660;
  font-size: 1rem;
  margin: 0 0 0.2rem;
}
.rp-punkt-erklaerung {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--service-ink-soft);
}
.rp-marke {
  display: inline-block;
  font-family: var(--service-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-gelb);
  border: 1px solid var(--bf-gelb-linie);
  background: var(--bf-gelb-flaeche);
  border-radius: var(--bf-r-klein);
  padding: 0.05rem 0.4rem;
  vertical-align: 0.1em;
}
.rp-punkt-knoepfe {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rp-knopf {
  font-family: var(--service-display);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--service-line-strong, var(--service-ink-soft));
  border-radius: var(--bf-r);
  background: #fff;
  color: var(--service-ink);
  padding: 0.45rem 0.8rem;
  min-height: 2.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.rp-knopf:hover {
  border-color: var(--service-ink);
}
.rp-knopf[data-status="ja"].ist-aktiv {
  background: var(--bf-gruen);
  border-color: var(--bf-gruen);
  color: #fff;
}
.rp-knopf[data-status="nein"].ist-aktiv {
  background: var(--bf-rot);
  border-color: var(--bf-rot);
  color: #fff;
}

/* Zaehlstand ueber dem Auswerten-Knopf. */
.rp-stand {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: var(--service-ink-soft);
}

/* Ablageflaeche fuer den optionalen PDF-Vorabgleich — flacher als bei den
   reinen Datei-Werkzeugen, weil sie hier ein Angebot ist, kein Hauptweg. */
.rp-ablage {
  border: 2px dashed var(--service-line-strong, var(--service-ink-soft));
  border-radius: var(--bf-r);
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  text-align: center;
  cursor: pointer;
  display: block;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}
.rp-ablage.drop-aktiv {
  border-color: var(--service-green);
  background: var(--service-green-pale);
}
.rp-ablage p {
  margin: 0;
  font-size: 1rem;
}
.rp-ablage .rp-ablage-klein {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--service-ink-soft);
}

@media (max-width: 34rem) {
  .rp-punkt {
    grid-template-columns: minmax(0, 1fr);
  }
  .rp-knopf {
    flex: 1;
  }
}

/* ==========================================================================
   Belegvorschau — XRechnung-Viewer
   ==========================================================================
   Der eigentliche Zweck des Werkzeugs: eine Datei, die niemand lesen kann,
   sieht hier aus wie eine Rechnung. Deshalb bewusst wie ein Beleg gesetzt —
   Kopf mit Nummer und Datum, Parteien nebeneinander, Positionen als Tabelle,
   Summen rechts. Keine Zierde, nur die gewohnte Ordnung.
   ========================================================================== */

.bf-beleg {
  border: 1px solid var(--service-line);
  border-radius: var(--bf-r);
  background: #fff;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.6rem;
}
.bf-beleg-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--service-line);
}
.bf-beleg-nr {
  font-family: var(--service-display);
  font-size: 1.15rem;
  font-weight: 660;
  margin: 0;
}
.bf-beleg-datum {
  margin: 0;
  color: var(--service-ink-soft);
  font-size: 1rem;
}
.bf-beleg-parteien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--service-line);
}
.bf-beleg-partei p {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bf-beleg-rolle {
  font-family: var(--service-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--service-ink-soft);
  margin-bottom: 0.3rem !important;
}
.bf-beleg-name {
  font-weight: 660;
}
.bf-beleg-klein {
  color: var(--service-ink-soft);
  font-size: 0.95rem !important;
}

/* Positionen: auf schmalen Schirmen scrollt die Tabelle in ihrem eigenen
   Kasten, damit die Seite nicht waagerecht laeuft. */
.bf-beleg-positionen {
  overflow-x: auto;
  padding: 1.1rem 0 0;
}
.bf-beleg-positionen table {
  width: 100%;
  border-collapse: collapse;
  min-width: 26rem;
}
.bf-beleg-positionen th {
  font-family: var(--service-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--service-ink-soft);
  text-align: left;
  padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--service-line);
}
.bf-beleg-positionen th.ist-rechts,
.bf-beleg-positionen td.ist-rechts {
  text-align: right;
  padding-right: 0;
  padding-left: 0.6rem;
}
.bf-beleg-positionen td {
  padding: 0.6rem 0.6rem 0.6rem 0;
  border-bottom: 1px solid var(--service-line);
  font-size: 1rem;
  vertical-align: top;
}
.bf-beleg-positionen tr:last-child td {
  border-bottom: 0;
}

.bf-beleg-summen {
  display: grid;
  gap: 0.35rem;
  justify-content: end;
  padding-top: 1rem;
  border-top: 1px solid var(--service-line);
  margin-top: 0.4rem;
}
.bf-beleg-summe {
  display: grid;
  grid-template-columns: auto minmax(6rem, auto);
  gap: 1.5rem;
  font-size: 1rem;
}
.bf-beleg-summe dt {
  color: var(--service-ink-soft);
}
.bf-beleg-summe dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bf-beleg-summe.ist-gesamt {
  font-family: var(--service-display);
  font-weight: 660;
  font-size: 1.1rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--service-line);
  margin-top: 0.2rem;
}
.bf-beleg-summe.ist-gesamt dt {
  color: var(--service-ink);
}

.bf-beleg-fuss {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--service-line);
  display: grid;
  gap: 0.3rem;
}
.bf-beleg-fuss p {
  margin: 0;
  font-size: 1rem;
  color: var(--service-ink-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
  .bf-beleg {
    padding: 1.1rem 1rem;
  }
}

/* Der Positionsbereich ist auf schmalen Schirmen waagerecht scrollbar und
   deshalb per Tastatur fokussierbar (axe: scrollable-region-focusable).
   Ohne sichtbaren Fokusrahmen waere das ein unsichtbarer Tabstopp. */
.bf-beleg-positionen:focus-visible {
  outline: 2px solid var(--service-green-dark);
  outline-offset: 3px;
  border-radius: var(--bf-r-klein);
}