/* ==========================================================================
   BLATTSATZ — Gestaltung "Das Blatt"
   Ergaenzt assets/styles.css, ersetzt es nicht. Wird nur auf den sechs
   Blaettern geladen (Startseite + fuenf Leistungsseiten). Alles ist unter
   .blattsatz gekapselt, damit die uebrigen 20 Seiten unberuehrt bleiben.

   Umgesetzt aus dem Konzept vom 16.08.2026:
   B1  technische Beschriftung in einer Schmalschrift der DIN-Linie
   B2  Gruen nur noch fuer Beleg, Mass/Nummer und eine Hauptaktion
   B3  Kennzahlen als Masszahl ausgezeichnet, nicht im Fliesstext
   B4  das Detail bricht aus der Textspalte aus, alles andere rueckt enger
   B5  Rahmen mit Eckmarken und Blattnummer statt kaum sichtbarer Linie
   ========================================================================== */

/* === SCHRIFT ============================================================
   Barlow Semi Condensed steht der DIN-1451-Mittelschrift nahe: schmal,
   offen, ohne Serifen — die Linie der technischen Beschriftung.
   Zwei Schnitte, 44 KB zusammen, selbst gehostet wie Inter.
   Gemessen: "Auslegungs- / Angebotstool" bei 13 px braucht 163 statt
   186 px — 12 % kuerzer. Das entscheidet im Hochformat ueber Umbrueche.
   ====================================================================== */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-semicondensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-semicondensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.blattsatz {
  --font-tech: 'Barlow Semi Condensed', 'Archivo Narrow', 'Segoe UI', sans-serif;
  --engpass: #E5853F;
  --warn: #B8860B;
  --warn-soft: rgba(184, 134, 11, 0.10);
  --blatt-breit: 1240px;
}

/* Die sechs Blaetter setzen die Abschnittspolster von styles.css zurueck.
   Die Hierarchie entsteht hier bewusst neu (B4). */
.blattsatz section { padding: 0; border-top: 0; }

/* === RAHMEN (B5) ========================================================
   Vorher 8 % Weiss und damit auf hellen Bildschirmen unsichtbar. Jetzt
   ein Bauteil: sichtbare Linie, Eckmarken, und unten rechts die
   Blattnummer an der Stelle, an der sie auf jeder Zeichnung steht.
   ====================================================================== */
.blattsatz .rahmen {
  position: relative;
  max-width: var(--blatt-breit);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 54px) clamp(20px, 3.4vw, 46px) clamp(40px, 5vw, 64px);
  border: 1px solid var(--border-2);
}
.blattsatz .rahmen::before,
.blattsatz .rahmen::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--border-3);
}
.blattsatz .rahmen::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.blattsatz .rahmen::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.blattsatz .blattnummer {
  position: absolute;
  right: 18px; bottom: -9px;
  background: var(--bg);
  padding: 0 10px;
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* === TECHNISCHE BESCHRIFTUNG (B1) ======================================= */
.blattsatz .tech {
  font-family: var(--font-tech);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  display: block;
}
.blattsatz .tech strong { color: var(--text-2); font-weight: 600; }

/* === KOPFZEILE DES BLATTS =============================================== */
.blattsatz .blattkopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px 26px; flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: clamp(30px, 4vw, 46px);
}

/* === SPALTE ============================================================= */
.blattsatz .spalte { max-width: 760px; }

/* === TITEL ============================================================== */
.blattsatz .titel {
  font-size: clamp(31px, 4.6vw, 50px);
  line-height: 1.07;
  letter-spacing: -0.028em;
  font-weight: 600;
  margin: 0 0 20px;
  max-width: 21ch;
  text-wrap: balance;
}
.blattsatz .titel span { display: block; color: var(--text-4); }

