/*
 * view_manual.css
 *
 * Spezialregeln für view_manual.php.
 *
 * Referenzlayout: HAINBUCH Betriebsanleitung im A5-Format.
 * Ziel:
 * - PDF-nahe A5-Proportion im Viewer
 * - stabile Docuglobe-/Word-Importe
 * - native DocuGlobe-Verzeichnisse im Flow ausblenden
 * - Header/Footer passend für A5
 * - bessere Behandlung von Tabellen, Bildern und Warnhinweisen
 * - schärfere, klarere Schriftwiedergabe im Viewer und Druck
 * - breitere Nutzung des A5-Satzspiegels für Warn-/Hinweistabellen
 *
 * Basislayout liegt in assets/css/ha-viewer.css.
 */

@font-face {
    font-family: "Helvetica Neue LT Pro";
    src:
        url("../fonts/HelveticaNeueLTPro_normal_normal_300.woff2") format("woff2"),
        url("../fonts/HelveticaNeueLTPro_normal_normal_300.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Neue LT Pro";
    src: url("../fonts/HelveticaNeueLTPro_normal_normal_500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --hb-red: #e2001a;

    /* A5 hochkant bei 96 dpi: 148 x 210 mm ≈ 559 x 794 px */
    --hb-pdf-page-width: 559px;
    --hb-pdf-page-height: 794px;

    --hb-pdf-header-height: 35px;
    --hb-pdf-footer-height: 30px;

    /* Breiterer Satzspiegel ausschließlich über kleinere Seitenränder. */
    --hb-pdf-page-padding-top: 49px;
    --hb-pdf-page-padding-right: 13px;
    --hb-pdf-page-padding-bottom: 45px;
    --hb-pdf-page-padding-left: 13px;

    --hb-pdf-grey: #b7b7b7;
    --hb-pdf-light-grey: #dddddd;
    --hb-pdf-text: #080808;
    --hb-pdf-muted: #666666;

    --hb-pdf-font: "Helvetica Neue LT Pro", Arial, Helvetica, "Microsoft YaHei", "SimSun", "Noto Sans CJK SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
}

/* ------------------------------------------------------------
 | Schriftglättung / kristallklare Textdarstellung
 * ------------------------------------------------------------ */

html,
body,
.hb-page,
.hb-page * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
}

.hb-page-body,
.hb-page-body p,
.hb-page-body div,
.hb-page-body span,
.hb-page-body li,
.hb-page-body td,
.hb-page-body th {
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent;
}

/* ------------------------------------------------------------
 | Booting: Viewer erst nach finaler Layoutberechnung zeigen
 * ------------------------------------------------------------ */

.hb-pages,
.hb-qr-float,
html.hb-viewer-booting .hb-pages,
html.hb-viewer-booting .hb-qr-float {
    opacity: 0 !important;
}

html.hb-viewer-ready .hb-pages,
html.hb-viewer-ready .hb-qr-float {
    opacity: 1 !important;
    transition: none !important;
}

/* ------------------------------------------------------------
 | App-/Layout-Korrektur
 * ------------------------------------------------------------ */

.hb-main-column {
    min-width: 0;
}

.hb-pages {
    counter-reset: hb-pdf-page;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

/* ------------------------------------------------------------
 | A5-Seite im Viewer
 * ------------------------------------------------------------ */

.hb-page {
    counter-increment: hb-pdf-page;
    position: relative !important;
    display: block !important;

    width: var(--hb-pdf-page-width) !important;
    max-width: var(--hb-pdf-page-width) !important;
    min-width: var(--hb-pdf-page-width) !important;

    height: var(--hb-pdf-page-height) !important;
    min-height: var(--hb-pdf-page-height) !important;
    max-height: var(--hb-pdf-page-height) !important;

    margin: 0 auto 28px !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: var(--hb-pdf-text) !important;
    font-family: var(--hb-pdf-font) !important;
    font-weight: 300 !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
    overflow: hidden !important;

    transform-origin: top center !important;
}

.hb-page:not(.hb-page--cover) {
    padding: var(--hb-pdf-page-padding-top)
             var(--hb-pdf-page-padding-right)
             var(--hb-pdf-page-padding-bottom)
             var(--hb-pdf-page-padding-left) !important;
}

.hb-page:not(.hb-page--cover)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hb-pdf-header-height);
    background: var(--hb-pdf-grey);
    z-index: 0;
}

/* ------------------------------------------------------------
 | Kopfzeile
 * ------------------------------------------------------------ */

.hb-page-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--hb-pdf-header-height) !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 6px 34px 0 34px !important;
    color: #ffffff !important;
    font-family: var(--hb-pdf-font) !important;
    pointer-events: none !important;
}

.hb-logo-wrap {
    display: block !important;
    min-width: 0 !important;
    max-width: calc(100% - 92px) !important;
}

.hb-page-header .hb-logo,
.hb-header-manual-type {
    display: none !important;
}

