/* agentella - Berichtsseiten: Bot-Check (/bot-check, /tuev/<token>) und
   Erreichbarkeits-Audit (/audit/<token>).

   Bis zum 23.09.2026 trugen core/tuev.py und core/audit.py je einen eigenen
   Inline-Stil: heller Grund, Systemschrift, schwarzer Knopf, kein Kopf, kein
   Fuss. Jetzt gilt marke.css (muss vorher geladen sein) plus diese Datei:
   Karten, Tabellen, die grosse Kennzahl und das Formular dieser Seiten.

   Die Formularfelder sehen aus wie auf /demo-anfrage (demo.css), sind hier
   aber auf .bericht begrenzt: demo.css bringt Orb und Auftrittsanimation mit,
   die ein Bericht nicht braucht.

   Im Druck hell: marke.css schaltet die Tokens um, hier fallen Formular und
   Knoepfe weg, und die Karten bekommen eine Linie statt Glas. */

/* Karten und Tabellen duerfen breiter sein als die Lesespalte (40em aus
   marke.css), Fliesstext bleibt schmal. */
.bericht > .karte { max-width: 50em; }

/* Die Ueberschrift traegt den Firmennamen. Ein langes Kompositum wie
   "Hausverwaltungsgesellschaft" lief am Telefon (360 px) rechts aus dem
   Bild und schob die ganze Seite waagerecht. Silbentrennung zuerst, und
   wo sie nicht greift, bricht das Wort statt der Seite. */
.bericht h1 { overflow-wrap: break-word; hyphens: auto; }

.bericht h2 {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em;
  margin: var(--s7) 0 var(--s3);
}
.bericht .stand {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: .04em;
}
.bericht .lead { margin-bottom: var(--s5); }

/* ---------- Karte ----------
   Wie .card der Landing, ohne Blur (eine Lage reicht auf einer Leseseite).
   Eine breite Tabelle scrollt in der Karte, nie die ganze Seite. */
.karte {
  margin-top: var(--s4); padding: var(--s5);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 42%), var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.karte p + p, .karte p + .btn { margin-top: var(--s3); }

.gross {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 20px + 1.6vw, 40px); line-height: 1.15;
  letter-spacing: -.02em; text-wrap: balance;
}
.hinweis { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: var(--s2); }
table .hinweis { font-size: 13px; margin-top: 2px; }

/* ---------- Tabellen ---------- */
.karte table { width: 100%; border-collapse: collapse; font-size: 15px; }
.karte th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: .14em;
  text-align: left; padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line-strong);
}
/* Silbentrennung statt Bruch mitten im Wort (lang="de" steht am html). */
.karte td {
  padding: 12px 12px 12px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word; hyphens: auto;
}
.karte tr:last-child td { border-bottom: 0; }
.karte td:last-child, .karte th:last-child { padding-right: 0; }
/* Rechenweg: Betraege rechtsbuendig und nie zwischen Zahl und Einheit
   umbrochen. */
.karte table.zahlen td:last-child { white-space: nowrap; text-align: right; }
.note { font-weight: 600; white-space: nowrap; }
.offen { color: var(--muted); }

/* Die Szenario-Tabelle hat drei Spalten mit Fliesstext. Am Telefon wird
   jede Zeile ein Block, Note und Befund tragen ihre Spaltennamen selbst. */
@media (max-width: 639px) {
  .karte { padding: var(--s4); }
  .karte table.stapel thead { display: none; }
  .karte table.stapel, .stapel tbody, .stapel tr, .stapel td { display: block; }
  .stapel tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .stapel tr:last-child { border-bottom: 0; }
  .karte .stapel td { padding: 2px 0; border: 0; }
  .stapel td[data-titel]::before {
    content: attr(data-titel) ": ";
    font-family: var(--mono); font-size: 10.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .14em;
  }
}

.methodik {
  margin-top: var(--s7); font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

/* ---------- Formular ---------- */
.bericht form { max-width: 30em; }
.karte * + form { margin-top: var(--s4); }
.bericht .field { margin-top: var(--s4); }
.bericht .field:first-child { margin-top: 0; }
.bericht .field label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 6px;
}
.bericht input[type=text], .bericht input[type=tel], .bericht input[type=email] {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: 12px; font-family: inherit; font-size: 16px; /* < 16px zoomt auf iOS */
  border: 1px solid var(--line-strong); background: var(--glass);
  color: var(--text);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.bericht input::placeholder { color: #5d6d67; }
.bericht input:hover { border-color: rgba(255, 255, 255, .26); }
.bericht input:focus { outline: none; border-color: var(--accent); background: var(--glass-2); }
.bericht input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Einwilligung: Kaestchen links, der ganze Satz daneben ist die Beschriftung
   (Klick auf den Text setzt das Haekchen). */
.einwilligung {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: var(--s5); font-size: 14px; line-height: 1.55;
}
.einwilligung input {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--accent);
}
.einwilligung label { cursor: pointer; }

.bericht .form-hinweis + .btn { margin-top: var(--s3); }
.bericht .btn:disabled { cursor: wait; opacity: .7; transform: none; filter: none; }
@media (max-width: 639px) { .bericht form .btn { width: 100%; } }

/* Eine Zeile fuer Warten, Fehler und Erfolg. Nach dem Erfolg bekommt sie
   den Fokus (tabindex=-1), der Rahmen dafuer waere nur Laerm. */
.form-status { margin-top: 14px; min-height: 1.4em; font-size: 15px; line-height: 1.55; }
.form-status:empty { margin-top: 0; min-height: 0; }
.form-status:focus { outline: none; }
.form-status.fehler { color: var(--red); }
.form-status a { color: var(--accent); text-underline-offset: .2em; }

/* ---------- Druck: hell, ohne Formular und Knoepfe ---------- */
@media print {
  .karte { background: none; border-color: var(--line-strong); overflow: visible; }
  .karte tr { break-inside: avoid; }
  .bericht h2 { break-after: avoid; }
  .bericht form, .bericht .btn, .bericht .nicht-drucken, .form-status { display: none; }
}