/* === THEMENZEILE IN DER TITELZEILE ======================================
   Befund 04 aus dem Sichtbarkeitsbericht: keine der zwoelf H1 trug ein
   Suchwort. Der Titel nannte das Thema, die H1 nur die Aussage.
   Die Themenzeile steht deshalb *innerhalb* der H1 — sonst zaehlt sie
   nicht — und wird als technische Beschriftung gesetzt, damit die
   Aussage weiter dominiert. Kein Gruen: eine Themenangabe ist weder
   Beleg noch Mass noch Hauptaktion.
   Spezifitaet bewusst hoeher als die Zeile darueber (span.thema statt
   span), sonst greift deren display/color-Regel.
   ====================================================================== */
.blattsatz .titel span.thema {
  display: block;
  font-family: var(--font-tech);
  font-size: clamp(12.5px, 1.2vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-4);
  margin-bottom: clamp(10px, 1.1vw, 14px);
  max-width: 36ch;
}

.blattsatz .vorspann {
  max-width: 62ch;
  color: var(--text-3);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  margin: 0 0 26px;
}
.blattsatz .vorspann b { color: var(--text-1); font-weight: 500; }

/* === ALLGEMEINTOLERANZ ================================================== */
.blattsatz .allgemein {
  margin-top: clamp(28px, 3.6vw, 40px);
  border: 0.5px solid var(--border-1);
  border-left: 2px solid var(--accent);
  background: var(--bg-elev);
  padding: 15px 20px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 900px;
}
.blattsatz .allgemein-liste {
  display: flex; flex-wrap: wrap; gap: 7px 32px;
  margin: 9px 0 0; padding: 0; list-style: none;
}
.blattsatz .allgemein-liste li {
  font-size: 14.5px; color: var(--text-1);
  display: flex; align-items: baseline; gap: 10px;
}
/* Gedaempft, nicht gruen (B2): die Zusagen sind kein Beleg. */
.blattsatz .allgemein-liste li::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border: 1px solid var(--border-3);
  border-radius: 50%;
  transform: translateY(-1px);
}
.blattsatz .allgemein-fuss { margin: 11px 0 0; font-size: 12.5px; color: var(--text-4); }

/* === ABSCHNITTE (B4) ====================================================
   Enger als vorher. Die Hierarchie kommt aus dem Detail, nicht aus
   gleichmaessig grossen Abstaenden.
   ====================================================================== */
.blattsatz .abschnitt { margin-top: clamp(44px, 5vw, 66px); }
.blattsatz .kopf {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px;
}
.blattsatz .kopf h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0; letter-spacing: -0.022em; font-weight: 600; line-height: 1.22;
}
/* Abschnittsmarke gedaempft statt gruen (B2). */
.blattsatz .kopf .tech { color: var(--text-4); }
.blattsatz .intro { max-width: 64ch; color: var(--text-3); font-size: 15.5px; margin: 0 0 22px; }
.blattsatz .intro b { color: var(--text-1); font-weight: 500; }
.blattsatz .nachfig { margin: 20px 0 0; font-size: 15.5px; color: var(--text-2); max-width: 68ch; }
.blattsatz .nachfig b { color: var(--text); font-weight: 500; }

/* === DAS DETAIL (B4) ====================================================
   Der einzige Abschnitt, der aus der Textspalte ausbricht und die volle
   Blattbreite bekommt. Doppelter Abstand davor, damit man den Wechsel
   von Anmerkung zu Hauptansicht spuert.
   ====================================================================== */
.blattsatz .detail { margin-top: clamp(64px, 8vw, 108px); }
.blattsatz .detail .kopf h2 { font-size: clamp(24px, 3vw, 34px); }

.blattsatz .zeichnung {
  border: 0.5px solid var(--border-1);
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.blattsatz .zeichnung svg { display: block; width: 100%; height: auto; }
.blattsatz .zeichnung .quer { display: block; }
.blattsatz .zeichnung .hoch { display: none; }

.blattsatz .figcap {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 11px;
  font-family: var(--font-tech);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-4);
}

/* === KENNZAHL (B3) ======================================================
   Auf einer Zeichnung ist die Masszahl das Groesste auf dem Blatt.
   ====================================================================== */
