/* Copyright (c) 2026 ABUS Kransysteme GmbH */ /* ===================================================================== ABUS HELP — Classic casing for the doc viewer (index.html) --------------------------------------------------------------------- Styles ONLY the casing — the header bar and the left sidebar. The document content area is deliberately left untouched. Rules are scoped under [data-design="classic"], which index.html hardcodes on (kept from the two-design era; harmless and easy to grep). Theme: ABUS-blue header (#005aaa) with white icons/text, and a uniform light-grey sidebar (search + nav + Inhalt/Favoriten tabs + copyright all one colour). The chrome is static markup in index.html; companion assets/js/classic.js wires its behaviour. Sizing/colours live in the variables below — change one place to retune. ===================================================================== */ [data-design="classic"] { --c-header-bg: #005aaa; /* header bar — ABUS blue */ --c-header-fg: #ffffff; /* header text + icons — white on the blue */ --c-header-h: 53px; /* header height (48px + 10%) — raise/lower to taste */ --c-sidebar-bg: #f3f4f6; /* the WHOLE sidebar: nav, tabs, privacy — one colour */ --c-sidebar-fg: #1f2937; /* sidebar/drawer text + icons — dark on the light grey */ --c-accent: #005aaa; /* ABUS blue — active tab + links */ --c-border: #c3c8cf; /* hairlines */ --c-muted: #6c757d; --c-fav-star: #4a5565; /* filled favorites star */ } /* --------------------------------------------------------------------- 1. Modern-design leftovers, hidden Both stay in the markup: theme.js binds #sidebarCollapse, and the publish pipeline manages the .back-button href (.c-tostart mirrors it). --------------------------------------------------------------------- */ [data-design="classic"] .back-button, [data-design="classic"] #sidebarCollapse { display: none !important; } /* --------------------------------------------------------------------- 2. Header bar — light grey, dark content --------------------------------------------------------------------- */ [data-design="classic"] #header .primary-menu.navbar { background: var(--c-header-bg) !important; border-bottom: 1px solid var(--c-border); box-shadow: none; } [data-design="classic"] #header .navbar { min-height: var(--c-header-h); } /* Pack the toolbar tightly on the left (Bootstrap's navbar container defaults to justify-content:space-between, which scatters the buttons). */ [data-design="classic"] #header .navbar .container-fluid { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; /* uniform spacing between logo, toolbar buttons, title and the right group */ } /* Dark text + icons on the light bar (override the theme's white-on-dark). */ [data-design="classic"] #header .c-iconbtn, [data-design="classic"] #header .page-nav, [data-design="classic"] #header .header-title, [data-design="classic"] #header .social-icons li a, [data-design="classic"] #header .social-icons-print i, [data-design="classic"] #header .social-icons-email i, [data-design="classic"] #header .social-icons-download i, [data-design="classic"] #header .language-selector > a, [data-design="classic"] #header .c-lang-globe { color: var(--c-header-fg); } /* Uniform spacing comes from the .social-icons gap — zero the theme's per-item li margins. The language button carries a divider towards the favorites star (matching the feedback|print divider): line on its left edge, the flex gap + padding give it 8px to each neighbour. The li is regenerated on publish, so the rule anchors on its class only. */ [data-design="classic"] #header .social-icons li { margin: 0; } [data-design="classic"] #header .social-icons .language-selector { border-left: 1px solid rgba(255, 255, 255, 0.45); padding-left: 8px; margin-left: 0; } /* The language toggle must NOT be clamped to the 22px icon width that .social-icons-sm forces — let it size to its content. */ [data-design="classic"] #header .language-selector > a { width: auto; } /* The language menu is a standard dropdown that drops down out of the (blue) header: ABUS-blue background with white items and the same hover overlay as the header buttons. Anchored to the globe's right edge so it can't spill off the right of the viewport. (On mobile the social-icons move into the drawer, where the menu is restyled as an inline list — see the <900 block.) */ [data-design="classic"] #header .language-selector .dropdown-menu { /* Pin to the website's right border. The top overlaps the header's 1px bottom border (top = header height − 1px) so the ABUS blue runs seamlessly from the header into the menu — no visible seam at the junction. Fixed positioning anchors to the viewport edge, ignoring the toolbar's padding. */ position: fixed; top: calc(var(--c-header-h) - 1px); right: 0; left: auto; margin: 0; min-width: 180px; padding: 4px 0; background: var(--c-header-bg); border: 1px solid rgba(255, 255, 255, 0.25); border-top: 0; border-radius: 0; /* Shadow on the sides/bottom only — the negative spread keeps it from bleeding up over the header and darkening the junction. */ box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.3); } [data-design="classic"] #header .language-selector .dropdown-item { color: var(--c-header-fg); } [data-design="classic"] #header .language-selector .dropdown-item:hover, [data-design="classic"] #header .language-selector .dropdown-item:focus { background: rgba(255, 255, 255, 0.16); color: var(--c-header-fg); } [data-design="classic"] #header .language-selector .dropdown-item.active { background: rgba(255, 255, 255, 0.24); color: var(--c-header-fg); } /* Logo: its own white box (like the modern design), divided from the grey toolbar by a border. The 300px block = sidebar width, so the box sits exactly over the sidebar and the toolbar starts at the content-column edge. The blue ABUS HELP logo (markup default) shows on the white. */ [data-design="classic"] #header .logo { background: #ffffff !important; box-shadow: inset 0 -1px 0 var(--c-border) !important; /* bottom border drawn inward — keeps the logo box the same height as the rest of the header */ border-right: 1px solid var(--c-border); align-self: stretch; /* full-height white box */ flex: 0 0 300px; width: 300px; padding: 0 22px; } [data-design="classic"] #header .logo img { height: 24px; width: auto; } /* Servicedoku text wordmark — replaces the SERVICEHANDBUCH image in the header logo box (and the sidebar drawer). Only the service casing's markup carries .text-logo / .logo-text, so these (shared) rules never affect mobile Doku's image logo. */ [data-design="classic"] .logo-text { color: #005aaa; font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; white-space: nowrap; line-height: 1; } /* Centre the wordmark vertically + horizontally inside the white 300px box. */ [data-design="classic"] #header .logo.text-logo { display: flex; align-items: center; justify-content: center; } /* Icon buttons (☰ ⏮ 🏠 + favorites star), matched to the prev/next arrows. */ [data-design="classic"] .c-iconbtn { font-size: 1.05rem; margin-left: 0; /* spacing handled by the container/social-icons gap */ display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } [data-design="classic"] .c-iconbtn:hover, [data-design="classic"] .c-iconbtn:focus-visible, [data-design="classic"] .page-nav:hover, [data-design="classic"] .page-nav:focus-visible { /* :focus-visible (not :focus) so the highlight shows on hover and keyboard focus, but does NOT linger after a mouse click. */ background-color: rgba(255, 255, 255, 0.16); /* light overlay on the blue header */ text-decoration: none; outline: none; box-shadow: none; } /* Give the feedback + print header buttons the SAME rounded hover accent as the other header icon buttons (help/favorite/nav = .c-iconbtn). The light/dark toggle is excluded — it is a , not an . */ [data-design="classic"] #header .social-icons-email > a, [data-design="classic"] #header .social-icons-print > a { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; } [data-design="classic"] #header .social-icons-email > a:hover, [data-design="classic"] #header .social-icons-email > a:focus-visible, [data-design="classic"] #header .social-icons-print > a:hover, [data-design="classic"] #header .social-icons-print > a:focus-visible { background-color: rgba(255, 255, 255, 0.16); text-decoration: none; outline: none; } /* Print (ported from the Servicedoku casing 2026-09-15): keep the header BAR but empty except for the product title — hide the logo and all header buttons, the text-size and Vorlesen controls, the sidebar search bar, the sidebar's bottom Inhalt/Favoriten tabs and the expand/collapse toolbar of Option boxes. The title, navigation tree and the article content still print. (Tables: the narrow-article scroll rules are switched off for print in abus-styles.css.) */ @media print { #header .logo, #header .social-icons, #header .c-toc-toggle, #header .c-tostart, #header .c-home, #header .page-nav, #header #sidebarCollapse, #header .back-button, .c-textsize, .c-speak, .abus-options-toggle, .ui-input-container, .search-no-results, .search-didyoumean, .search-results-count, .c-tabs { display: none !important; } } [data-design="classic"] .page-nav { width: 30px; height: 28px; font-size: 1.05rem; margin-left: 0; } /* Left toolbar cluster (☰ ⏮ 🏠) shows in classic */ [data-design="classic"] .c-toc-toggle, [data-design="classic"] .c-tostart, [data-design="classic"] .c-home { display: flex; } /* Favorites star (in .social-icons). Solid star = current chapter is a favorite (white on the blue header; dark in the mobile drawer — see the <900 block). */ [data-design="classic"] .c-fav-star { display: flex; align-items: center; } [data-design="classic"] .c-fav-star.is-on .c-fav-link { color: var(--c-header-fg); } /* white on the blue header (solid star = favorited) */ [data-design="classic"] .c-fav-star.is-disabled .c-fav-link { opacity: 0.4; pointer-events: none; } /* Right-hand group: compact, globe instead of flag. Sits at the right edge — the title's flex-grow below fills the gap, so drop Bootstrap's ml-auto here. */ [data-design="classic"] #header .social-icons { margin-left: 0 !important; margin-right: 14px; gap: 8px; flex-wrap: nowrap; } [data-design="classic"] .social-icons-print i, [data-design="classic"] .social-icons-email i, [data-design="classic"] .social-icons-download i { font-size: 1.05rem; } /* Feedback icon (replaces the envelope): a plain recoloured via CSS filter — the SVG's path is black, brightness(0) normalises it, invert(1) flips it to WHITE for the blue header. (An needs no CORS, unlike a CSS mask, so it renders in every environment incl. file:// previews.) The drawer override below makes it dark like the other drawer icons. */ [data-design="classic"] .c-feedback-icon { width: 17px; height: 17px; vertical-align: middle; filter: brightness(0) invert(1); /* white */ } /* Divider between feedback (left) and print: the line sits on the print li's left edge — the flex gap spaces it from feedback, the padding from the print icon, 8px each side. Colour is re-themed in the drawer block below. */ [data-design="classic"] .social-icons .social-icons-print { border-left: 1px solid rgba(255, 255, 255, 0.45); padding-left: 8px; } [data-design="classic"] .language-selector > a > img.flag-icon { display: none; } [data-design="classic"] .c-lang-globe { display: inline-block; font-size: 1.05rem; line-height: 1; } /* (Impressum lives in the sidebar copyright block now — no header Impressum.) */ /* Title: drop the new design's absolute centering; sit it in the flow, just right of the arrows. margin-right:auto makes it the divider — everything after the title (the right-hand group) is pushed to the right edge. */ [data-design="classic"] .header-title { position: static; left: auto; transform: none; flex: 1 1 0; /* fill the gap between the clusters … */ min-width: 0; /* … and shrink (ellipsis) when space is tight, so the right group never gets squeezed/overlapped */ margin: 0; text-align: center; /* title centered between the left + right button clusters */ font-size: 1rem; font-weight: 700; text-shadow: none; pointer-events: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------------------- 3. Full-height layout — the theme's blue footer is gone (markup removed from index.html; its breadcrumb now sits above the content, the copyright in the sidebar), so sidebar + content reclaim its space. --------------------------------------------------------------------- */ [data-design="classic"] .abus-navigation { /* --c-banner-offset = visible height of the one-time notice banner (kept up to date by design-switcher.js). The banner sits in flow ABOVE the sticky header and pushes it down — the FIXED sidebar must follow, or its search bar hides behind the pushed-down header. 0px once dismissed. */ top: calc(var(--c-header-h) + var(--c-banner-offset, 0px)); height: calc(100% - var(--c-header-h) - var(--c-banner-offset, 0px)) !important; } [data-design="classic"] .abus-main { padding-bottom: 50px !important; } [data-design="classic"] #back-to-top { bottom: 24px; } /* Breadcrumb (Sie sind hier) — relocated from the old footer to the top of the content column; scrolls with the content. theme.js's updateBreadcrumb() feeds it. Geometry mirrors the Bootstrap .container below it, so the trail aligns with the article text at every width; the .breadcrumb-path truncation rules in stylesheet.css (2 rows desktop / 3 mobile) still apply. Re-coloured for the light background (was white-on-blue in the footer). */ /* Top bar: breadcrumb (left) + text-size control (right), sharing the article's centred column width. The box sizing that used to live on .breadcrumb-trail now lives on the .docs-topbar wrapper. */ [data-design="classic"] .abus-main > .docs-topbar { display: flex; /* Wrap (2026-09-15): the A−/A/A+ and Vorlesen groups are fixed-width; with an open sidebar on a narrow window they left the trail ~40 px, and the mobile break-word rule then wrapped the path letter by letter ("Montie|ren"). The trail now claims at least 240 px (flex-basis below) and the controls drop to a second line when there is no room. */ flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; margin: 0 auto; padding: 14px 15px 0; } [data-design="classic"] .abus-main > .docs-topbar > .breadcrumb-trail { flex: 1 1 240px; min-width: 0; padding: 0; /* drop the stale footer-era 6px 30px so "Sie sind hier:" lines up with the article text */ font-size: 0.9rem; color: var(--c-muted); /* the whole trail is grey */ } [data-design="classic"] .abus-main > .docs-topbar > .breadcrumb-trail:empty { display: none; } /* collapse the trail before the first page is shown; the control still shows */ @media (min-width: 576px) { [data-design="classic"] .abus-main > .docs-topbar { max-width: 540px; } } @media (min-width: 768px) { [data-design="classic"] .abus-main > .docs-topbar { max-width: 720px; } } @media (min-width: 992px) { [data-design="classic"] .abus-main > .docs-topbar { max-width: 960px; } } @media (min-width: 1200px) { [data-design="classic"] .abus-main > .docs-topbar { max-width: 1170px; } } /* matches stylesheet.css's .container override (1170, not Bootstrap's 1140) so the bar lines up with the article text */ /* Everything grey; links carry no underline and turn BLACK on hover. */ [data-design="classic"] .breadcrumb-label { color: var(--c-muted); } [data-design="classic"] .breadcrumb-trail a.breadcrumb-item { color: var(--c-muted); text-decoration: none; } [data-design="classic"] .breadcrumb-trail a.breadcrumb-item:hover, [data-design="classic"] .breadcrumb-trail a.breadcrumb-item:focus { color: #000; text-decoration: none; } [data-design="classic"] .breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before { color: var(--c-muted); } @media (max-width: 899.98px) { [data-design="classic"] .abus-main > .docs-topbar { padding-top: 10px; } [data-design="classic"] .abus-main > .docs-topbar > .breadcrumb-trail { font-size: 0.85rem; line-height: 1.4; } } /* Text-size control (A−/A/A+) — right-aligned on the breadcrumb line, styled for the light content area (the header copy was removed). Graded font-sizes hint at smaller / normal / larger; only the article text actually scales. */ [data-design="classic"] .docs-topbar > .c-textsize { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 2px; } [data-design="classic"] .c-textsize-btn { border: 0; background: transparent; color: var(--c-muted); font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; } [data-design="classic"] .c-textsize-btn:hover, [data-design="classic"] .c-textsize-btn:focus-visible { background: rgba(0, 90, 170, 0.08); color: var(--c-accent); outline: none; } [data-design="classic"] .c-textsize-dec { font-size: 0.85rem; } [data-design="classic"] .c-textsize-reset { font-size: 1rem; } [data-design="classic"] .c-textsize-inc { font-size: 1.15rem; } [data-design="classic"] .c-textsize-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } /* Vorlesen (2026-09-14, portiert aus der Servicedoku 2026-08-18) — dasselbe Barrierefreiheits-Werkzeugband wie A−/A/A+, direkt rechts daneben (theme.js fügt die Gruppe per JS ein, damit keine erzeugte Seite angefasst werden muss). Optischer Unterschied zu A−/A/A+: hier steht ein Wort dabei, weil ein Lautsprecher-Symbol allein oft als "Ton stummschalten" gelesen wird. aria-pressed="true" = liest gerade. Ohne geräteeigene Stimme für die Seitensprache bleibt die Gruppe verborgen (theme.js). */ [data-design="classic"] .docs-topbar > .c-speak { flex: 0 0 auto; display: flex; align-items: center; margin-left: 6px; } [data-design="classic"] .c-speak-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--c-muted); font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; } [data-design="classic"] .c-speak-btn:hover, [data-design="classic"] .c-speak-btn:focus-visible { background: rgba(0, 90, 170, 0.08); color: var(--c-accent); outline: none; } [data-design="classic"] .c-speak-btn[aria-pressed="true"] { background: rgba(0, 90, 170, 0.12); color: var(--c-accent); } /* Auf schmalen Schirmen nur das Symbol — die Topbar trüge sonst zwei Zeilen. */ @media (max-width: 575.98px) { [data-design="classic"] .c-speak-txt { display: none; } [data-design="classic"] .c-speak-btn { padding: 4px 6px; } } /* --------------------------------------------------------------------- 4. Sidebar — ONE uniform colour (#f3f4f6) top to bottom: search, nav, the Inhalt/Favoriten tabs AND the copyright block. Search + nav tree are the stock theme's and otherwise untouched. --------------------------------------------------------------------- */ [data-design="classic"] .abus-navigation { background-color: var(--c-sidebar-bg) !important; /* beat Bootstrap's .bg-light (#f8f9fa !important) so the whole sidebar is one shade */ border-right: 1px solid var(--c-border); } /* Sidebar tree: sub-chapter (h2) page lists are COLLAPSED by default — only the open chapter's list expands, so the main chapters stay scannable (theme.js marks the page lists with .c-pages; lists holding only h3 anchors keep the stock collapse-until-current behaviour). The expansion is keyed off the persistent is-current-chapter / is-current-page classes that showPage owns (NOT .active, which the scrollspy clears/rewrites while scrolling, so the open chapter would otherwise collapse mid-scroll). The open page is ABUS blue + bold; its chapter is ABUS blue + bold too. */ /* Accordion (Servicedoku, ported 2026-09-14): a chapter click reveals only its h2 entries, an h2 click additionally reveals only ITS nested outline-h3 entries (theme.js nests them per h2); is-current-parent sits on the h2 while one of its h3 pages is open. */ [data-design="classic"] .abus-navigation .docs-page-link.is-current-chapter + .nav.c-pages, [data-design="classic"] .abus-navigation .docs-page-link.is-current-parent + .nav.c-pages, [data-design="classic"] .abus-navigation .docs-page-link.is-current-page + .nav.c-pages { display: block; } [data-design="classic"] .abus-navigation .docs-page-link.is-current-page { color: var(--c-accent); font-weight: 700; } [data-design="classic"] .abus-navigation .docs-page-link.is-current-parent { color: var(--c-accent); } /* h2 parent of an open h3 page stays in the trail color */ /* The open chapter must read blue at ALL times, not just while scrollspy happens to park .active on it (the base sheet only colours .nav-link.active blue, so without an explicit colour here the chapter fell back to #222 black whenever .active moved to a child). --c-accent == the active blue, so rest and active match. */ [data-design="classic"] .abus-navigation .docs-page-link.is-current-chapter { color: var(--c-accent); font-weight: 700; } /* Mobile drawer shows ALL main chapters, the same as desktop — the open chapter is highlighted (bold + ABUS blue) and its sub-chapters expand via the is-current-* rules above. (The drawer used to hide every non-current chapter on <900px; that viewport-specific collapse was removed so mobile matches the desktop tree.) */ /* Favorites pane occupies the same scrollable middle slot as the nav tree. */ [data-design="classic"] .c-fav-pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 0; } /* Inhalt active → show tree, hide favorites. Favoriten active → vice-versa. */ [data-design="classic"] .abus-navigation.c-show-fav > .nav { display: none; } [data-design="classic"] .abus-navigation.c-show-fav .c-fav-pane { display: block; } [data-design="classic"] .c-fav-item { display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 22px; } [data-design="classic"] .c-fav-item a { flex: 1 1 auto; color: #1a2330; font-weight: 600; text-decoration: none; overflow-wrap: break-word; } [data-design="classic"] .c-fav-item a:hover { color: var(--c-accent); } [data-design="classic"] .c-fav-remove { flex: none; border: 0; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 0.85rem; padding: 4px; border-radius: 4px; } [data-design="classic"] .c-fav-remove:hover { color: #b00020; background: rgba(0, 0, 0, 0.06); } [data-design="classic"] .c-fav-empty { padding: 22px; color: var(--c-muted); font-size: 0.9rem; } /* Bottom tab strip: Inhalt | Favoriten — same grey, ~15% larger, no boxes (blends into the uniform sidebar; only the active tab keeps its indicator). */ [data-design="classic"] .c-tabs { display: flex; flex: none; position: relative; /* anchor for the ::after divider below */ background: var(--c-sidebar-bg); /* Match the gap above the nav (the search bar's 20px margin-bottom) below it too: the nav already has 30px padding top AND bottom, so adding 20px here gives the nav equal 50px breathing room from the search bar and the tabs. */ margin-top: 20px; } /* When the tab strip is the sidebar's LAST element (Servicedoku — its copyright block is removed, the portal supplies the legal links), give it some air from the bottom edge. On mobile Doku the copyright follows the tabs, so this rule never fires there. */ [data-design="classic"] .c-tabs:last-child { margin-bottom: 14px; } /* Vertical divider between Inhalt and Favoriten — 68% of the strip's height (80% − 15%), vertically centered. The tabs split the strip 50/50, so 50% is the seam. */ [data-design="classic"] .c-tabs::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 68%; background: var(--c-border); pointer-events: none; /* clicks on the seam still hit the tabs */ } [data-design="classic"] .c-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px; border: 0; background: transparent; color: var(--c-muted); font-size: 0.83rem; font-weight: 600; cursor: pointer; } [data-design="classic"] .c-tab i { font-size: 1.21rem; } [data-design="classic"] .c-tab:hover { color: var(--c-accent); } /* Selected tab is highlighted by colour only (no top line). */ [data-design="classic"] .c-tab.is-active { color: var(--c-accent); } [data-design="classic"] .c-tab-fav i { color: var(--c-fav-star); } /* filled #4a5565 star by default … */ [data-design="classic"] .c-tab-fav:hover i, /* … blue on hover … */ [data-design="classic"] .c-tab.is-active i { color: var(--c-accent); } /* … and when its tab is selected */ /* While a search is active (.c-searching, theme.js) the nav tree is replaced by the results tree, so the selected Inhalt tab drops to EXACTLY the inactive-Favoriten look (label --c-muted, icon --c-fav-star); clicking it then cancels the search (theme.js) and it turns blue again with the restored tree. Hover keeps the blue affordance so the click invitation is visible. */ [data-design="classic"] .abus-navigation.c-searching .c-tab-inhalt.is-active { color: var(--c-muted); } [data-design="classic"] .abus-navigation.c-searching .c-tab-inhalt.is-active i { color: var(--c-fav-star); } [data-design="classic"] .abus-navigation.c-searching .c-tab-inhalt.is-active:hover, [data-design="classic"] .abus-navigation.c-searching .c-tab-inhalt.is-active:hover i { color: var(--c-accent); } /* Datenschutzeinstellungen sits next to Impressum inside the copyright block, styled identically to the Impressum link (font inherited, dark + underlined). */ [data-design="classic"] .sidebar-copyright .c-privacy-btn { border: 0; background: transparent; padding: 0; font: inherit; color: #1a2330; text-decoration: underline; cursor: pointer; } [data-design="classic"] .sidebar-copyright .c-privacy-btn:hover { color: var(--c-accent); } /* Copyright block at the sidebar bottom (© ABUS · Impressum · Datenschutz- einstellungen — static markup in index.html): top border like the reference, otherwise the same uniform grey. */ [data-design="classic"] .sidebar-copyright { display: block; flex: none; margin-top: 0; text-align: center; padding: 14px 16px 18px; border-top: 1px solid var(--c-border); background: var(--c-sidebar-bg); font-size: 0.8rem; line-height: 1.7; color: var(--c-muted); } [data-design="classic"] .sidebar-copyright a { color: #1a2330; text-decoration: underline; } [data-design="classic"] .sidebar-copyright a:hover { color: var(--c-accent); } /* --------------------------------------------------------------------- 5. Three size tiers (the ☰ toggles .c-nav-toggled on ): • Desktop ≥900px : sidebar always visible, NO collapse toggle. • Tablet 700–900 : mobile chrome, sidebar shown by default; ☰ collapses it. • Mobile <700px : mobile chrome, sidebar is an off-canvas drawer; ☰ opens it. Each rule is scoped to its tier, so a class left over from another tier is simply ignored. --------------------------------------------------------------------- */ /* Tablet: ☰ collapses the (default-visible) sidebar. */ @media (min-width: 700px) and (max-width: 899.98px) { [data-design="classic"].c-nav-toggled .abus-navigation { transform: translateX(-100%); } [data-design="classic"].c-nav-toggled .abus-main { margin-left: 0; } } /* Mobile: the sidebar is an off-canvas drawer (hidden by default — see the base stylesheet's <700 rule); the ☰ toggle slides it open. */ @media (max-width: 699.98px) { [data-design="classic"].c-nav-toggled .abus-navigation { margin-left: 0; } } /* Desktop: no sidebar-collapse button. Prev/next stay in the left toolbar cluster next to ⏮ 🏠 (same as the mobile view) instead of flanking the centred title — so the header layout is identical at every width. */ @media (min-width: 900px) { [data-design="classic"] .c-toc-toggle { display: none; } /* no collapse option on desktop */ } @media (max-width: 899.98px) { [data-design="classic"] .abus-navigation { z-index: 3; } /* Right-group buttons (print, mail, favorite, language) are moved by classic.js into the drawer, above the logo — laid out as a centered icon row on the drawer background, with dark icons. */ [data-design="classic"] .abus-navigation > .social-icons { display: flex; flex: none; width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; /* center the button row */ gap: 16px; margin: 0; padding: 12px 15px; background: var(--c-sidebar-bg); } [data-design="classic"] .abus-navigation > .social-icons li { margin: 0; } [data-design="classic"] .abus-navigation > .social-icons li a, [data-design="classic"] .abus-navigation > .social-icons li i, [data-design="classic"] .abus-navigation > .social-icons .c-iconbtn, [data-design="classic"] .abus-navigation > .social-icons .language-selector > a, [data-design="classic"] .abus-navigation > .social-icons .c-lang-globe { color: var(--c-sidebar-fg); } /* Feedback : dark in the drawer (≈ the other icons' #1f2937). */ [data-design="classic"] .abus-navigation > .social-icons .c-feedback-icon { filter: brightness(0) invert(0.16); } /* Feedback|print divider: hairline colour + the drawer's wider 16px gap. */ [data-design="classic"] .abus-navigation > .social-icons .social-icons-print { border-left-color: var(--c-border); padding-left: 16px; } /* Star|globe divider in the drawer: the language li is display:contents here (inline dropdown) and cannot render a border — put the line on the globe's , which is a real flex item. */ [data-design="classic"] .abus-navigation > .social-icons .language-selector > a { border-left: 1px solid var(--c-border); padding-left: 16px; } /* Divider line above the logo (moved from below it). */ [data-design="classic"] .sidebar-logo { border-bottom: none; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Search bar (per the reference): a rounded border. The inner focus line/ underline is removed; instead the rounded border's BOTTOM edge turns blue while the field is focused. */ [data-design="classic"] .ui-input-container { border: 1px solid var(--c-border); border-radius: 8px; transition: border-color 0.2s; } [data-design="classic"] .ui-input-container.focused, [data-design="classic"] .ui-input-container:focus-within { border-bottom-color: #005aaa; } [data-design="classic"] .ui-input { border-bottom: none; } /* drop the inner grey/blue line */ [data-design="classic"] .ui-input-underline { display: none; } /* drop the animated blue underline */ /* Tighter sidebar rhythm on mobile only: • logo / chat launcher → search bar : HALF the gap (search top margin 20→10; drawer logo bottom padding 18→9) • search bar → navigation : MINIMAL gap (search bottom margin 20→8 [doubled on request]; nav top padding 30→0) • below the navigation : HALF the gap (nav bottom padding 30→15; Inhalt/Favoriten tab strip top 20→10) */ [data-design="classic"] .ui-input-container { margin: 10px 30px 8px; } /* search→nav gap doubled on request: bottom 4→8 (desktop 20→40 in stylesheet.css) */ [data-design="classic"] .sidebar-logo { padding-bottom: 9px; } [data-design="classic"] .abus-navigation > .nav { padding-top: 0; padding-bottom: 15px; } [data-design="classic"] .abus-navigation .c-tabs { margin-top: 10px; } /* Tab strip as the sidebar's last element: flush to the bottom on mobile (Servicedoku rule, ported 2026-09-14; on this casing the copyright block follows the tabs, so it only matters if that block is ever absent). */ [data-design="classic"] .c-tabs:last-child { margin-bottom: 0; } /* No tooltips on mobile/touch — hide all Bootstrap tooltips in classic. */ [data-design="classic"] .tooltip { display: none !important; } /* Favorites star, when set, stays dark on the light drawer (white would vanish). */ [data-design="classic"] .abus-navigation > .social-icons .c-fav-star.is-on .c-fav-link { color: var(--c-fav-star); } /* Language dropdown: expands INLINE as a full-width list below the button row and pushes the content below it down (not overlaying). display:contents on the

lets the globe + menu lay out directly in the button row; the menu (last item, width:100%) wraps onto its own full-width line below, so the buttons stay fixed. Items centered. */ [data-design="classic"] .abus-navigation .language-selector { display: contents; } [data-design="classic"] .abus-navigation .language-selector .dropdown-menu { position: static; float: none; width: 100%; min-width: 0; margin: 0; padding: 4px 0; border: 0; border-top: 1px solid var(--c-border); border-radius: 0; box-shadow: none; background: var(--c-sidebar-bg); } [data-design="classic"] .abus-navigation .language-selector .dropdown-item { color: var(--c-sidebar-fg); justify-content: flex-start; /* left-align the flag + label */ } [data-design="classic"] .abus-navigation .language-selector .dropdown-item:hover { background: rgba(0, 0, 0, 0.06); color: var(--c-accent); } /* Language menu OPEN in the drawer (flag list shown): everything else in the drawer is hidden — only the icon row (with its inline flag list), the logo and the copyright block with its links stay. classic.js mirrors Bootstrap's .show on the language

onto .abus-navigation as .c-lang-open (2026-09-14, FH). */ [data-design="classic"] .abus-navigation.c-lang-open > :not(.social-icons):not(.sidebar-logo):not(.sidebar-copyright) { display: none; } /* …and the copyright stays pinned to the drawer's bottom edge: normally the nav tree (flex: 1 1 auto) fills the space above it; with the tree hidden, margin-top:auto takes over (the sidebar is a flex column of fixed height). If icon row + flag list + logo + copyright are taller than a short phone screen, the drawer scrolls instead of clipping (base rule: overflow hidden). */ [data-design="classic"] .abus-navigation.c-lang-open > .sidebar-copyright { margin-top: auto; } [data-design="classic"] .abus-navigation.c-lang-open { overflow-y: auto; } } /* ============================================================ Windows High Contrast / forced-colors support Only active when the OS forces a high-contrast palette. Author background colours are dropped in that mode, so this keeps interactive chrome perceivable: visible keyboard focus, outlined active/selected states, and a distinguishable current search match. Invisible in normal browsing. ============================================================ */ @media (forced-colors: active) { [data-design="classic"] .c-iconbtn:focus-visible, [data-design="classic"] .page-nav:focus-visible, [data-design="classic"] .c-textsize-btn:focus-visible, .ui-input:focus-visible, .abus-navigation .nav-link:focus-visible { outline: 2px solid CanvasText; outline-offset: 1px; } /* States that authored CSS conveys only via background-color need an outline. */ [data-design="classic"] .c-tab.is-active, .abus-navigation .nav-link.active, .abus-navigation .nav-link.is-current-page { outline: 1px solid Highlight; } /* The active search match (other matches are , handled natively). */ .search-highlight.active { outline: 2px solid Highlight; } }