.hb-header-product {
    display: block !important;
    max-width: 100% !important;
    font-size: 8.7px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hb-page-meta {
    display: block !important;
    position: absolute !important;
    left: 34px !important;
    top: 18px !important;
    right: 98px !important;
    color: #ffffff !important;
    font-size: 6.6px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.96 !important;
}

.hb-page-meta:empty {
    display: none !important;
}

.hb-page-logo-top-right {
    position: absolute !important;
    top: 7px !important;
    right: 34px !important;
    width: auto !important;
    height: 13px !important;
    max-width: 70px !important;
    object-fit: contain !important;
    z-index: 8 !important;
    display: block !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------
 | Seitenkörper
 * ------------------------------------------------------------ */

.hb-page-body {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: calc(var(--hb-pdf-page-height) - var(--hb-pdf-page-padding-top) - var(--hb-pdf-page-padding-bottom)) !important;
    max-height: calc(var(--hb-pdf-page-height) - var(--hb-pdf-page-padding-top) - var(--hb-pdf-page-padding-bottom)) !important;
    overflow: hidden !important;
    font-size: 8.35px !important;
    line-height: 1.34 !important;
    color: var(--hb-pdf-text) !important;
    font-family: var(--hb-pdf-font) !important;
    font-weight: 300 !important;
    letter-spacing: 0.003em !important;
    hyphens: auto !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.hb-page-body,
.hb-page-body * {
    box-sizing: border-box !important;
    max-width: 100%;
    font-family: var(--hb-pdf-font) !important;
}

/* ------------------------------------------------------------
 | Fußzeile
 * ------------------------------------------------------------ */

.hb-page-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--hb-pdf-footer-height) !important;
    border-top: 1px solid #222222 !important;
    display: grid !important;
    grid-template-columns: 54px 72px 1fr 54px !important;
    align-items: start !important;
    padding-top: 7px !important;
    font-size: 5.6px !important;
    line-height: 1 !important;
    color: #8a8a8a !important;
    background: #ffffff !important;
    font-family: var(--hb-pdf-font) !important;
    font-weight: 500 !important;
    z-index: 3 !important;
}

.hb-page-footer::before {
    content: counter(hb-pdf-page);
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    color: #111111 !important;
    font-size: 6.4px !important;
    line-height: 1 !important;
}

.hb-page-footer::after {
    content: "";
    grid-column: 2 !important;
    width: 42px !important;
    height: 14px !important;
    justify-self: center !important;
    align-self: end !important;
    margin-top: 11px !important;
    background: url('/assets/Logo.png') center / contain no-repeat !important;
}

.hb-footer-left {
    display: none !important;
}

.hb-footer-right {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
    text-align: center !important;
    color: #8a8a8a !important;
}

/* ------------------------------------------------------------
 | Links / Leerartefakte
 * ------------------------------------------------------------ */

.hb-page-body a {
    color: inherit !important;
    text-decoration: none !important;
}

.hb-page-body a:hover {
    text-decoration: underline !important;
}

.hb-page-body p,
.hb-page-body div,
.hb-page-body td,
.hb-page-body th,
.hb-page-body li {
    overflow-wrap: break-word !important;
}

.hb-page-body p {
    min-height: 0 !important;
}

.hb-page-body p:empty,
.hb-page-body div:empty,
.hb-page-body span:empty {
    display: none !important;
}

.hb-page-body .dlModulbegrenzung0,
.hb-page-body .HZwischenraum,
.hb-page-body .HTabellenende,
.hb-page-body .dltext,
.hb-page-body .dlTabellezusammenhalten,
.hb-page-body .hb-empty-control,
.hb-page-body .hb-docuglobe-empty,
.hb-page-body .hb-docuglobe-spacer {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    display: none !important;
}

/* ------------------------------------------------------------
 | Negative Word-/DocuGlobe-Margins neutralisieren
 * ------------------------------------------------------------ */

.hb-page-body [style*="margin-left:-141.75pt"],
.hb-page-body [style*="margin-left: -141.75pt"],
.hb-page-body [style*="margin-left:-141.7pt"],
.hb-page-body [style*="margin-left:-141.8pt"],
.hb-page-body [style*="margin-left:-70.95pt"],
.hb-page-body [style*="margin-left: -70.95pt"],
.hb-page-body [style*="margin-left:-70.9pt"] {
    margin-left: 0 !important;
}

/* ------------------------------------------------------------
 | Überschriften
 * ------------------------------------------------------------ */

.hb-page-body #heading,
.hb-page-body div[id="heading"],
.hb-page-body .hb-heading-wrap {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    inset: auto !important;
    z-index: auto !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
}

.hb-page-body #heading > h1,
.hb-page-body #heading > h2,
.hb-page-body #heading > h3,
.hb-page-body #heading > h4,
.hb-page-body div[id="heading"] > h1,
.hb-page-body div[id="heading"] > h2,
.hb-page-body div[id="heading"] > h3,
.hb-page-body div[id="heading"] > h4,
.hb-page-body .hb-heading-wrap > h1,
.hb-page-body .hb-heading-wrap > h2,
.hb-page-body .hb-heading-wrap > h3,
.hb-page-body .hb-heading-wrap > h4 {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    overflow: visible !important;
    transform: none !important;
    inset: auto !important;
    z-index: auto !important;
}

.hb-page-body #heading::before,
.hb-page-body #heading::after,
.hb-page-body div[id="heading"]::before,
.hb-page-body div[id="heading"]::after,
.hb-page-body .hb-heading-wrap::before,
.hb-page-body .hb-heading-wrap::after {
    content: none !important;
    display: none !important;
}

.hb-page-body .berschrift1,
.hb-page-body h1.berschrift1 {
    font-size: 13.8px !important;
    color: #111111 !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    margin: 0 0 10px !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
}

.hb-page-body .berschrift2,
.hb-page-body h2.berschrift2 {
    font-size: 10.2px !important;
    color: #111111 !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    margin: 0 0 6px !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
}

.hb-page-body .berschrift3,
.hb-page-body h3.berschrift3,
.hb-page-body .berschrift4,
.hb-page-body h4.berschrift4 {
    font-size: 9.2px !important;
    color: #111111 !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    margin: 0 0 5px !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
}

.hb-page-body h1,
.hb-page-body h2,
.hb-page-body h3,
.hb-page-body h4,
.hb-page-body [id^="hb-h-"] {
    scroll-margin-top: 140px;
}

/* ------------------------------------------------------------
 | Text
 * ------------------------------------------------------------ */

.hb-page-body .HText,
.hb-page-body .HTextfett,
.hb-page-body .HTextzentriert,
.hb-page-body .HTextfettzentriert,
.hb-page-body .HTextfettrot {
    font-size: 8.35px !important;
    line-height: 1.34 !important;
    font-weight: 300 !important;
    letter-spacing: 0.003em !important;
    margin-top: 0 !important;
    margin-bottom: 4.8px !important;
}

.hb-page-body .HTextfett,
.hb-page-body .HTextfettzentriert {
    font-weight: 500 !important;
}

.hb-page-body .HTextzentriert,
.hb-page-body .HTextfettzentriert {
    text-align: center !important;
}

.hb-page-body .HTextfettrot {
    color: var(--hb-red) !important;
    font-weight: 700 !important;
}

.hb-page-body .HMarginalie {
    color: #111111 !important;
    font-size: 7.8px !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    margin: 0 !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
}

/* ------------------------------------------------------------
 | Tabellen allgemein
 * ------------------------------------------------------------ */

.hb-page:not(.hb-page--cover) .hb-page-body table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 4px 0 7px !important;
    font-size: 7.9px !important;
    line-height: 1.24 !important;
    font-weight: 300 !important;
}

.hb-page:not(.hb-page--cover) .hb-page-body table table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.hb-page:not(.hb-page--cover) .hb-page-body table th,
.hb-page:not(.hb-page--cover) .hb-page-body table td {
    vertical-align: top !important;
    padding: 3px 4px !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left !important;
}