.blattsatz .kennzahl {
  display: flex; align-items: baseline; gap: 20px;
  margin: 0 0 22px; max-width: 62ch;
}
.blattsatz .kennzahl .wert {
  font-family: var(--font-tech);
  font-weight: 600;
  font-size: clamp(46px, 6vw, 68px);
  line-height: 0.92;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  flex: none;
}
.blattsatz .kennzahl .erlaeuterung {
  font-size: 15.5px; color: var(--text-3); line-height: 1.5;
}
.blattsatz .kennzahl .erlaeuterung b { color: var(--text-1); font-weight: 500; }

/* === DIE LINIE ========================================================== */
.blattsatz .linie {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 0.5px solid var(--border-2);
}
.blattsatz .linie-halb { padding: 20px 24px 24px; }
.blattsatz .linie-halb + .linie-halb { border-left: 1px solid var(--border-2); }
.blattsatz .linie-halb .tech { margin-bottom: 4px; }
.blattsatz .linie-halb h3 {
  font-size: 17px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.016em;
}
.blattsatz .linie-halb ul { margin: 0; padding: 0; list-style: none; }
.blattsatz .linie-halb li {
  font-size: 14.5px; color: var(--text-3);
  padding: 7px 0 7px 22px; position: relative; line-height: 1.5;
  border-top: 0.5px solid var(--border-1);
}
.blattsatz .linie-halb li:first-child { border-top: 0; }
.blattsatz .linie-halb li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px; background: var(--border-3);
}
.blattsatz .linie-fuss {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-2);
  background: var(--bg-elev);
  padding: 13px 24px;
  font-size: 14px; color: var(--text-3);
}
.blattsatz .linie-fuss b { color: var(--text); font-weight: 500; }

/* === STUECKLISTE (nur Blatt 1) ========================================== */
.blattsatz .stueckliste { border: 0.5px solid var(--border-2); }
.blattsatz .sl-kopf, .blattsatz .sl-pos {
  display: grid;
  grid-template-columns: 54px minmax(190px, 1fr) minmax(148px, .72fr) minmax(220px, 1.3fr) 116px;
}
.blattsatz .sl-kopf { background: var(--bg-elev-2); }
.blattsatz .sl-kopf > * {
  padding: 9px 14px;
  font-family: var(--font-tech);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-4);
  border-right: 0.5px solid var(--border-1);
}
.blattsatz .sl-kopf > *:last-child { border-right: 0; }
.blattsatz .sl-pos {
  border-top: 0.5px solid var(--border-1);
  transition: background .15s;
}
.blattsatz .sl-pos:hover { background: var(--bg-elev); }
.blattsatz .sl-pos > * {
  padding: 16px 14px; border-right: 0.5px solid var(--border-1);
  display: flex; align-items: center;
}
.blattsatz .sl-pos > *:last-child { border-right: 0; }
/* Positionsnummer bleibt gruen: sie ist eine Nummer (B2). */
.blattsatz .sl-nr {
  justify-content: center;
  font-family: var(--font-tech);
  font-size: 14px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.blattsatz .sl-pos:hover .sl-nr { background: var(--accent); color: var(--bg); }
.blattsatz .sl-ben { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--text); }
.blattsatz .sl-ort { font-size: 13.5px; color: var(--text-3); }
.blattsatz .sl-wirk { font-size: 14px; color: var(--text-3); line-height: 1.5; }
.blattsatz .sl-blatt {
  justify-content: flex-end;
  font-family: var(--font-tech);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.blattsatz .sl-pos:hover .sl-blatt { color: var(--accent); }
.blattsatz .sl-blatt::after { content: "\00a0\2192"; }
.blattsatz .sl-fuss {
  border-top: 0.5px solid var(--border-2); background: var(--bg-elev);
  padding: 12px 16px; font-size: 13.5px; color: var(--text-3);
}

/* === PRUEFTABELLE (nur Pruefberichte) ===================================
   Wie die Stueckliste, aber die letzte Spalte traegt kein Blatt, sondern
   einen Befund. Der darf umbrechen und bekommt keinen Pfeil, weil die
   Zeile nicht klickbar ist. */
.blattsatz .pruefliste .sl-kopf,
.blattsatz .pruefliste .sl-pos {
  grid-template-columns: 54px minmax(160px, .95fr) minmax(126px, .62fr) minmax(200px, 1.3fr) minmax(112px, .62fr);
}
.blattsatz .pruefliste .sl-blatt {
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
  color: var(--text-4);
}
.blattsatz .pruefliste .sl-blatt::after { content: none; }
.blattsatz .pruefliste .sl-pos:hover .sl-blatt { color: var(--text-4); }

/* === AUSBRUCH (nur Pruefberichte) =======================================
   Die Bruchkante aus der technischen Zeichnung. Sie sagt: das Bauteil geht
   weiter, gezeigt wird nur der Ausschnitt. Hier: das Dossier geht weiter. */
.blattsatz .ausbruch { margin: 0; }
.blattsatz .ausbruch .kante {
  display: block; width: 100%; height: 15px;
  color: var(--border-2);
}
.blattsatz .ausbruch-inhalt {
  border: 0.5px solid var(--border-1); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--bg-elev); padding: 18px 22px 20px;
}
.blattsatz .ausbruch-kopf {
  font-family: var(--font-tech); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 12px;
}
.blattsatz .ausbruch-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 9px 26px; margin: 0; padding: 0; list-style: none;
}
.blattsatz .ausbruch-liste li {
  font-size: 14.5px; color: var(--text-2); line-height: 1.45;
  padding-left: 15px; position: relative;
}
.blattsatz .ausbruch-liste li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 0.5px; background: var(--text-4);
}
.blattsatz .ausbruch-liste li b { color: var(--text); font-weight: 500; }
.blattsatz .ausbruch-fuss {
  margin: 14px 0 0; font-size: 13.5px; color: var(--text-3);
  padding-top: 12px; border-top: 0.5px solid var(--border-1);
}

