/* Gemeinsamer Rahmen für die eigenständigen Werkzeugseiten unter /public.
 *
 * WOZU (13.08.2026). 36 Werkzeugseiten liegen als fertige HTML-Dateien neben
 * der React-Website und überschreiben deren Routen. Jede war einzeln gebaut:
 * ein unverlinktes Logo im <header>, keine Navigation, keine Fußzeile. Gemessen
 * an public/arbeitshilfe-bauzeit.html: fünf Links auf der ganzen Seite, keiner
 * davon zur Startseite. Wer über eine Suchmaschine dort landet, sitzt in einer
 * Sackgasse.
 *
 * WARUM EIGENE KLASSEN. 31 der 36 Seiten bringen einen eigenen <style>-Block
 * mit, der die Elementwähler `header`, `footer`, `nav` und `a` bereits belegt.
 * Ein Rahmen, der auf Elementwähler setzt, würde dort je nach Seite anders
 * aussehen. Deshalb hängt hier alles unter `.aqr-` und setzt zurück, was es
 * braucht, statt sich auf Vererbung zu verlassen.
 *
 * Farben aus der Website, nicht neu erfunden:
 *   --aq-deep #0c1b30 · --aq-ink #10233d · --aq-blue #2e62a6
 *   --aq-grey #4a5968 · --aq-line #c6ced6 · --aq-paper #f4f6f5
 */

.aqr-kopf,
.aqr-fuss {
  --aqr-deep: #0c1b30;
  --aqr-ink: #10233d;
  --aqr-blue: #2e62a6;
  --aqr-grey: #4a5968;
  --aqr-line: #c6ced6;
  --aqr-paper: #f4f6f5;
  --aqr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.aqr-kopf *,
.aqr-fuss * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- Kopf --- */

.aqr-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--aqr-line);
}

.aqr-kopf-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Ohne das Umbrechen schob die Navigation den Knopf aus dem Bild, sobald
   * der Platz knapp wurde — im ersten Entwurf schon bei 800 px sichtbar. */
  flex-wrap: wrap;
}

.aqr-marke,
.aqr-nav {
  min-width: 0;
}

/* Das Logo ist ab jetzt ein Weg nach Hause, kein Bild. */
.aqr-marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--aqr-ink);
}

.aqr-marke img {
  height: 34px;
  width: auto;
  display: block;
}

.aqr-marke-text {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;
}

.aqr-marke-unter {
  display: block;
  font-family: var(--aqr-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqr-grey);
  margin-top: 3px;
}