.hb-page:not(.hb-page--cover) .hb-page-body table p {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

.hb-page:not(.hb-page--cover) .hb-page-body table p:last-child {
    margin-bottom: 0 !important;
}

.hb-page-body .hb-docuglobe-layout-table,
.hb-page-body .hb-figure-table {
    border: none !important;
}

.hb-page-body .hb-docuglobe-layout-table > tbody > tr > td,
.hb-page-body .hb-docuglobe-layout-table > tr > td,
.hb-page-body .hb-figure-table > tbody > tr > td,
.hb-page-body .hb-figure-table > tr > td {
    border: none !important;
    background: transparent !important;
}

/* Fallback: Warn-/Hinweistabellen auch dann sauber stylen,
   wenn die JS-Klassifizierung bei einem Export nicht greift. */
.hb-page-body table:has(.HHinweisfett),
.hb-page-body table:has(.HHinweisListeQuadrat),
.hb-page-body table:has([class*="Hinweis"]),
.hb-page-body table:has([class*="Warnung"]),
.hb-page-body table:has([class*="Gefahr"]),
.hb-page-body table:has([class*="Vorsicht"]) {
    width: 100% !important;
    margin: 5px 0 7px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    background: transparent !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body table:has(.HHinweisfett) td,
.hb-page-body table:has(.HHinweisListeQuadrat) td,
.hb-page-body table:has([class*="Hinweis"]) td,
.hb-page-body table:has([class*="Warnung"]) td,
.hb-page-body table:has([class*="Gefahr"]) td,
.hb-page-body table:has([class*="Vorsicht"]) td {
    border: none !important;
    vertical-align: top !important;
}

.hb-page-body table:has(.HHinweisfett) td:last-child,
.hb-page-body table:has(.HHinweisListeQuadrat) td:last-child,
.hb-page-body table:has([class*="Hinweis"]) td:last-child,
.hb-page-body table:has([class*="Warnung"]) td:last-child,
.hb-page-body table:has([class*="Gefahr"]) td:last-child,
.hb-page-body table:has([class*="Vorsicht"]) td:last-child {
    background: var(--hb-pdf-light-grey) !important;
}

/* ------------------------------------------------------------
 | Hinweis-/Warnboxen
 * ------------------------------------------------------------ */

.hb-page-body .hb-warning-table,
.hb-page-body .hb-note-table {
    width: 100% !important;
    margin: 5px 0 7px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body .hb-warning-table td,
.hb-page-body .hb-warning-table th,
.hb-page-body .hb-note-table td,
.hb-page-body .hb-note-table th {
    border: none !important;
    vertical-align: top !important;
    padding: 4px 5px !important;
}

.hb-page-body .hb-warning-table td:last-child,
.hb-page-body .hb-note-table td:last-child {
    background: var(--hb-pdf-light-grey) !important;
}

.hb-page-body .HHinweisfett {
    font-weight: 700 !important;
    font-size: 7.95px !important;
    line-height: 1.18 !important;
    margin: 0 0 1.5px !important;
}

.hb-page-body .HHinweisListeQuadrat {
    position: relative !important;
    display: block !important;
    margin: 2px 0 0 !important;
    padding-left: 10px !important;
    text-indent: 0 !important;
    line-height: 1.24 !important;
    font-size: 7.85px !important;
}

.hb-page-body .HHinweisListeQuadrat::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 0.18em;
    font-size: 0.58em;
    line-height: 1;
    color: #111827;
}

/* ------------------------------------------------------------
 | Symbolerklärung / Warnhinweistabellen
 * ------------------------------------------------------------ */

/*
 * DocuGlobe baut Warn-/Hinweisblöcke als 3-spaltige Layouttabellen:
 * links Marginalie, mittig Symbol, rechts grauer Textblock.
 *
 * Ziel im Viewer:
 * - Marginalie + Symbol laufen links in den Marginalbereich.
 * - Der graue Warn-/Hinweistext nutzt die volle normale Textbreite.
 * - Die Breite kann zentral über die beiden Variablen angepasst werden.
 */
.hb-page-body .hb-warning-table,
.hb-page-body .hb-note-table,
.hb-page-body table:has(.HHinweisfett),
.hb-page-body table:has(.HHinweisListeQuadrat),
.hb-page-body table:has([class*="Hinweis"]),
.hb-page-body table:has([class*="Warnung"]),
.hb-page-body table:has([class*="Gefahr"]),
.hb-page-body table:has([class*="Vorsicht"]) {
    --hb-warning-marginal-width: 78px;
    --hb-warning-symbol-width: 42px;
    --hb-warning-left-rail: calc(var(--hb-warning-marginal-width) + var(--hb-warning-symbol-width));

    width: calc(100% + var(--hb-warning-left-rail)) !important;
    max-width: none !important;
    margin-left: calc(var(--hb-warning-left-rail) * -1) !important;
    margin-right: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 7px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    border: none !important;
    background: transparent !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body .hb-warning-table colgroup,
.hb-page-body .hb-note-table colgroup,
.hb-page-body table:has(.HHinweisfett) colgroup,
.hb-page-body table:has(.HHinweisListeQuadrat) colgroup,
.hb-page-body table:has([class*="Hinweis"]) colgroup,
.hb-page-body table:has([class*="Warnung"]) colgroup,
.hb-page-body table:has([class*="Gefahr"]) colgroup,
.hb-page-body table:has([class*="Vorsicht"]) colgroup {
    display: none !important;
}

.hb-page-body .hb-warning-table td,
.hb-page-body .hb-warning-table th,
.hb-page-body .hb-note-table td,
.hb-page-body .hb-note-table th,
.hb-page-body table:has(.HHinweisfett) td,
.hb-page-body table:has(.HHinweisListeQuadrat) td,
.hb-page-body table:has([class*="Hinweis"]) td,
.hb-page-body table:has([class*="Warnung"]) td,
.hb-page-body table:has([class*="Gefahr"]) td,
.hb-page-body table:has([class*="Vorsicht"]) td {
    border: none !important;
    vertical-align: top !important;
    text-align: left !important;
}

.hb-page-body .hb-warning-table > tbody > tr > td:first-child,
.hb-page-body .hb-warning-table > tr > td:first-child,
.hb-page-body .hb-note-table > tbody > tr > td:first-child,
.hb-page-body .hb-note-table > tr > td:first-child,
.hb-page-body table:has(.HHinweisfett) > tbody > tr > td:first-child,
.hb-page-body table:has(.HHinweisfett) > tr > td:first-child,
.hb-page-body table:has(.HHinweisListeQuadrat) > tbody > tr > td:first-child,
.hb-page-body table:has(.HHinweisListeQuadrat) > tr > td:first-child,
.hb-page-body table:has([class*="Hinweis"]) > tbody > tr > td:first-child,
.hb-page-body table:has([class*="Hinweis"]) > tr > td:first-child,
.hb-page-body table:has([class*="Warnung"]) > tbody > tr > td:first-child,
.hb-page-body table:has([class*="Warnung"]) > tr > td:first-child,
.hb-page-body table:has([class*="Gefahr"]) > tbody > tr > td:first-child,
.hb-page-body table:has([class*="Gefahr"]) > tr > td:first-child,
.hb-page-body table:has([class*="Vorsicht"]) > tbody > tr > td:first-child,
.hb-page-body table:has([class*="Vorsicht"]) > tr > td:first-child {
    width: var(--hb-warning-marginal-width) !important;
    min-width: var(--hb-warning-marginal-width) !important;
    max-width: var(--hb-warning-marginal-width) !important;
    padding: 4px 5px !important;
    background: transparent !important;
    text-align: left !important;
}

.hb-page-body .hb-warning-table > tbody > tr > td:nth-child(2),
.hb-page-body .hb-warning-table > tr > td:nth-child(2),
.hb-page-body .hb-note-table > tbody > tr > td:nth-child(2),
.hb-page-body .hb-note-table > tr > td:nth-child(2),
.hb-page-body table:has(.HHinweisfett) > tbody > tr > td:nth-child(2),
.hb-page-body table:has(.HHinweisfett) > tr > td:nth-child(2),
.hb-page-body table:has(.HHinweisListeQuadrat) > tbody > tr > td:nth-child(2),
.hb-page-body table:has(.HHinweisListeQuadrat) > tr > td:nth-child(2),
.hb-page-body table:has([class*="Hinweis"]) > tbody > tr > td:nth-child(2),
.hb-page-body table:has([class*="Hinweis"]) > tr > td:nth-child(2),
.hb-page-body table:has([class*="Warnung"]) > tbody > tr > td:nth-child(2),
.hb-page-body table:has([class*="Warnung"]) > tr > td:nth-child(2),
.hb-page-body table:has([class*="Gefahr"]) > tbody > tr > td:nth-child(2),
.hb-page-body table:has([class*="Gefahr"]) > tr > td:nth-child(2),
.hb-page-body table:has([class*="Vorsicht"]) > tbody > tr > td:nth-child(2),
.hb-page-body table:has([class*="Vorsicht"]) > tr > td:nth-child(2) {
    width: var(--hb-warning-symbol-width) !important;
    min-width: var(--hb-warning-symbol-width) !important;
    max-width: var(--hb-warning-symbol-width) !important;
    padding: 4px 4px !important;
    background: transparent !important;
    text-align: center !important;
    vertical-align: top !important;
}

.hb-page-body .hb-warning-table > tbody > tr > td:last-child,
.hb-page-body .hb-warning-table > tr > td:last-child,
.hb-page-body .hb-note-table > tbody > tr > td:last-child,
.hb-page-body .hb-note-table > tr > td:last-child,
.hb-page-body table:has(.HHinweisfett) > tbody > tr > td:last-child,
.hb-page-body table:has(.HHinweisfett) > tr > td:last-child,
.hb-page-body table:has(.HHinweisListeQuadrat) > tbody > tr > td:last-child,
.hb-page-body table:has(.HHinweisListeQuadrat) > tr > td:last-child,
.hb-page-body table:has([class*="Hinweis"]) > tbody > tr > td:last-child,
.hb-page-body table:has([class*="Hinweis"]) > tr > td:last-child,
.hb-page-body table:has([class*="Warnung"]) > tbody > tr > td:last-child,
.hb-page-body table:has([class*="Warnung"]) > tr > td:last-child,
.hb-page-body table:has([class*="Gefahr"]) > tbody > tr > td:last-child,
.hb-page-body table:has([class*="Gefahr"]) > tr > td:last-child,
.hb-page-body table:has([class*="Vorsicht"]) > tbody > tr > td:last-child,
.hb-page-body table:has([class*="Vorsicht"]) > tr > td:last-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 5px !important;
    background: var(--hb-pdf-light-grey) !important;
    text-align: left !important;
}

.hb-page-body .hb-warning-table td:last-child p,
.hb-page-body .hb-warning-table td:last-child span,
.hb-page-body .hb-note-table td:last-child p,
.hb-page-body .hb-note-table td:last-child span,
.hb-page-body table:has(.HHinweisfett) td:last-child p,
.hb-page-body table:has(.HHinweisfett) td:last-child span,
.hb-page-body table:has(.HHinweisListeQuadrat) td:last-child p,
.hb-page-body table:has(.HHinweisListeQuadrat) td:last-child span,
.hb-page-body table:has([class*="Hinweis"]) td:last-child p,
.hb-page-body table:has([class*="Hinweis"]) td:last-child span,
.hb-page-body table:has([class*="Warnung"]) td:last-child p,
.hb-page-body table:has([class*="Warnung"]) td:last-child span,
.hb-page-body table:has([class*="Gefahr"]) td:last-child p,
.hb-page-body table:has([class*="Gefahr"]) td:last-child span,
.hb-page-body table:has([class*="Vorsicht"]) td:last-child p,
.hb-page-body table:has([class*="Vorsicht"]) td:last-child span {
    text-align: left !important;
}

.hb-page-body .hb-warning-table img,
.hb-page-body .hb-note-table img,
.hb-page-body table:has(.HHinweisfett) img,
.hb-page-body table:has(.HHinweisListeQuadrat) img,
.hb-page-body table:has([class*="Hinweis"]) img,
.hb-page-body table:has([class*="Warnung"]) img,
.hb-page-body table:has([class*="Gefahr"]) img,
.hb-page-body table:has([class*="Vorsicht"]) img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 27px !important;
    height: auto !important;
}

.hb-page-body .hb-warning-table .HMarginalie,
.hb-page-body .hb-note-table .HMarginalie,
.hb-page-body table:has(.HHinweisfett) .HMarginalie,
.hb-page-body table:has(.HHinweisListeQuadrat) .HMarginalie,
.hb-page-body table:has([class*="Hinweis"]) .HMarginalie,
.hb-page-body table:has([class*="Warnung"]) .HMarginalie,
.hb-page-body table:has([class*="Gefahr"]) .HMarginalie,
.hb-page-body table:has([class*="Vorsicht"]) .HMarginalie {
    text-align: left !important;
}

/* ------------------------------------------------------------
 | Tabellen: dynamische Breiten + Vorbereitung für Benutzer-Resize
 * ------------------------------------------------------------ */

/*
 * Grundidee:
 * - Alle Tabellen nutzen die verfügbare Satzspiegelbreite.
 * - Spalten dürfen sich zuerst nach Inhalt verteilen.
 * - JS kann später passende Klassen setzen und optional feste Spaltenbreiten über <colgroup> schreiben.
 * - Keine harte Einheitsbreite mehr für jede Spalte.
 */
.hb-page:not(.hb-page--cover) .hb-page-body table,
.hb-page-body .hb-table-dynamic,
.hb-page-body .hb-table-techdata,
.hb-page-body .hb-table-nomenclature {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.hb-page-body .hb-table-dynamic {
    --hb-table-header-height: 44px;
    --hb-table-header-font-size: 5.35px;
    --hb-table-body-font-size: 6.25px;
}

.hb-page-body .hb-table-techdata,
.hb-page-body .hb-table-nomenclature {
    margin: 4px 0 7px !important;
    font-size: var(--hb-table-body-font-size, 6.25px) !important;
    line-height: 1.14 !important;
    font-weight: 300 !important;
}

.hb-page-body .hb-table-dynamic th,
.hb-page-body .hb-table-dynamic td,
.hb-page-body .hb-table-techdata th,
.hb-page-body .hb-table-techdata td,
.hb-page-body .hb-table-nomenclature th,
.hb-page-body .hb-table-nomenclature td {
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 2px 2.5px !important;
    vertical-align: middle !important;
    text-align: left !important;
    overflow: hidden !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* JS kann sehr breite Tabellen nach der Inhaltsmessung auf diese Klasse setzen. */
.hb-page-body .hb-table-fit-tight {
    font-size: 5.8px !important;
    line-height: 1.1 !important;
}

.hb-page-body .hb-table-fit-tight th,
.hb-page-body .hb-table-fit-tight td {
    padding-left: 1.5px !important;
    padding-right: 1.5px !important;
}

/* Gedrehte Tabellenköpfe nur für Tabellen, die JS ausdrücklich so markiert. */
.hb-page-body .hb-table-rotate-head tr:first-child {
    height: var(--hb-table-header-height, 44px) !important;
    min-height: var(--hb-table-header-height, 44px) !important;
}

.hb-page-body .hb-table-rotate-head tr:first-child > th,
.hb-page-body .hb-table-rotate-head tr:first-child > td {
    position: relative !important;
    height: var(--hb-table-header-height, 44px) !important;
    min-height: var(--hb-table-header-height, 44px) !important;
    padding: 0 1px !important;
    background: #d9d9d9 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    text-align: left !important;
    vertical-align: bottom !important;
    overflow: hidden !important;
    font-size: var(--hb-table-header-font-size, 5.35px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
}

.hb-page-body .hb-table-rotate-head tr:first-child .HTabelleKopfzeilelinks,
.hb-page-body .hb-table-rotate-head tr:first-child .HTabelleKopfzeilezentriert,
.hb-page-body .hb-table-rotate-head tr:first-child [class*="Kopfzeile"] {
    position: absolute !important;
    left: 50% !important;
    bottom: 3px !important;
    top: auto !important;
    right: auto !important;

    display: block !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(var(--hb-table-header-height, 44px) - 4px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: rotate(-90deg) !important;
    transform-origin: left bottom !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    font-size: var(--hb-table-header-font-size, 5.35px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.hb-page-body .hb-table-rotate-head tr:first-child .HTabelleKopfzeilelinks *,
.hb-page-body .hb-table-rotate-head tr:first-child .HTabelleKopfzeilezentriert *,
.hb-page-body .hb-table-rotate-head tr:first-child [class*="Kopfzeile"] * {
    position: static !important;
    display: inline !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

/* Tabellen mit normalen Kopfzeilen behalten horizontale Header. */
.hb-page-body .hb-table-head-horizontal tr:first-child > th,
.hb-page-body .hb-table-head-horizontal tr:first-child > td {
    background: #d9d9d9 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
}

.hb-page-body .HTabelleInhaltlinks,
.hb-page-body .HTabelleInhaltzentriert {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 300 !important;
    margin: 0 !important;
}

.hb-page-body .HTabelleKopfzeilelinks,
.hb-page-body .HTabelleKopfzeilezentriert {
    font-weight: 700 !important;
    margin: 0 !important;
}

.hb-page-body .HTabelleInhaltzentriert,
.hb-page-body .HTabelleKopfzeilezentriert {
    text-align: center !important;
}

/* Formeln in Tabellen: klein, aber lesbar und nicht gequetscht. */
.hb-page-body table .hb-formula,
.hb-page-body table .hb-formula-img,
.hb-page-body table img[src*="/Formeln/"],
.hb-page-body table img[src*="/formeln/"] {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 1.05em !important;
    max-height: 1.05em !important;
    margin: 0 1px !important;
    vertical-align: -0.15em !important;
}

/* Benutzer-Resize-Modus: Griffe werden später durch JS erzeugt. */
.hb-table-resizable {
    position: relative !important;
}

.hb-table-resizable th,
.hb-table-resizable td {
    position: relative;
}

.hb-col-resizer {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    z-index: 20;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    background: transparent;
}

.hb-col-resizer::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 2px;
    width: 1px;
    background: rgba(226, 0, 26, 0);
    transition: background 0.12s ease;
}

.hb-table-resizable:hover .hb-col-resizer::after,
.hb-col-resizer:hover::after,
.hb-col-resizer.is-dragging::after {
    background: rgba(226, 0, 26, 0.85);
}

.hb-table-resize-active,
.hb-table-resize-active * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ------------------------------------------------------------
 | Spannkraftdiagramme / Baugrößen-Diagramme
 * ------------------------------------------------------------ */

/*
 * Wird von view_manual.js bei Überschriften wie
 * "3.5.3 Baugröße 52" gesetzt.
 *
 * Ziel:
 * - Diagramm größer darstellen
 * - Text links und Diagramm rechts sauber nebeneinander halten
 * - keine anderen Bilder/Symbole beeinflussen
 */
.hb-page-body .hb-soft-diagram-block table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
}

.hb-page-body .hb-soft-diagram-block table colgroup {
    display: none !important;
}

.hb-page-body .hb-soft-diagram-block table td:first-child {
    width: 58% !important;
    max-width: 58% !important;
    vertical-align: top !important;
}

.hb-page-body .hb-soft-diagram-block table td:last-child {
    width: 42% !important;
    max-width: 42% !important;
    vertical-align: top !important;
    text-align: center !important;
}

.hb-page-body .hb-soft-diagram-block table img {
    display: block !important;
    width: auto !important;
    max-width: 155px !important;
    max-height: 155px !important;
    height: auto !important;
    margin: 0 auto 4px !important;
}

/* ------------------------------------------------------------
 | Bilder / Legenden
 * ------------------------------------------------------------ */

.hb-page-body img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 3px auto 4px !important;
}

.hb-page-body .hb-formula {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    line-height: 1 !important;
    vertical-align: -0.12em !important;
}

.hb-page-body .hb-formula-img {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 1.15em !important;
    height: 1.05em !important;
    margin: 0 1px !important;
    vertical-align: middle !important;
}

.hb-page-body .HGrafik {
    text-align: center !important;
    margin: 3px 0 4px !important;
    line-height: 1.05 !important;
}

.hb-page-body .HGrafik img,
.hb-page-body .hb-figure-group img,
.hb-page-body .hb-figure-table img {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hb-page-body .hb-figure-group,
.hb-page-body .hb-figure-caption-action,
.hb-page-body .hb-keep-figure,
.hb-page-body .hb-keep-table,
.hb-page-body .hb-keep-note,
.hb-page-body .hb-keep-list,
.hb-page-body .hb-keep-block,
.hb-page-body .hb-keep-marginalia,
.hb-page-body .hb-keep-group {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body .hb-keep-heading,
.hb-page-body .hb-keep-forced-heading {
    break-inside: auto !important;
    page-break-inside: auto !important;
}

.hb-page-body .HLegendeBuchstabe,
.hb-page-body .HLegendeZahl,
.hb-page-body .legende,
.hb-page-body .bildunterschrift,
.hb-page-body .caption,
.hb-page-body .hb-caption-like {
    font-size: 7.6px !important;
    line-height: 1.24 !important;
    margin: 2px 0 4px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* ------------------------------------------------------------
 | Listen / Nummerierungen
 * ------------------------------------------------------------ */

.hb-page-body ol,
.hb-page-body ul {
    padding-left: 1.45em !important;
    margin-left: 0 !important;
}

.hb-page-body li + li {
    margin-top: 2px !important;
}

.hb-page-body .HTextListeZahl,
.hb-page-body .HTextListeBuchstabe,
.hb-page-body .HTextListeQuadrat,
.hb-page-body .HTextListeQuadrat2 {
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 3.5px !important;
    font-size: 8.05px !important;
}

.hb-page-body .hb-action-step {
    display: block !important;
    position: relative !important;
    margin: 0 0 3.5px !important;
    padding-left: 17px !important;
    text-indent: 0 !important;
    line-height: 1.3 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body .hb-action-step-number {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    min-width: 14px !important;
    font-weight: 700 !important;
}

.hb-page-body .hb-faux-bullet,
.hb-page-body .hb-square-bullet,
.hb-page-body .HTextListeQuadrat,
.hb-page-body .HTextListeQuadrat2,
.hb-page-body .HHinweisListeQuadrat {
    position: relative !important;
    display: block !important;
    padding-left: 11px !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

.hb-page-body .hb-faux-bullet::before,
.hb-page-body .hb-square-bullet::before,
.hb-page-body .HTextListeQuadrat::before,
.hb-page-body .HTextListeQuadrat2::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 0.18em;
    font-size: 0.58em;
    line-height: 1;
    color: #111827;
}

.hb-page-body .hb-faux-bullet .numbering-span,
.hb-page-body .hb-square-bullet .numbering-span,
.hb-page-body .HTextListeQuadrat .numbering-span,
.hb-page-body .HTextListeQuadrat2 .numbering-span,
.hb-page-body .HHinweisListeQuadrat .numbering-span,
.hb-page-body .hb-faux-bullet img[src$="empty.gif"],
.hb-page-body .hb-square-bullet img[src$="empty.gif"],
.hb-page-body .HTextListeQuadrat img[src$="empty.gif"],
.hb-page-body .HTextListeQuadrat2 img[src$="empty.gif"],
.hb-page-body .HHinweisListeQuadrat img[src$="empty.gif"] {
    display: none !important;
}

/* ------------------------------------------------------------
 | Native DocuGlobe-Verzeichnisse im Viewer ausblenden
 * ------------------------------------------------------------ */

.hb-page-body .HInhaltsverzeichnisberschrift,
.hb-page-body .HTabellenverzeichnisberschrift,
.hb-page-body .HAbbildungsverzeichnisberschrift,
.hb-page-body .HIndexverzeichnisberschrift,
.hb-page-body .hb-index-heading,
.hb-page-body .Verzeichnis1,
.hb-page-body .Verzeichnis2,
.hb-page-body .Verzeichnis3,
.hb-page-body .Verzeichnis9 {
    display: none !important;
}

/* ------------------------------------------------------------
 | Referenzbasierte Seiten-/Gruppensteuerung aus JS
 * ------------------------------------------------------------ */

.hb-page-body .hb-keep-marginalia {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.hb-page-body .hb-keep-marginalia + .hb-keep-block,
.hb-page-body .hb-keep-marginalia + .hb-keep-list,
.hb-page-body .hb-keep-marginalia + .hb-keep-table,
.hb-page-body .hb-keep-marginalia + .hb-keep-figure {
    break-before: avoid-page !important;
    page-break-before: avoid !important;
}

.hb-force-page-start {
    break-before: page !important;
    page-break-before: always !important;
}

.hb-table-split-continuation {
    margin-top: 0 !important;
}

.hb-table-caption-moved {
    margin-top: 2px !important;
}

/* ------------------------------------------------------------
 | Cover
 * ------------------------------------------------------------ */

.hb-page--cover {
    position: relative !important;
    padding: 0 !important;
}

.hb-page--cover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 396px;
    height: 78px;
    background: #b3b3b3;
    z-index: 0;
    pointer-events: none;
}

.hb-page--cover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 474px;
    width: 72px;
    height: 92px;
    background: #b3b3b3;
    z-index: 0;
    pointer-events: none;
}

.hb-cover-shell {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.hb-page--cover .hb-page-body {
    position: absolute !important;
    left: 0 !important;
    top: 24px !important;
    z-index: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 794px !important;
    min-width: 794px !important;
    max-width: 794px !important;
    height: 1123px !important;
    min-height: 1123px !important;
    max-height: 1123px !important;
    transform: scale(0.704) !important;
    transform-origin: top left !important;
}

.hb-page--cover table,
.hb-page--cover tr,
.hb-page--cover td,
.hb-page--cover th,
.hb-page--cover col,
.hb-page--cover colgroup {
    border: 0 none transparent !important;
    outline: 0 none transparent !important;
    box-shadow: none !important;
}

.hb-page--cover table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.hb-page--cover td,
.hb-page--cover th {
    background-clip: padding-box !important;
}

.hb-page--cover .HTitelDaten,
.hb-page--cover .HTitelDaten *,
.hb-page--cover .HSprachkuerzel,
.hb-page--cover .HSprachkuerzel * {
    border: 0 none transparent !important;
    outline: 0 none transparent !important;
    box-shadow: none !important;
}

.hb-page--cover .hb-page-logo-top-right {
    display: none !important;
}

.hb-page--cover .hb-cover-logo {
    display: block !important;
    position: absolute !important;
    top: 21px !important;
    right: 32px !important;
    z-index: 30 !important;
}

.hb-page--cover .hb-cover-logo-img {
    display: block !important;
    height: 24px !important;
    width: auto !important;
    max-width: 122px !important;
    object-fit: contain !important;
}

.hb-page--cover .hb-page-body .HGrafik {
    width: 100% !important;
    text-align: center !important;
    transform: none !important;
}

.hb-page--cover .hb-page-body .HGrafik img {
    display: block !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hb-page--cover .hb-cover-title-row > td,
.hb-page--cover .hb-cover-title-row > th {
    position: relative !important;
    background: transparent !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.hb-page--cover .hb-cover-title-row > td::before,
.hb-page--cover .hb-cover-title-row > th::before,
.hb-page--cover .hb-cover-title-row > td:first-child::after,
.hb-page--cover .hb-cover-title-row > th:first-child::after {
    content: none !important;
    display: none !important;
}

.hb-page--cover .hb-cover-title-row p {
    position: relative !important;
    z-index: 2 !important;
}

.hb-page--cover .hb-cover-shell::before {
    content: "Betriebsanleitung\A[inkl. Montageanleitung]";
    position: absolute;
    left: 90px;
    top: 407px;
    z-index: 35;
    white-space: pre-line;
    color: #ffffff;
    font-family: var(--hb-pdf-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    pointer-events: none;
}

body[data-manual-lang="EN"] .hb-page--cover .hb-cover-shell::before { content: "Operating manual\A[including assembly instructions]"; }
body[data-manual-lang="FR"] .hb-page--cover .hb-cover-shell::before { content: "Notice d’utilisation\A[incl. notice de montage]"; }
body[data-manual-lang="IT"] .hb-page--cover .hb-cover-shell::before { content: "Istruzioni per l’uso\A[incl. istruzioni di montaggio]"; }
body[data-manual-lang="ES"] .hb-page--cover .hb-cover-shell::before { content: "Instrucciones de servicio\A[incl. instrucciones de montaje]"; }
body[data-manual-lang="NL"] .hb-page--cover .hb-cover-shell::before { content: "Gebruiksaanwijzing\A[incl. montagehandleiding]"; }
body[data-manual-lang="PL"] .hb-page--cover .hb-cover-shell::before { content: "Instrukcja obsługi\A[wraz z instrukcją montażu]"; }
body[data-manual-lang="PT"] .hb-page--cover .hb-cover-shell::before { content: "Manual de instruções\A[incl. instruções de montagem]"; }
body[data-manual-lang="RO"] .hb-page--cover .hb-cover-shell::before { content: "Instrucțiuni de utilizare\A[incl. instrucțiuni de montaj]"; }
body[data-manual-lang="RU"] .hb-page--cover .hb-cover-shell::before { content: "Руководство по эксплуатации\A[вкл. руководство по монтажу]"; }
body[data-manual-lang="CS"] .hb-page--cover .hb-cover-shell::before { content: "Návod k obsluze\A[včetně montážního návodu]"; }
body[data-manual-lang="TR"] .hb-page--cover .hb-cover-shell::before { content: "Kullanım kılavuzu\A[montaj kılavuzu dahil]"; }
body[data-manual-lang="HU"] .hb-page--cover .hb-cover-shell::before { content: "Használati útmutató\A[szerelési útmutatóval]"; }
body[data-manual-lang="JA"] .hb-page--cover .hb-cover-shell::before { content: "取扱説明書\A[取付説明書を含む]"; }
body[data-manual-lang="KO"] .hb-page--cover .hb-cover-shell::before { content: "사용 설명서\A[조립 설명서 포함]"; }
body[data-manual-lang="ZH"] .hb-page--cover .hb-cover-shell::before { content: "操作说明书\A[含安装说明]"; }

.hb-page--cover .hb-cover-footer-block {
    margin-left: 92px !important;
    margin-top: 44px !important;
}

.hb-page--cover .HOriginalbetriebsanleitung {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 38px !important;
    margin-bottom: 8px !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
}

.hb-page--cover .HOriginalbetriebsanleitung + .dlModulbegrenzung0,
.hb-page--cover .HOriginalbetriebsanleitung + .dlModulbegrenzung0 + .HText {
    margin-top: 0 !important;
}

.hb-page--cover .hb-cover-footer-block .HText,
.hb-page--cover .hb-cover-footer-block .HTextfett,
.hb-page--cover .hb-cover-footer-block .HTextzentriert,
.hb-page--cover .hb-cover-footer-block .HTextfettzentriert {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.38 !important;
    font-weight: 300 !important;
}

.hb-page--cover .HBetriebsanleitung,
.hb-page--cover .HBetriebsanleitungZusatz {
    display: none !important;
}

.hb-page--cover .HTitelDaten {
    display: block !important;
    width: max-content !important;
    max-width: 455px !important;
    color: #000000 !important;
    background: #ffffff !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    transform: translateX(-16px) !important;
}

.hb-page--cover .HSprachkuerzel {
    display: none !important;
}

.hb-page--cover .hb-cover-shell::after {
    content: "";
    position: absolute;
    top: 548px;
    right: 72px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 42px;
    border: 2px solid #c9c9c9;
    border-radius: 999px;
    color: #b3b3b3;
    background: #ffffff;
    font-family: var(--hb-pdf-font);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

body[data-manual-lang="DE"] .hb-page--cover .hb-cover-shell::after { content: "DE"; }
body[data-manual-lang="EN"] .hb-page--cover .hb-cover-shell::after { content: "EN"; }
body[data-manual-lang="FR"] .hb-page--cover .hb-cover-shell::after { content: "FR"; }
body[data-manual-lang="IT"] .hb-page--cover .hb-cover-shell::after { content: "IT"; }
body[data-manual-lang="ES"] .hb-page--cover .hb-cover-shell::after { content: "ES"; }
body[data-manual-lang="ZH"] .hb-page--cover .hb-cover-shell::after { content: "ZH"; }
body[data-manual-lang="JA"] .hb-page--cover .hb-cover-shell::after { content: "JA"; }
body[data-manual-lang="KO"] .hb-page--cover .hb-cover-shell::after { content: "KO"; }
body[data-manual-lang="NL"] .hb-page--cover .hb-cover-shell::after { content: "NL"; }
body[data-manual-lang="PL"] .hb-page--cover .hb-cover-shell::after { content: "PL"; }
body[data-manual-lang="PT"] .hb-page--cover .hb-cover-shell::after { content: "PT"; }
body[data-manual-lang="RO"] .hb-page--cover .hb-cover-shell::after { content: "RO"; }
body[data-manual-lang="RU"] .hb-page--cover .hb-cover-shell::after { content: "RU"; }
body[data-manual-lang="CS"] .hb-page--cover .hb-cover-shell::after { content: "CS"; }
body[data-manual-lang="TR"] .hb-page--cover .hb-cover-shell::after { content: "TR"; }
body[data-manual-lang="HU"] .hb-page--cover .hb-cover-shell::after { content: "HU"; }

/* Deckblatt-Dokumentstand: sitzt im optischen Fußbereich der Titelseite.
   Der Footer hat zusätzlich die Klasse .hb-page-footer, deshalb werden Grid,
   Seitenzahl und Logo hier bewusst vollständig neutralisiert. */
.hb-page--cover .hb-cover-document-footer {
    position: absolute !important;
    left: 90px !important;
    right: 42px !important;
    bottom: 10px !important;
    z-index: 65 !important;

    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;

    font-family: var(--hb-pdf-font) !important;
    font-size: 5.7px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: #606060 !important;
    text-align: left !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hb-page--cover .hb-cover-document-footer::before,
.hb-page--cover .hb-cover-document-footer::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.hb-page--cover .hb-cover-document-footer p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hb-page--cover .hb-cover-document-footer span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    white-space: nowrap !important;
}

.hb-page--cover .hb-cover-document-footer br {
    display: none !important;
}

/* ------------------------------------------------------------
 | Suche
 * ------------------------------------------------------------ */

.hb-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hb-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.hb-search-input {
    flex: 1;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid var(--hb-border, #e5e7eb);
    padding: 6px 26px 6px 12px;
    font-size: 13px;
    outline: none;
    font-family: var(--hb-pdf-font);
}

.hb-search-input:focus {
    border-color: var(--hb-red);
    box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.4);
}

.hb-search-clear {
    position: absolute;
    right: 8px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--hb-muted, #6b7280);
    display: none;
    font-family: var(--hb-pdf-font);
}

.hb-search-clear:hover {
    color: var(--hb-red);
}

.hb-search-status {
    font-size: 12px;
    color: var(--hb-muted, #6b7280);
    white-space: nowrap;
}

.hb-search-results {
    margin-bottom: 10px;
    font-size: 12px;
    max-height: 200px;
    overflow: auto;
}

.hb-search-result {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 8px;
    margin-bottom: 2px;
    cursor: pointer;
    font: inherit;
}

.hb-search-result:hover {
    background: #f3f4f6;
}

.hb-search-result-page {
    font-weight: 600;
    margin-right: 6px;
}

.hb-search-result-text {
    color: #6b7280;
}

.hb-search-hit-line {
    background: #fef3f2;
    outline: 2px solid rgba(226, 0, 26, 0.6);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
 | Inhaltsverzeichnis: sauber linksbündig + aktive Seite
 * ------------------------------------------------------------ */

.hb-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hb-toc-item {
    margin: 0 !important;
    padding: 0 !important;
}

.hb-toc-link {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 4px 8px 4px 14px !important;
    border-radius: 8px !important;
    color: #111827 !important;
    text-align: left !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.hb-toc-link:hover {
    background: rgba(226, 0, 26, 0.07) !important;
    color: var(--hb-red) !important;
}

.hb-toc-number {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    color: #6b7280 !important;
}

.hb-toc-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.hb-toc-link.level-1 {
    margin-top: 10px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.hb-toc-link.level-1 .hb-toc-number,
.hb-toc-link.level-1 .hb-toc-title {
    color: #000000 !important;
}

.hb-toc-link.level-2 {
    padding-left: 22px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.hb-toc-link.level-3 {
    padding-left: 38px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}

.hb-toc-link.is-active,
.hb-toc-link.is-current-page {
    background: rgba(226, 0, 26, 0.1) !important;
    color: var(--hb-red) !important;
}

.hb-toc-link.is-active::before,
.hb-toc-link.is-current-page::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    background: url('/assets/favicon.ico') center / contain no-repeat !important;
    transform: translateY(-50%) !important;
}

.hb-toc-current-page-marker {
    display: none !important;
}

/* ------------------------------------------------------------
 | Pfeil nach oben
 * ------------------------------------------------------------ */

.hb-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1300;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.50), transparent 30%),
        linear-gradient(145deg, #ff1f38 0%, #e2001a 45%, #7f0010 100%);
    box-shadow:
        0 16px 34px rgba(226, 0, 26, .34),
        0 8px 16px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -8px 14px rgba(0,0,0,.18);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.94);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hb-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.hb-back-to-top:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 20px 44px rgba(226, 0, 26, .44),
        0 10px 20px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.48);
}

.hb-back-to-top span {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #e2001a;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(255, 255, 255, 0.24),
        inset 0 0 0 2px #e2001a;
    transition: transform 0.18s ease;
}

.hb-back-to-top:hover span {
    transform: scale(1.07) translateY(-1px);
}


/* ------------------------------------------------------------
 | QR-Box
 * ------------------------------------------------------------ */

.hb-qr-float {
    position: fixed !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    padding: 6px 6px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    color: #111827 !important;
    font-family: var(--hb-pdf-font) !important;
    text-align: center !important;
    overflow: hidden !important;
}

.hb-qr-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
}

.hb-qr-code {
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.hb-qr-code canvas,
.hb-qr-code img,
.hb-qr-code svg {
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
}

.hb-qr-caption {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1.08 !important;
    font-weight: 300 !important;
    color: #4b5563 !important;
}

.hb-qr-float::before,
.hb-qr-float::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 1180px) {
    .hb-qr-float {
        display: none !important;
    }
}


/* ------------------------------------------------------------
 | Zoom-HUD
 * ------------------------------------------------------------ */

.hb-pages {
    --hb-viewer-zoom: 1;
}

@media screen and (min-width: 761px) {
    .hb-pages > .hb-page {
        transform: scale(var(--hb-viewer-zoom)) !important;
        transform-origin: top center !important;
        margin-bottom: calc(28px * var(--hb-viewer-zoom)) !important;
    }
}

.hb-zoom-hud {
    position: fixed;
    right: 88px;
    bottom: 24px;
    z-index: 1300;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.hb-zoom-orb {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.50), transparent 30%),
        linear-gradient(145deg, #ff1f38 0%, #e2001a 45%, #7f0010 100%);
    box-shadow:
        0 16px 34px rgba(226, 0, 26, .34),
        0 8px 16px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -8px 14px rgba(0,0,0,.18);
    display: grid;
    place-items: center;
    transition: transform .18s ease, box-shadow .18s ease;
}

.hb-zoom-orb:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 20px 44px rgba(226, 0, 26, .44),
        0 10px 20px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.48);
}

.hb-zoom-orb-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background:
        #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2001a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l5 5'/%3E%3Cpath d='M10.5 8v5'/%3E%3Cpath d='M8 10.5h5'/%3E%3C/svg%3E")
        center / 18px 18px no-repeat;
    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(255, 255, 255, 0.24),
        inset 0 0 0 2px #e2001a;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hb-zoom-orb:hover .hb-zoom-orb-icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow:
        0 10px 20px rgba(226, 0, 26, 0.28),
        0 0 0 3px rgba(255, 255, 255, 0.28),
        inset 0 0 0 2px #e2001a;
}

.hb-zoom-orb-value {
    display: none !important;
}

.hb-zoom-panel {
    width: 292px;
    order: -1;
    transform-origin: right bottom;
    display: grid;
    grid-template-columns: 42px 1fr 42px 58px;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(17,24,39,.92), rgba(31,41,55,.88)),
        linear-gradient(145deg, rgba(226,0,26,.28), transparent);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 22px 50px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transition: opacity .18s ease, transform .18s ease;
}

.hb-zoom-hud.is-open .hb-zoom-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.hb-zoom-action,
.hb-zoom-reset {
    height: 42px;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 900;
    background: rgba(255,255,255,.96);
    color: #111827;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 8px 18px rgba(0,0,0,.18);
}

.hb-zoom-action {
    font-size: 24px;
    line-height: 1;
}

.hb-zoom-reset {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hb-zoom-action:hover,
.hb-zoom-reset:hover {
    background: #e2001a;
    color: #ffffff;
}

.hb-zoom-range {
    width: 100%;
    accent-color: #e2001a;
}

.hb-zoom-hud.is-zoomed .hb-zoom-orb {
    animation: hbZoomPulse 2.2s ease-in-out infinite;
}

@keyframes hbZoomPulse {
    0%, 100% {
        box-shadow:
            0 16px 34px rgba(226, 0, 26, .34),
            0 8px 16px rgba(0,0,0,.24),
            inset 0 1px 0 rgba(255,255,255,.42);
    }
    50% {
        box-shadow:
            0 22px 50px rgba(226, 0, 26, .54),
            0 10px 22px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.50);
    }
}


/* ------------------------------------------------------------
 | Druck – Viewer-Seiten auf A4 vollflächig ausgeben
 * ------------------------------------------------------------ */

@page {
    size: A4 portrait;
    margin: 0;
}

@media print {

    html,
    body {
        width: 210mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .hb-app-header,
    .hb-viewer-toolbar,
    .hb-search-results,
    .hb-search-status,
    .hb-sidebar,
    .hb-toc-panel,
    .hb-qr-float,
    .hb-zoom-hud,
    .hb-back-to-top {
        display: none !important;
    }

    .hb-app-shell,
    .hb-layout,
    .hb-main-column,
    .hb-pages {
        display: block !important;
        width: 210mm !important;
        min-width: 210mm !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    .hb-pages {
        counter-reset: hb-pdf-page !important;
        gap: 0 !important;
    }

    .hb-pages > .hb-page,
    .hb-page {
        display: block !important;
        position: relative !important;

        width: 559px !important;
        min-width: 559px !important;
        max-width: 559px !important;

        height: 794px !important;
        min-height: 794px !important;
        max-height: 794px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        color: var(--hb-pdf-text) !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: hidden !important;

        /*
         * 559px x 1.42 ≈ 794px.
         * Dadurch wird die A5-Viewer-Seite ungefähr auf A4-Höhe/-Breite vergrößert.
         */
        transform: scale(1.42) !important;
        transform-origin: top left !important;

        page-break-after: always !important;
        break-after: page !important;

        box-sizing: border-box !important;
    }

    .hb-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /*
     * Jede skalierte A5-Seite braucht im A4-Druck ihren eigenen A4-Platz.
     * Ohne diesen Wrapper-Effekt würden die Folgeseiten zu früh beginnen.
     */
    .hb-page {
        margin-bottom: calc(1127px - 794px) !important;
    }

    .hb-page:not(.hb-page--cover) {
        padding:
            var(--hb-pdf-page-padding-top)
            var(--hb-pdf-page-padding-right)
            var(--hb-pdf-page-padding-bottom)
            var(--hb-pdf-page-padding-left) !important;
    }

    .hb-page-body {
        overflow: hidden !important;
    }

    .hb-page--cover {
        padding: 0 !important;
    }

    .hb-page--cover .hb-page-body {
        top: 24px !important;
        left: 0 !important;
        width: 794px !important;
        min-width: 794px !important;
        max-width: 794px !important;
        height: 1123px !important;
        min-height: 1123px !important;
        max-height: 1123px !important;
        transform: scale(0.704) !important;
        transform-origin: top left !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    /*
     * Nur Druckausgabe
         */
    .hb-page--cover .HTitelDaten {
        transform: translateX(115px) !important;
        max-width: 455px !important;
    }
    
        .hb-page--cover .HOriginalbetriebsanleitung {
        transform: translateX(115px) !important;
        max-width: 455px !important;
        
            
        }
    
    .hb-page *,
    .hb-page *::before,
    .hb-page *::after {
        box-shadow: none !important;
    }

    img,
    svg,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    table {
        max-width: 100% !important;
    }
}

/* ------------------------------------------------------------
 | Mobile Viewer – sauber skaliert
 * ------------------------------------------------------------ */

@media screen and (max-width: 760px) {
    html,
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .hb-app-shell,
    .hb-layout,
    .hb-main-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .hb-pages {
        --hb-mobile-scale: calc((100vw - 32px) / 559);

        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        align-items: flex-start !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .hb-pages > .hb-page {
        width: 559px !important;
        min-width: 559px !important;
        max-width: 559px !important;

        height: 794px !important;
        min-height: 794px !important;
        max-height: 794px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: calc((794px * var(--hb-mobile-scale)) - 794px + 18px) !important;

        transform: scale(var(--hb-mobile-scale)) !important;
        transform-origin: top left !important;

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18) !important;
    }

    .hb-viewer-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .hb-search-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hb-search-input {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 38px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .hb-search-status {
        width: 100% !important;
        white-space: normal !important;
    }

    .hb-search-results {
        max-height: 42vh !important;
    }

    .hb-qr-float {
        display: none !important;
    }

    .hb-back-to-top {
        right: 12px !important;
        bottom: 14px !important;
        width: 46px !important;
        height: 46px !important;
    }

    .hb-back-to-top span {
        width: 26px !important;
        height: 26px !important;
        font-size: 18px !important;
    }

    .hb-zoom-hud {
        right: 64px !important;
        bottom: 14px !important;
    }

    .hb-zoom-orb {
        width: 46px !important;
        height: 46px !important;
    }

    .hb-zoom-orb-icon {
        width: 26px !important;
        height: 26px !important;
        background-size: 16px 16px !important;
    }

    .hb-zoom-panel {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 76px !important;
        width: auto !important;
        max-width: none !important;
        grid-template-columns: 38px minmax(0, 1fr) 38px 54px !important;
        border-radius: 20px !important;
    }
}

@media screen and (max-width: 420px) {
    .hb-pages {
        --hb-mobile-scale: calc((100vw - 20px) / 559);
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hb-pages > .hb-page {
        margin-bottom: calc((794px * var(--hb-mobile-scale)) - 794px + 14px) !important;
    }
}

@media screen and (max-width: 360px) {
    .hb-pages {
        --hb-mobile-scale: calc((100vw - 12px) / 559);
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .hb-pages > .hb-page {
        margin-bottom: calc((794px * var(--hb-mobile-scale)) - 794px + 12px) !important;
    }
}