/* === MASSKETTE (nur Blatt 1) ============================================ */
.blattsatz .kette {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-right: 0.5px solid var(--border-1); margin-top: 8px;
}
.blattsatz .stat {
  border-left: 0.5px solid var(--border-1);
  padding: 0 18px; display: flex; flex-direction: column;
}
.blattsatz .mass { position: relative; height: 32px; flex: none; display: grid; place-items: center; }
.blattsatz .mass .strich {
  position: absolute; left: -18px; right: -18px; height: 1px; background: var(--border-2);
}
.blattsatz .mass .pf {
  position: absolute; width: 0; height: 0;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.blattsatz .mass .pf.l { left: -18px; border-right: 7px solid var(--border-3); }
.blattsatz .mass .pf.r { right: -18px; border-left: 7px solid var(--border-3); }
/* Massangabe bleibt gruen: das ist ein Mass (B2). */
.blattsatz .mass .nr {
  position: relative; z-index: 1;
  min-width: 34px; padding: 0 8px; height: 22px;
  background: var(--bg); border: 1px solid var(--accent-border); border-radius: 2px;
  color: var(--accent);
  font-family: var(--font-tech); font-size: 13px; font-weight: 600;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.blattsatz .stat h3 {
  font-size: 15.5px; font-weight: 500; margin: 16px 0 14px;
  letter-spacing: -0.012em; line-height: 1.3; min-height: 2.6em;
}
.blattsatz .marke {
  border-top: 1px dashed var(--border-2); padding: 13px 0 18px;
  display: flex; gap: 9px; align-items: flex-start;
}
.blattsatz .marke .m-k {
  flex: none; width: 20px; height: 20px;
  border: 1px solid var(--border-3); border-radius: 50%;
  color: var(--text-3);
  font-family: var(--font-tech); font-size: 12px; font-weight: 600;
  display: grid; place-items: center; transform: translateY(1px);
}
.blattsatz .marke q {
  quotes: "\201E" "\201C";
  font-size: 13px; color: var(--text-3); line-height: 1.45; display: block;
}
.blattsatz .stat.ziel h3 { color: var(--text-3); }
.blattsatz .stat.ziel .mass .nr { border-color: var(--border-2); color: var(--text-4); }
.blattsatz .kette-fuss { margin: 16px 0 0; font-size: 13.5px; color: var(--text-3); }
.blattsatz .kette-fuss b { color: var(--text); font-weight: 500; }

/* === AUSFUEHRUNGEN (nur Blatt 1) ======================================== */
.blattsatz .ausf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.blattsatz .af {
  border: 0.5px solid var(--border-1); background: var(--bg-elev);
  border-radius: var(--radius-sm); padding: 18px 19px 19px;
}
.blattsatz .af.gewaehlt { border-color: var(--border-3); background: var(--bg-elev-2); }
.blattsatz .af .tech { margin-bottom: 8px; font-size: 11.5px; letter-spacing: 0.18em; }
.blattsatz .af.gewaehlt .tech { color: var(--text-2); }
.blattsatz .af h3 { font-size: 15.5px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.012em; }
.blattsatz .af p { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.55; }

/* === KUNDENBEISPIEL ===================================================== */
.blattsatz .fall {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  border: 0.5px solid var(--border-2); background: var(--bg-elev);
  border-radius: var(--radius-sm); padding: 22px 24px;
  transition: border-color .15s;
}
.blattsatz .fall:hover { border-color: var(--border-3); }
.blattsatz .fall h3 { font-size: 18px; font-weight: 600; margin: 6px 0 7px; letter-spacing: -0.016em; }
.blattsatz .fall p { margin: 0; font-size: 14.5px; color: var(--text-3); max-width: 62ch; }

/* === KLEINE BESCHRIFTUNG ================================================
   Die Marke ueber einer Haelfte der Linie und ueber einer Fallkarte. Sie
   war nirgends definiert und fiel damit in den Fliesstext zurueck. */
.blattsatz .k {
  display: block;
  font-family: var(--font-tech);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 3px;
}
.blattsatz .linie-halb.agent .k { color: rgba(197, 240, 72, 0.72); }

/* === EINSTIEG =========================================================== */
.blattsatz .einstieg {
  display: grid; grid-template-columns: 1fr minmax(280px, 380px);
  gap: 24px; align-items: start;
}
.blattsatz .einstieg-satz {
  border-left: 2px solid var(--border-3); padding: 4px 0 4px 20px;
  font-size: clamp(18px, 2vw, 22px); font-weight: 500;
  letter-spacing: -0.018em; line-height: 1.3; color: var(--text);
}
.blattsatz .einstieg-satz span {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--text-3);
  letter-spacing: 0; line-height: 1.55; margin-top: 10px;
}
.blattsatz .preis { border: 0.5px solid var(--border-2); }
.blattsatz .preis-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 11px 16px; border-bottom: 0.5px solid var(--border-1);
}
.blattsatz .preis-zeile:last-child { border-bottom: 0; }
.blattsatz .preis-zeile .n { font-size: 14px; color: var(--text-2); }
.blattsatz .preis-zeile .b {
  font-family: var(--font-tech); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap;
}
.blattsatz .preis-fuss {
  background: var(--bg-elev); padding: 11px 16px; font-size: 13px; color: var(--text-4);
}

