/* ===================================================================== Web casing — based on iDocs, One Page Documentation HTML Template, with modifications for ABUS HELP. https://harnishdesign.net/ Modifications: Copyright (c) 2026 ABUS Kransysteme GmbH Original template (MIT License): Copyright (c) 2020 Harnish Design Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ===================================================================== */ /* ABUS: header-button tooltips (Bootstrap, appended to ) sit at the right edge of the window; when one opens on hover it can push a phantom HORIZONTAL scrollbar. `overflow-x: clip` on the root drops that overflow WITHOUT creating a scroll container, so the sticky header + fixed sidebar keep working (which `overflow-x: hidden` would break). Vertical scrolling is untouched. (Servicedoku fix, ported 2026-09-14.) */ html { overflow-x: clip; } /*=========================================================== Template Name: iDocs - One Page Documentation HTML Template Author: Harnish Design Template URL: http://demo.harnishdesign.net/html/idocs Author URL: https://themeforest.net/user/harnishdesign File Description : Main css file of the template ================================================= Table of Contents ================================================= 1. Basic 2. Helpers Classes 3. Layouts 3.1 Side Navigation 3.2 Docs Content 3.3 Section Divider 4. Header 4.1 Main Navigation 5 Elements 5.1 List Style 5.2 Changelog 5.3 Accordion & Toggle 5.4 Nav 5.5 Tabs 5.6 Popup Img 5.7 Featured Box 6 Footer 6.1 Social Icons 6.2 Back to Top 7 Extra =======================================================*/ /* =================================== */ /* 1. Basic Style /* =================================== */ body, html { height: 100%; } body { background: #dddddd; color: #4c4d4d; } /*-------- Preloader --------*/ .preloader { position: fixed; width: 100%; height: 100%; z-index: 999999999 !important; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0; } .preloader .lds-ellipsis { display: inline-block; position: absolute; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; top: 50%; left: 50%; } .preloader .lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #000; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .preloader .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .preloader .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .preloader .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .preloader .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } /*--- Preloader Magnific Popup ----*/ .mfp-container .preloader { background: transparent; } .mfp-container .preloader .lds-ellipsis div { background: #fff; } /* Zoomed popup image is pannable by dragging (class set by theme.js while zoom > 1). touch-action: none keeps touch drags from scrolling the page. */ .mfp-img.mfp-pannable { cursor: grab; touch-action: none; } .mfp-img.mfp-pannable:active { cursor: grabbing; } /*--- Image popup toolbar (rotate / zoom) ----*/ .mfp-img-toolbar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.55); border-radius: 6px; z-index: 1046; } /* Magnific Popup's default .mfp-figure:after paints a #444 panel + shadow behind the image. When the image is rotated or zoomed out the panel keeps the image's original dimensions and shows as a visible grey rectangle — hide it so only the image itself is rendered against the backdrop. */ .mfp-figure:after { display: none !important; } /* Close button: pin to the top-right of the viewport (we set closeBtnInside: false in JS so the X is appended to .mfp-wrap rather than the image content) and style it to match the bottom toolbar pill — same background, radius and button height. */ .mfp-wrap .mfp-close { position: fixed; top: 16px; right: 16px; width: 50px; height: 50px; padding: 0; line-height: 50px; text-align: center; font-size: 28px; color: #fff; opacity: 1; background: rgba(0, 0, 0, 0.55); border-radius: 6px; transition: background-color 0.15s ease; } .mfp-wrap .mfp-close:hover, .mfp-wrap .mfp-close:focus { background: rgba(0, 0, 0, 0.75); opacity: 1; } /* Magnific Popup adds .mfp-zoom-out-cur to while a popup is open and paints a zoom-out cursor on the close button and the backdrop to signal "click anywhere to dismiss". closeOnContentClick is now off, so that cursor is misleading — use a normal pointer/default everywhere inside the popup. */ .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close, .mfp-container, .mfp-container img.mfp-img, .mfp-figure { cursor: default; } .mfp-wrap .mfp-close, .mfp-img-toolbar .mfp-tool-btn { cursor: pointer; } .mfp-img-toolbar .mfp-tool-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 4px; transition: background-color 0.15s ease; } .mfp-img-toolbar .mfp-tool-btn:hover, .mfp-img-toolbar .mfp-tool-btn:focus { background: rgba(255, 255, 255, 0.18); outline: none; } .mfp-img-toolbar .mfp-tool-btn:active { background: rgba(255, 255, 255, 0.28); } .mfp-container img.mfp-img { transition: transform 0.2s ease; transform-origin: center center; } /*--- Image popup: figure view (2026-09-15) ---- theme.js opens content images as INLINE content: a clone of the clicked
(top labels, column-split captions, side numbers) so the labels stay visible and keep their position relative to the picture. The fitted pixel width is set inline on .mfp-figview__fig by theme.js (fitFigureView); the image and every label row follow at 100%, so the converter's percentage caption grids resolve against the same width as in the page. The wrapper carries .abus-doc so abus-styles.css' caption rules apply. Zoom/pan/rotate transform the whole figure. The white frame keeps dark label text readable on the dark backdrop (same for light and dark theme). */ .mfp-wrap.mfp-figview .mfp-content { text-align: center; } .mfp-figview__view { display: inline-block; vertical-align: middle; text-align: left; max-width: 100%; } .mfp-figview__view .mfp-figview__fig { display: block; box-sizing: content-box; margin: 0; border: 1px solid #c0c0c0; padding: 10px; background: #fff; color: #000; width: auto; max-width: none; transition: transform 0.2s ease; transform-origin: center center; } .mfp-figview__view .mfp-figview__fig--bare { border: 0; padding: 0; background: transparent; } .mfp-figview__view .mfp-figview__fig > img, .mfp-figview__view .mfp-figview__fig .abus-figure__mid > img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; background: #fff; /* transparent line-art stays readable */ } .mfp-figview__view .mfp-figview__fig .abus-figure__top, .mfp-figview__view .mfp-figview__fig .abus-figure__cap-split, .mfp-figview__view .mfp-figview__fig > figcaption { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } .mfp-figview__view .mfp-figview__fig.mfp-pannable { cursor: grab; touch-action: none; } .mfp-figview__view .mfp-figview__fig.mfp-pannable:active { cursor: grabbing; } ::selection { background: #005aaa; color: #fff; text-shadow: none; } code { padding: 2px 5px; background-color: #f9f2f4; border-radius: 4px; } form { padding: 0; margin: 0; display: inline; } img { vertical-align: inherit; } a, a:focus { color: #005aaa; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } a:hover, a:active { color: #00467b; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } a:focus, a:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, button:focus, button:active { outline: none; } p { line-height: 1.8; } blockquote { border-left: 5px solid #eee; padding: 10px 20px; } iframe { border: 0 !important; } h1, h2, h3, h4, h5, h6 { color: #252b33; line-height: 1.5; margin: 0 0 1.5rem 0; font-family: Roboto, sans-serif; } h1 { font-size: 3rem; } h2 { font-size: 2.2rem; } dl, ol, ul, pre, blockquote, .table { margin-bottom: 1.8rem; } /*=== Highlight Js ===*/ .hljs { padding: 1.5rem; } /* =================================== */ /* 2. Helpers Classes /* =================================== */ /* Box Shadow */ .shadow-md { -webkit-box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4) !important; box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4) !important; } /* Border Radius */ .rounded-lg { border-radius: 0.6rem !important; } .rounded-top-0 { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } .rounded-bottom-0 { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } .rounded-left-0 { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } .rounded-right-0 { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } /* Border Size */ .border-1 { border-width: 1px !important; } .border-2 { border-width: 2px !important; } .border-3 { border-width: 3px !important; } .border-4 { border-width: 4px !important; } .border-5 { border-width: 5px !important; } /* Text Size */ .text-0 { font-size: 11px !important; font-size: 0.6875rem !important; } .text-1 { font-size: 12px !important; font-size: 0.75rem !important; } .text-2 { font-size: 14px !important; font-size: 0.875rem !important; } .text-3 { font-size: 16px !important; font-size: 1rem !important; } .text-4 { font-size: 18px !important; font-size: 1.125rem !important; } .text-5 { font-size: 21px !important; font-size: 1.3125rem !important; } .text-6 { font-size: 24px !important; font-size: 1.50rem !important; } .text-7 { font-size: 28px !important; font-size: 1.75rem !important; } .text-8 { font-size: 32px !important; font-size: 2rem !important; } .text-9 { font-size: 36px !important; font-size: 2.25rem !important; } .text-10 { font-size: 40px !important; font-size: 2.50rem !important; } .text-11 { font-size: 2.75rem !important; } @media (max-width: 992px) { .text-11 { font-size: calc(1.4rem + 2.1774193548vw) !important; } } .text-12 { font-size: 3rem !important; } @media (max-width: 992px) { .text-12 { font-size: calc(1.425rem + 2.5403225806vw) !important; } } .text-13 { font-size: 3.25rem !important; } @media (max-width: 992px) { .text-13 { font-size: calc(1.45rem + 2.9032258065vw) !important; } } .text-14 { font-size: 3.5rem !important; } @media (max-width: 992px) { .text-14 { font-size: calc(1.475rem + 3.2661290323vw) !important; } } .text-15 { font-size: 3.75rem !important; } @media (max-width: 992px) { .text-15 { font-size: calc(1.5rem + 3.6290322581vw) !important; } } .text-16 { font-size: 4rem !important; } @media (max-width: 992px) { .text-16 { font-size: calc(1.525rem + 3.9919354839vw) !important; } } .text-17 { font-size: 4.5rem !important; } @media (max-width: 992px) { .text-17 { font-size: calc(1.575rem + 4.7177419355vw) !important; } } .text-18 { font-size: 5rem !important; } @media (max-width: 992px) { .text-18 { font-size: calc(1.625rem + 5.4435483871vw) !important; } } .text-19 { font-size: 5.25rem !important; } @media (max-width: 992px) { .text-19 { font-size: calc(1.65rem + 5.8064516129vw) !important; } } .text-20 { font-size: 5.75rem !important; } @media (max-width: 992px) { .text-20 { font-size: calc(1.7rem + 6.5322580645vw) !important; } } .text-21 { font-size: 6.5rem !important; } @media (max-width: 992px) { .text-21 { font-size: calc(1.775rem + 7.6209677419vw) !important; } } .text-22 { font-size: 7rem !important; } @media (max-width: 992px) { .text-22 { font-size: calc(1.825rem + 8.3467741935vw) !important; } } .text-23 { font-size: 7.75rem !important; } @media (max-width: 992px) { .text-23 { font-size: calc(1.9rem + 9.435483871vw) !important; } } .text-24 { font-size: 8.25rem !important; } @media (max-width: 992px) { .text-24 { font-size: calc(1.95rem + 10.1612903226vw) !important; } } .text-25 { font-size: 9rem !important; } @media (max-width: 992px) { .text-25 { font-size: calc(2.025rem + 11.25vw) !important; } } .text-11, .text-12, .text-13, .text-14, .text-15, .text-16, .text-17, .text-18, .text-19, .text-20, .text-21, .text-22, .text-23, .text-24, .text-25 { line-height: 1.3; } /* Line height */ .line-height-07 { line-height: 0.7 !important; } .line-height-1 { line-height: 1 !important; } .line-height-2 { line-height: 1.2 !important; } .line-height-3 { line-height: 1.4 !important; } .line-height-4 { line-height: 1.6 !important; } .line-height-5 { line-height: 1.8 !important; } /* Font Weight */ .font-weight-100 { font-weight: 100 !important; } .font-weight-200 { font-weight: 200 !important; } .font-weight-300 { font-weight: 300 !important; } .font-weight-400 { font-weight: 400 !important; } .font-weight-500 { font-weight: 500 !important; } .font-weight-600 { font-weight: 600 !important; } .font-weight-700 { font-weight: 700 !important; } .font-weight-800 { font-weight: 800 !important; } .font-weight-900 { font-weight: 900 !important; } /* Opacity */ .opacity-0 { opacity: 0; } .opacity-1 { opacity: 0.1; } .opacity-2 { opacity: 0.2; } .opacity-3 { opacity: 0.3; } .opacity-4 { opacity: 0.4; } .opacity-5 { opacity: 0.5; } .opacity-6 { opacity: 0.6; } .opacity-7 { opacity: 0.7; } .opacity-8 { opacity: 0.8; } .opacity-9 { opacity: 0.9; } .opacity-10 { opacity: 1; } /* Background light */ .bg-light-1 { background-color: #e9ecef !important; } .bg-light-2 { background-color: #dee2e6 !important; } .bg-light-3 { background-color: #ced4da !important; } .bg-light-4 { background-color: #adb5bd !important; } /* Background Dark */ .bg-dark { background-color: #111418 !important; } .bg-dark-1 { background-color: #212529 !important; } .bg-dark-2 { background-color: #343a40 !important; } .bg-dark-3 { background-color: #495057 !important; } .bg-dark-4 { background-color: #6c757d !important; } /* Progress Bar */ .progress-sm { height: 0.5rem !important; } .progress-lg { height: 1.5rem !important; } hr { border-top: 1px solid rgba(16, 85, 96, 0.1); } /* =================================== */ /* 3. Layouts /* =================================== */ #main-wrapper { background: #fff; min-height: 100vh; } .box #main-wrapper { max-width: 1200px; margin: 0 auto; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .box .abus-navigation { left: auto; } @media (min-width: 1200px) { .container { max-width: 1170px !important; } } /*=== 3.1 Side Navigation ===*/ .abus-navigation { position: fixed; top: 70px; left: 0; overflow: hidden; width: 300px; /* sidebar width (286px + 5%) — keep the logo box + content margin in sync */ height: calc(100% - 70px); z-index: 1; border-right: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s; display: flex; flex-direction: column; /* Explicit shade matches the .bg-light class on the element. Defending in case the bootstrap class is missing or overridden — the inner nav lists are transparent (below) so they inherit this color. */ background-color: #f8f9fa; } .abus-navigation > .nav, .abus-navigation .nav .nav { background-color: transparent; } /* Bootstrap's .nav defaults to `flex-wrap: wrap`, which causes overflowing items in the long chapter sub-navs to wrap into a second column outside the 260px-wide sidebar (they end up clipped and invisible). Force vertical stacking so the outer .nav scrolls normally when content overflows. */ .abus-navigation .nav { flex-wrap: nowrap; } .abus-navigation > .nav { padding: 30px 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Long nav titles wrap instead of forcing a horizontal scrollbar */ .abus-navigation .nav-link { white-space: normal; overflow-wrap: break-word; word-wrap: break-word; } /* Sticky sidebar regions — never shrink, never scroll */ .abus-navigation > .ui-input-container, .abus-navigation > .search-no-results, .abus-navigation > .search-didyoumean, .abus-navigation > .search-results-count, .abus-navigation > .sidebar-logo, .abus-navigation > .sidebar-copyright { flex-shrink: 0; } .abus-navigation .nav .nav-item { position: relative; } .abus-navigation .nav .nav { margin: 0 0 5px; } .abus-navigation .nav .nav-link { position: relative; padding: 12px 12px; /* Servicedoku spacing (July 2026), ported 2026-09-14 — was 6px 30px / 25px */ line-height: 1.3; font-weight: 600; } .abus-navigation .nav .nav-item:hover > .nav-link, .abus-navigation .nav .nav-item .nav-link.active, .abus-navigation .nav .nav-item .docs-page-link.is-current-page { /* Emphasise via faux-bold (text-shadow), NOT a font-weight bump: a real 600->700 change widens the glyphs, so a long chapter title fits fewer words per line and re-wraps the moment it is hovered/active. text-shadow leaves the glyph advance-width untouched, so the line breaks stay put. */ font-weight: 600; text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor; } .abus-navigation .nav .nav { display: none; border-left: 1px solid regba(0, 0, 0, 0.3); } .abus-navigation .nav .nav .nav-item .nav-link:after { content: ""; position: absolute; left: 30px; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.12); width: 1px; top: 0; } .abus-navigation .nav .nav .nav-item .nav-link.active:after, .abus-navigation .nav .nav .nav-item .nav-link.is-current-page:after, .abus-navigation .nav .nav .nav-item .nav-link.is-current-parent:after, .abus-navigation .nav .nav .nav-item .nav-link.is-current-chapter:after { /* Also key the blue line off the persistent is-current-* classes — scrollspy clears/rewrites .active while scrolling, which otherwise drops the line right after a nav click until the next scroll. */ border-color: #005aaa; border-width: 2px; } /* Accordion (Servicedoku since 2026-07-20, ported 2026-09-14): only the NEXT level opens — a current chapter shows its h2 list (nested h3 lists stay closed), a current h2 page shows its own h3 list, and is-current-parent (showPage puts it on the h2 while one of its h3 pages is open) keeps that h3 list expanded. The old `.is-current-page + .nav .nav` rule opened ALL h3 lists of a chapter at once. */ .abus-navigation .nav .nav-item .nav-link.active + .nav, .abus-navigation .docs-page-link.is-current-page + .nav, .abus-navigation .docs-page-link.is-current-parent + .nav { display: block; } .abus-navigation .nav .nav .nav-link { color: #6a6a6a; padding: 5px 30px 5px 45px; font-size: 15px; text-transform: none; } .abus-navigation .nav .nav .nav .nav-link { padding: 4px 30px 4px 60px; font-size: 15px; } /* Outline-h3 pages ("Überschrift 3 mit Gliederung" — own page since 2026-07): entry in the same chapter list as the h2 pages, one indent step deeper. */ .abus-navigation .nav .nav .nav-link.docs-page-link--h3 { padding-left: 60px; } .abus-navigation .nav .nav .nav .nav-item .nav-link:after { left: 45px; } /* Persistent "has sub-chapters" caret (Servicedoku 2026-07-27, ported 2026-09-14 — replaces the old black ::after chevron that appeared only on the ACTIVE top-level entry). Shown on EVERY nav entry that has a nested page list — at ANY level (chapter, h2, …) and whether the list is currently open or not — so the entry visibly advertises that it can be expanded (theme.js tags those links .has-subpages). Points right when collapsed, rotates down when its list is expanded (is-current-*). Drawn on ::before so the nested-link guide line (::after) is untouched. Scoped to the light/classic look; the dark theme keeps its own per-row chevron (dark.css). */ :root:not([data-theme="dark"]) .abus-navigation .nav-link.has-subpages::before { position: absolute; content: ""; top: 50%; right: 16px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: 0.7; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } :root:not([data-theme="dark"]) .abus-navigation .nav-link.has-subpages.is-current-chapter::before, :root:not([data-theme="dark"]) .abus-navigation .nav-link.has-subpages.is-current-parent::before, :root:not([data-theme="dark"]) .abus-navigation .nav-link.has-subpages.is-current-page::before { -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); opacity: 1; } /* Reserve the caret's zone on every entry that shows one, so long (wrapping) titles can't run into it: the caret sits at right:16px and is ~10px wide incl. rotation, but top-level links only have 12px right padding. (The dark theme reserves its own 40px, see dark.css.) */ :root:not([data-theme="dark"]) .abus-navigation .nav-link.has-subpages { padding-right: 34px; } .abus-navigation.docs-navigation-dark .nav .nav-link { color: rgba(250, 250, 250, 0.85); } .abus-navigation.docs-navigation-dark .nav .nav .nav-link { color: rgba(250, 250, 250, 0.7); } .abus-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link:after { border-color: rgba(250, 250, 250, 0.2); } .abus-navigation.docs-navigation-dark .nav .nav .nav-item .nav-link.active:after { border-color: #005aaa; } /*=== 3.1.1 Search-results tree ===*/ /* While a search is active (theme.js puts .c-searching on .abus-navigation), the regular nav tree is replaced by the results tree: only the sub-chapters that contain matches, grouped under their chapter. An EMPTY results tree (no matches) means the sidebar shows no navigation at all — just the "Kein Suchergebnis gefunden!" message under the search bar. The results