.aqr-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.aqr-nav a {
  font-size: 14px;
  color: var(--aqr-grey);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.aqr-nav a:hover,
.aqr-nav a:focus-visible {
  color: var(--aqr-ink);
  border-bottom-color: var(--aqr-blue);
}

.aqr-nav .aqr-knopf {
  background: var(--aqr-ink);
  color: #fff;
  padding: 9px 16px;
  border-radius: 2px;
  border-bottom: 0;
  font-weight: 500;
}

.aqr-nav .aqr-knopf:hover,
.aqr-nav .aqr-knopf:focus-visible {
  background: var(--aqr-blue);
  color: #fff;
}

/* Unter 900 px verschwindet die Navigation nicht, sie rückt unter die Marke —
 * ein Menü hinter drei Strichen wäre auf einer Werkzeugseite ein Klick mehr
 * zwischen Mensch und Rechnung. */
@media (max-width: 900px) {
  .aqr-kopf {
    position: static;
  }
  .aqr-kopf-innen {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
  }
  .aqr-nav {
    flex-wrap: wrap;
    /* Zeilenabstand kleiner, weil die Ziele selbst gewachsen sind — der Kopf
     * bleibt dadurch ungefaehr gleich hoch. */
    gap: 4px 14px;
  }
  /* Tippflaechen (Mobil-Abnahme 14.08.2026). Die Hauptnavigation der statischen
   * Seiten war 19px hoch bei 14px Abstand — auf 33 Seiten, also auf einem
   * Drittel der Website, und das ist der Weg, auf dem sich der Besucher dort
   * ueberhaupt bewegt. 44px ist die uebliche Daumenmarke; WCAG 2.5.8 verlangt
   * mindestens 24px, das war schon vorher nicht erfuellt.
   *
   * Der Unterstrich bei :hover sass am Textrand und sitzt jetzt am unteren Rand
   * der groesseren Flaeche. Auf dem Handy faellt das nicht auf, weil es dort
   * kein Hover gibt; fuer die Tastatur ist der Rahmen (outline) das klarere
   * Zeichen und ersetzt ihn hier. */
  .aqr-nav a {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .aqr-nav a:hover {
    border-bottom: 0;
  }
  .aqr-nav a:focus-visible {
    outline: 2px solid var(--aqr-blue);
    outline-offset: 2px;
  }
  .aqr-nav .aqr-knopf {
    min-height: 44px;
  }
  /* Brotkrume: „Start / Arbeitshilfen" waren 13px hohe Ziele. */
  .aqr-krume a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* ---------------------------------------------------------- Brotkrume --- */

.aqr-krume {
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 24px;
  font-family: var(--aqr-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aqr-grey);
}

.aqr-krume a {
  color: var(--aqr-grey);
  text-decoration: none;
  border-bottom: 1px solid var(--aqr-line);
}

.aqr-krume a:hover {
  color: var(--aqr-ink);
  border-bottom-color: var(--aqr-blue);
}

.aqr-krume span[aria-current] {
  color: var(--aqr-ink);
}

.aqr-krume .aqr-teiler {
  margin: 0 8px;
  border: 0;
  color: var(--aqr-line);
}

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

.aqr-fuss {
  margin: 64px 0 0;
  padding: 0;
  background: var(--aqr-deep);
  color: #9fb2c2;
}

.aqr-fuss-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.aqr-fuss img {
  height: 38px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}

.aqr-anschrift {
  font-family: var(--aqr-mono);
  font-size: 12px;
  line-height: 1.9;
  max-width: 34ch;
  margin: 0;
}

.aqr-anschrift a {
  color: #cddbe6;
  text-decoration: none;
  border-bottom: 1px solid rgba(205, 219, 230, 0.35);
}

.aqr-spalte h2 {
  font-family: var(--aqr-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6f8598;
  margin: 0 0 14px;
  font-weight: 500;
}

.aqr-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aqr-spalte a {
  color: #cddbe6;
  text-decoration: none;
  font-size: 14px;
}

.aqr-spalte a:hover,
.aqr-spalte a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.aqr-fuss-unten {
  border-top: 1px solid rgba(159, 178, 194, 0.22);
}

.aqr-fuss-unten div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  font-family: var(--aqr-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.aqr-fuss-unten a {
  color: #9fb2c2;
  text-decoration: none;
}

.aqr-fuss-unten a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .aqr-fuss-innen {
    flex-direction: column;
    gap: 30px;
    padding: 36px 18px 24px;
  }
  .aqr-fuss-unten div {
    padding: 16px 18px 28px;
  }
}

/* Die Werkzeugseiten setzen ihren Inhalt meist in .blatt mit eigener
 * Randbreite. Kopf und Fuß sollen über die volle Breite laufen, deshalb wird
 * die Randbreite hier aufgehoben — aber nur für die Rahmenteile. */
.aqr-voll {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Der Hinweis, dass hier ein KI-System antwortet.
 *
 * Artikel 50 Abs. 1 der Verordnung (EU) 2024/1689 gilt seit dem 02.08.2026 und
 * verlangt, dass Menschen von der Interaktion mit einem KI-System erfahren;
 * Abs. 5 setzt als spätesten Zeitpunkt die ERSTE Interaktion. Der Hinweis
 * gehört deshalb über das Eingabefeld, nicht unter das Ergebnis.
 *
 * WARUM HIER UND NICHT JE SEITE. Fünf Werkzeugseiten unter /public rufen ein
 * Modell auf. Fünf eigene <style>-Blöcke wären fünf Fassungen, sobald jemand
 * eine anfasst. Der Wortlaut selbst steht in
 * app/src/components/aq/KiHinweis.tsx; `bun run ki-hinweis:pruefen` gleicht
 * beide Seiten Zeichen für Zeichen ab. */
.aqr-ki-hinweis {
  max-width: 1200px;
  margin: 0 0 18px;
  padding: 0 0 0 12px;
  border-left: 2px solid #2e62a6;
  font-size: 13px;
  line-height: 1.6;
  color: #4a5968;
}

/* ------------------------------------------------------------- Druck --- */
/*
 * Auf Papier hat der Rahmen nichts zu suchen.
 *
 * DER BEFUND (13.08.2026 abends, und es ist eine Regression von diesem Abend).
 * Der gemeinsame Rahmen kam heute in 35 Werkzeugseiten. Die Fusszeile ist
 * 432 px hoch und dunkelblau (#0c1b30). Gedruckt wird daraus eine
 * bildschirmfuellende dunkle Flaeche auf der letzten Seite, und der klebende
 * Kopf sitzt oben mit drauf.
 *
 * Getroffen hat es ausgerechnet die drei Muster-Reports (bauantrag, foerder,
 * 34) — Seiten, die zum AUSDRUCKEN da sind und einem Kunden vorgelegt werden.
 * Nachgezaehlt: nur 5 der 36 Seiten haben ueberhaupt einen `@media print`-Block,
 * und KEINE davon blendet den Rahmen aus. Dieser Block gehoert deshalb hierher,
 * an die eine Stelle, und nicht 35-mal einzeln.
 *
 * WAS BLEIBT: die Seitenmarke (sie traegt auf manchen Seiten eine
 * Lieferzusage) und der KI-Hinweis. Beides ist Inhalt, keine Navigation.
 */
@media print {
  .aqr-kopf,
  .aqr-fuss,
  .aqr-krume {
    display: none !important;
  }

  /*
   * NACHTRAG 14.08.2026. Das Ausblenden des Rahmens loeste nur die Haelfte.
   * Zurueck blieb der Seitenhintergrund: 28 der 35 Seiten mit diesem Stylesheet
   * setzen `body { background: var(--paper) }` (#f4f6f5) und legen ein weisses
   * Blatt darauf. Gedruckt steht darum ueber dem Blatt ein grauer Streifen.
   * Am gedruckten PDF von /muster-report-bauantrag.html bei 150 dpi gemessen:
   * y 58 bis 96, also 6,6 mm, ueber die volle Inhaltsbreite (x 58 bis 1215
   * von 1275). Auf einem Report, den ein Bauherr ausdruckt, hat der nichts
   * zu suchen.
   *
   * WARUM HIER UND NICHT JE SEITE: 25 der betroffenen Seiten haben ueberhaupt
   * keinen eigenen `@media print`-Block. Sie einzeln zu versorgen waere 25-mal
   * dieselbe Zeile, die beim naechsten Anfassen auseinanderlaeuft.
   *
   * GEGENGEPRUEFT, dass keine Seite einen dunklen Druckhintergrund braucht:
   * von den 35 Seiten mit diesem Stylesheet setzt nur
   * muster-gutachten-bauschaden.html einen abweichenden Wert (#e8e8e8) — und
   * die Datei setzt `body { background:#fff }` im Druck bereits selbst.
   * referenzen-3d.html (#0b0d0f) bindet dieses Stylesheet nicht ein.
   */
  body {
    background: #fff;
  }
}

/* Die Seitenmarke: was im alten, nackten <header> jeder Werkzeugseite stand.
 * Oft nur eine Nummer, manchmal aber eine LIEFERZUSAGE — in
 * public/buero-zu-wohnen.html „Festpreis · Ergebnis in 10 Werktagen". Beim
 * ersten Durchlauf habe ich den Kopf samt Inhalt entfernt und damit eine
 * Zusage von der Seite genommen; die Lieferzusagen-Wache hat das Deploy
 * angehalten. Seitdem wird der Text hierher gerettet. */
.aqr-seitenmarke {
  max-width: 1200px;
  margin: -12px auto 22px;
  padding: 0 24px;
  font-size: 13px;
  color: #4a5968;
}