/* === HAEUFIGE FRAGEN ==================================================== */
.blattsatz .faq { border-top: 0.5px solid var(--border-1); max-width: 860px; }
.blattsatz .faq details { border-bottom: 0.5px solid var(--border-1); }
.blattsatz .faq summary {
  cursor: pointer; list-style: none;
  padding: 15px 34px 15px 0; font-size: 15.5px; color: var(--text-1); position: relative;
}
.blattsatz .faq summary::-webkit-details-marker { display: none; }
.blattsatz .faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 13px;
  font-family: var(--font-tech); font-size: 19px; font-weight: 500; color: var(--text-3);
}
.blattsatz .faq details[open] summary::after { content: "\2013"; }
.blattsatz .faq summary:hover { color: var(--text); }
.blattsatz .faq p { margin: 0 0 17px; font-size: 14.5px; color: var(--text-3); max-width: 72ch; }

/* === BLATTFUSS UND SCHRIFTFELD ========================================== */
.blattsatz .blattfuss {
  margin-top: clamp(48px, 6vw, 78px); padding-top: clamp(26px, 3.5vw, 38px);
  border-top: 1px solid var(--border-1);
  display: flex; gap: 36px; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
}
.blattsatz .schluss { max-width: 44ch; flex: 1 1 320px; }
.blattsatz .schluss h2 {
  font-size: clamp(21px, 2.5vw, 29px); font-weight: 600;
  margin: 12px 0 14px; letter-spacing: -0.024em; line-height: 1.18;
}
.blattsatz .schluss p { font-size: 15px; color: var(--text-3); margin: 0 0 20px; }

