. */ /* ============================================================================ SINGLE SOURCE OF TRUTH (consolidated 2026-08-24) ---------------------------------------------------------------------------- This casing copy is the ONLY mobile abus-styles.css — served live AND fed to pandoc/preview by convert.ps1 (its mobile branch points here, like service). The former Programmordner copy (abus\mobile\abus-styles.css) was merged into this file (.abus-ref-note*, `.abus-doc p:has(+ .abus-table)`) and deleted. Remember: changes here reach the PUBLIC server only when the assets folder is re-uploaded (publish.ps1 -EmitAssets + webserver upload). ============================================================================ */ /* ============================================================ Design tokens ============================================================ */ :root { --abus-blue: #005AAA; --abus-amber: #FFB400; --abus-grey-shade: #E6E6E6; --abus-grey-border: #C0C0C0; --abus-text: #000000; --abus-font: Arial, "Helvetica Neue", Helvetica, sans-serif; --abus-fs-scale: 1; /* text-size control (A−/A/A+) multiplies the article type; 1 = normal */ --abus-fs-base: calc(1rem * var(--abus-fs-scale)); /* 16px */ --abus-fs-sm: calc(0.9375rem * var(--abus-fs-scale)); /* 15px — Hinweis, captions, table cells */ --abus-fs-lg: calc(1.125rem * var(--abus-fs-scale)); /* 18px — Ziel, safety body */ --abus-fs-h1: calc(2.5rem * var(--abus-fs-scale)); /* 40px */ --abus-fs-h2: calc(1.5rem * var(--abus-fs-scale)); /* 24px */ --abus-fs-h3: calc(1.25rem * var(--abus-fs-scale)); /* 20px */ --abus-fs-h4: calc(1.125rem * var(--abus-fs-scale)); /* 18px */ --abus-space-xs: 0.25rem; --abus-space-sm: 0.5rem; --abus-space-md: 1rem; --abus-space-lg: 1.5rem; --abus-indent: 2rem; /* replaces Word's 1cm (567 twips) */ --abus-line-height: 1.3; /* tightened from 1.5 like the Servicedoku (A. Kalcher, ABUControl-Feedback); ported 2026-09-14 */ } /* Text-size control (A−/A/A+): scales the ARTICLE type only. is set by theme.js (and the inline script, to avoid a reflow on load). Setting --abus-fs-scale on cascades into the article; the chrome is untouched because ONLY .abus-doc rules consume the --abus-fs-* tokens. */ html[data-textsize="large"] { --abus-fs-scale: 1.15; } html[data-textsize="xlarge"] { --abus-fs-scale: 1.30; } /* ============================================================ Base typography —

============================================================ */ .abus-doc { font-family: var(--abus-font); font-size: var(--abus-fs-base); line-height: var(--abus-line-height); color: var(--abus-text); /* Size container for the @container rules below (2026-09-15): "narrow" means the ARTICLE column, not the viewport — an open 300 px sidebar or a half-screen window make the article phone-narrow long before the 768 px viewport rules fire. The article is a plain block inside the Bootstrap .container, so its width comes from the layout and the containment cannot collapse it. Note: inline-size containment also makes the article the containing block for position:fixed descendants and a stacking context — popups, share window, tooltips and modals are all appended to , so nothing inside depends on that. */ container-type: inline-size; container-name: abus-doc; } /* The image popup (theme.js buildFigureView) clones a figure into

— an inline-block that must size to its content. With size containment it would be 0 px wide and the figure would hang off-centre to the right, so no containment there. */ .abus-doc.mfp-figview__view { container-type: normal; } /* Print: paper cannot scroll. Switch the container off so the narrow-article table rules below (scroll blocks, small type) never apply in print; tables fall back to the desktop auto layout and simply take the width they need. */ @media print { .abus-doc { container-type: normal; } } .abus-doc p { margin: var(--abus-space-sm) 0 0; line-height: var(--abus-line-height); /* 1.3 — directly targets article paragraphs so the theme's generic `p` rule (stylesheet.css) can't override via cascade */ } /* Blank-paragraph spacer: reproduces the vertical gap of the empty paragraphs the docx used between content. Height is set inline (∝ the blank count) by polish.ps1 pass 0c from the convert.ps1 sentinels. */ .abus-vspace { display: block; margin: 0; } .abus-doc a { color: var(--abus-blue); text-decoration: underline; } /* All images keep their docx-recorded width via inline style; max-width:100% shrinks them when the container is narrower (mobile, narrow article). The convert pipeline strips the inline height so height:auto preserves the native aspect ratio when shrinking. */ .abus-doc img { max-width: 100%; height: auto; } .abus-doc a:hover, .abus-doc a:focus { text-decoration: none; } /* ============================================================ Headings Top margin is consistent across heading levels so chapter breaks read uniformly throughout the doc. h1 and h2 (major chapter / section breaks) get double the spacing of h3–h6. --abus-chapter-gap: base gap above h3–h6 --abus-chapter-gap-lg: 2× base gap above h1, h2 ============================================================ */ :root { --abus-chapter-gap: calc(var(--abus-space-lg) * 3); --abus-chapter-gap-lg: calc(var(--abus-space-lg) * 6); } .abus-doc h1 { /* Scale down on narrow phones so a long uppercase word (e.g. "UNTERSCHIEDLICHE") can't grow wider than the viewport and force the whole page to scroll sideways; capped at the full 2.5rem on wide screens. break-word wraps any single word still too long for the line. */ font-size: clamp(1.5rem, 6.5vw, var(--abus-fs-h1)); font-weight: bold; color: var(--abus-blue); text-transform: uppercase; letter-spacing: -0.02em; margin: var(--abus-chapter-gap-lg) 0 var(--abus-space-md); overflow-wrap: break-word; word-break: break-word; } .abus-doc h2 { font-size: var(--abus-fs-h2); font-weight: bold; color: var(--abus-blue); text-transform: uppercase; border-top: 1px solid var(--abus-blue); border-bottom: 1px solid var(--abus-blue); padding: 0.4em 0; margin: var(--abus-chapter-gap-lg) 0 var(--abus-space-md); overflow-wrap: break-word; word-break: break-word; } .abus-doc h3 { font-size: var(--abus-fs-h3); font-weight: bold; color: var(--abus-text); text-transform: uppercase; border-bottom: 1px solid var(--abus-text); padding-bottom: 0.1em; margin: var(--abus-chapter-gap) 0 var(--abus-space-sm); overflow-wrap: break-word; word-break: break-word; } .abus-doc h4 { font-size: var(--abus-fs-h4); font-weight: bold; margin: var(--abus-chapter-gap) 0 var(--abus-space-sm); } .abus-doc h5 { font-size: 1.0625rem; font-weight: bold; font-style: italic; margin: var(--abus-chapter-gap) 0 var(--abus-space-sm); } .abus-doc h6 { font-size: 1rem; font-weight: bold; margin: var(--abus-chapter-gap) 0 var(--abus-space-sm); } /* Heading 3 with outline rule (Überschrift 3 mit Gliederung) — same as h3 except the bottom rule is thicker, to distinguish it visually. */ .abus-doc h3.abus-h--outline { border-bottom-width: 3px; } /* ============================================================ Cover title block (Produkthandbuch / Produkthandbuch Zeile 2 / Zeile 3)

…

— 26pt blue caps

…

— 18pt blue, mixed case

…

— 14pt black

============================================================ */ .abus-cover { margin: var(--abus-space-lg) 0; } .abus-cover__title { /* "PRODUKTHANDBUCH" is one long word; on narrow phones a fixed 3rem overflows the viewport. Scale with the viewport (capped at 3rem on wide screens) and allow a break as a last resort. */ font-size: clamp(1.75rem, 8vw, 3rem); font-weight: bold; color: var(--abus-blue); text-transform: uppercase; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; word-break: break-word; } .abus-cover__line2 { font-size: 2rem; color: var(--abus-blue); margin: var(--abus-space-sm) 0 0; } .abus-cover__line3 { font-size: 1.5rem; color: var(--abus-text); margin: var(--abus-space-sm) 0 0; } /* ============================================================ Subtitle (Unterüberschrift) — used as a free-floating subtitle line below the cover title or a section opener. ============================================================ */ .abus-subtitle { font-size: 1.5rem; font-weight: bold; color: var(--abus-blue); text-transform: uppercase; margin: var(--abus-space-md) 0 var(--abus-space-sm); } /* ============================================================ Goal / objective (Ziel) —

============================================================ */ .abus-goal { font-size: var(--abus-fs-lg); margin: var(--abus-space-md) 0 var(--abus-space-sm); } /* ============================================================ At-a-glance heading (Auf einen Blick) — amber, slightly larger than body. Marks a summary section opener.

…

============================================================ */ .abus-at-a-glance { font-size: var(--abus-fs-lg); color: var(--abus-amber); margin: var(--abus-space-md) 0 var(--abus-space-sm); } /* ============================================================ Vorlesen — Hervorhebung des gesprochenen Satzes (speech.js; Servicedoku 2026-08-18, Mobile 2026-09-14) Zwei Ebenen, damit man den Faden nicht verliert: der aktuelle ABSATZ wird dezent unterlegt, der gerade gesprochene SATZ deutlich. Bewusst KEIN Textfarben-Wechsel: die Handbuchtexte tragen selbst Farbbedeutung (Quellenangabe/Textfarbe), die hier nicht überschrieben werden darf. Die Marker setzt/entfernt speech.js; nach dem Vorlesen ist der Absatz wieder exakt der ursprüngliche HTML-Stand. ============================================================ */ .dq-speak-block { background: rgba(0, 90, 170, 0.06); border-radius: 3px; box-shadow: 0 0 0 3px rgba(0, 90, 170, 0.06); } .dq-speak-hl { background: rgba(255, 180, 0, 0.38); /* --abus-amber, transparent */ border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 180, 0, 0.5); } /* Waehrend des Vorlesens ist ein Klick in den Text ein Sprungbefehl ("hier weiterlesen") — der Zeiger sagt das an. */ body.dq-speak-on .docs-page p, body.dq-speak-on .docs-page li, body.dq-speak-on .docs-page h2, body.dq-speak-on .docs-page h3, body.dq-speak-on .docs-page tr { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .dq-speak-block, .dq-speak-hl { box-shadow: none; } } /* ============================================================ Chapter tiles on the Start page (Mobile PHBs, 2026-09-14, FH) theme.js builds one tile per top-level chapter of the manual (Allgemein, Bedienen, Montieren und anschließen, Prüfen, Instand halten — whichever the product has) and places the grid in "Start" ABOVE "Auf einen Blick":

Allgemein Betrifft jeden, der mit dem Kran … …

Same look as the Servicedoku role tiles (dark blue --abus-tile-bg = the docx tile fill #00467B, white centred text). ============================================================ */ :root { --abus-tile-bg: #00467B; } .abus-doc .abus-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--abus-space-md); margin: var(--abus-space-md) 0; } .abus-doc a.abus-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; text-decoration: none; color: #FFFFFF; background-color: var(--abus-tile-bg); padding: var(--abus-space-lg) var(--abus-space-md); min-height: 8rem; border-radius: 4px; transition: filter 0.15s ease, transform 0.15s ease; } .abus-doc a.abus-tile:hover, .abus-doc a.abus-tile:focus { filter: brightness(1.15); transform: translateY(-1px); text-decoration: none; } .abus-tile__title { font-size: var(--abus-fs-lg); font-weight: bold; margin-bottom: var(--abus-space-xs); } .abus-tile__subtitle { font-size: var(--abus-fs-sm); opacity: 0.85; } /* ============================================================ Indented paragraph (Einrück) —

============================================================ */ .abus-indent { padding-left: var(--abus-indent); } /* ============================================================ Instruction list (Anweisung) —