.blattsatz .schriftfeld { flex: 0 1 540px; border: 1px solid var(--border-2); }
.blattsatz .sf-zeile {
  display: grid; grid-template-columns: 130px 1fr; border-bottom: 0.5px solid var(--border-1);
}
.blattsatz .sf-zeile:last-child { border-bottom: 0; }
.blattsatz .sf-k {
  padding: 10px 14px; border-right: 0.5px solid var(--border-1); background: var(--bg-elev-2);
  font-family: var(--font-tech); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4);
  display: flex; align-items: center;
}
.blattsatz .sf-v {
  padding: 10px 16px; font-size: 13.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 12px;
}
/* Die Freigabezeile ist die eine gruene Flaeche im Blattfuss —
   sie ist der Beleg dafuer, wer unterschreibt (B2). */
.blattsatz .sf-zeile.freigabe { background: var(--accent-soft); }
.blattsatz .sf-zeile.freigabe .sf-k { background: var(--accent); color: var(--bg); }
.blattsatz .sf-unterschrift { flex: 1; border-bottom: 1px solid var(--border-3); height: 20px; }
.blattsatz .sf-hinweis {
  font-family: var(--font-tech); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}

/* === ANGRENZENDE BLAETTER =============================================== */
.blattsatz .nachbarn { margin-top: 34px; border-top: 0.5px solid var(--border-1); padding-top: 22px; }
.blattsatz .nachbarn-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 12px;
}
.blattsatz .nb {
  border: 0.5px solid var(--border-1); background: var(--bg-elev);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: border-color .15s, background .15s;
}
.blattsatz .nb:hover { border-color: var(--border-3); background: var(--bg-elev-2); }
.blattsatz .nb .n {
  font-family: var(--font-tech); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-4);
  display: block; margin-bottom: 5px;
}
.blattsatz .nb .t { font-size: 14.5px; font-weight: 500; color: var(--text-1); display: block; }
.blattsatz .nb .d { font-size: 13px; color: var(--text-4); display: block; margin-top: 3px; }

/* === BEFUND (nur Konformitaet) ========================================== */
.blattsatz .befund {
  margin-top: 20px; border: 0.5px solid var(--warn); border-left: 2px solid var(--warn);
  background: var(--warn-soft); padding: 15px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px; color: var(--text-2); max-width: 80ch;
}
.blattsatz .befund b { color: #D9A21A; font-weight: 500; }

/* === HOCHFORMAT (A) =====================================================
   Unter 900 px wird nicht gestaucht und nicht geschoben, sondern die
   zweite Zeichnung gezeigt: eigene Geometrie, Beschriftung in echter
   Groesse. Auf einem Zeichnungssatz ist genau das der Detailauszug.
   ====================================================================== */
@media (max-width: 900px) {
  .blattsatz .zeichnung .quer { display: none; }
  .blattsatz .zeichnung .hoch { display: block; }

  .blattsatz .linie { grid-template-columns: 1fr; }
  .blattsatz .linie-halb + .linie-halb { border-left: 0; border-top: 1px solid var(--border-2); }
  .blattsatz .fall { grid-template-columns: 1fr; gap: 16px; }
  .blattsatz .einstieg { grid-template-columns: 1fr; }
  .blattsatz .ausf { grid-template-columns: 1fr; }

  .blattsatz .sl-kopf { display: none; }
  .blattsatz .sl-pos { grid-template-columns: 54px 1fr; padding-bottom: 6px; }
  .blattsatz .sl-nr { grid-row: span 4; border-right: 0.5px solid var(--border-1); align-items: flex-start; padding-top: 18px; }
  .blattsatz .sl-pos > *:not(.sl-nr) { border-right: 0; padding: 4px 16px; }
  .blattsatz .sl-ben { padding-top: 15px !important; }
  .blattsatz .sl-blatt { justify-content: flex-start; padding-bottom: 15px !important; }

  /* Die Pruefliste setzt weiter oben eigene Spaltenbreiten. Diese Regel ist
     spezifischer als die Zeile darueber und wuerde die fuenf Mindestbreiten
     (zusammen 652 px) auch im Hochformat stehen lassen. Sie muss hier mit
     gleicher Spezifitaet zurueckgenommen werden. */
  .blattsatz .pruefliste .sl-pos { grid-template-columns: 54px 1fr; }
  .blattsatz .pruefliste .sl-blatt { padding-bottom: 15px !important; }

  .blattsatz .kette { grid-template-columns: 1fr; border-right: 0; }
  .blattsatz .stat { border-left: 0; padding: 0; border-top: 0.5px solid var(--border-1); padding-top: 6px; }
  .blattsatz .stat:first-child { border-top: 0; }
  .blattsatz .stat h3 { min-height: 0; margin-bottom: 11px; }
  .blattsatz .mass { place-items: center start; }
  .blattsatz .mass .strich { left: 0; right: 0; }
  .blattsatz .mass .pf.l { left: 0; }
  .blattsatz .mass .pf.r { right: 0; }

  .blattsatz .kennzahl { gap: 14px; }
  .blattsatz .schriftfeld { flex-basis: 100%; }
  .blattsatz .sf-zeile { grid-template-columns: 112px 1fr; }
  .blattsatz .allgemein-liste { flex-direction: column; gap: 9px; }
  .blattsatz .rahmen { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 560px) {
  .blattsatz .kennzahl { display: block; }
  .blattsatz .kennzahl .wert { display: block; margin-bottom: 8px; }
}

/* === BELEGVERWEIS =======================================================
   Der Satz, der von der Kennzahl auf den Pruefbericht zeigt, in dem sie
   belegt ist. Steht bewusst im Fliesstext und nicht als Schaltflaeche:
   ein Beleg wird gelesen, nicht geklickt wie eine Aktion.
   ====================================================================== */
.blattsatz .intro.beleg-verweis {
  font-size: 15px;
  color: var(--text-4);
  padding-top: 4px;
}
.blattsatz .intro.beleg-verweis a {
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--border-3);
  text-underline-offset: 3px;
}
.blattsatz .intro.beleg-verweis a:hover { color: var(--accent); }

/* === WEITERE BERICHTE (nur Pruefberichte) ===============================
   Vier Verweise auf die uebrigen Berichte des Satzes. Aufbau wie eine
   Positionsliste: Nummer, Benennung, Kurzbeschreibung. Kein Gruen — es
   sind Verweise, keine Belege und keine Hauptaktion.
   ====================================================================== */
.blattsatz .weitere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0;
  border: 0.5px solid var(--border-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.blattsatz .weitere > a {
  display: block;
  padding: 15px 18px 17px;
  border-right: 0.5px solid var(--border-1);
  border-bottom: 0.5px solid var(--border-1);
  background: var(--bg-elev);
  transition: background 0.15s;
}
.blattsatz .weitere > a:hover { background: var(--bg-elev-2); }
.blattsatz .weitere > a strong {
  display: block;
  color: var(--text-1);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.blattsatz .weitere > a span:not(.k) {
  display: block;
  color: var(--text-4);
  font-size: 13.5px;
  line-height: 1.45;
}
.blattsatz .weitere > a:hover strong { color: var(--accent); }

@media (max-width: 900px) {
  .blattsatz .weitere { grid-template-columns: 1fr; }
  .blattsatz .weitere > a { border-right: 0; }
}