/* ==========================================================================
   report-responsive.css
   Responsive- und Design-Layer für den Resequencing-Report.
   Wird als LETZTES Stylesheet geladen und überschreibt nur, was nötig ist.
   Die Vendor-Dateien (bootstrap, index, nav, raxus, report_final) bleiben
   unverändert, damit die Änderung jederzeit rückstandslos entfernbar ist:
   einfach diese Datei und report-responsive.js aus dem <head> nehmen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Marke: rgb(48,112,184) aus dem Original, minimal normalisiert */
    --brand: #2f6fb5;
    --brand-deep: #245a94;
    --brand-ink: #1f5c99;
    --brand-wash: #eaf1f9;

    --ink: #191c21;
    --ink-muted: #5a6270;
    --ink-toc: #2b3440;
    --ink-toc-sub: #4a5361;

    --surface: #ffffff;
    --surface-panel: #f1f4f8;
    --surface-zebra: #f6f8fa;
    --page-bg: #e7e9ee;

    --line: #d4dae2;
    --line-strong: #b9c3cf;

    --header-h: 58px;
    --gutter: 16px;
    --measure: 76ch;

    --radius: 8px;
    --radius-lg: 14px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
    --dur: 200ms;

    /* Semantische z-index-Skala statt 999-Wildwuchs.
       Fancybox liegt bei 8000+, alles hier bleibt darunter. */
    --z-sticky: 100;
    --z-fab: 200;
    --z-header: 300;
    --z-backdrop: 400;
    --z-drawer: 500;
}

@media (min-width: 768px) {
    :root {
        --header-h: 68px;
        --gutter: 24px;
    }
}

* {
    -webkit-tap-highlight-color: rgba(47, 111, 181, 0.18);
}

/* --------------------------------------------------------------------------
   2. Fundament: die 972px-Sperre auflösen
   -------------------------------------------------------------------------- */

/* index.css setzt .container{min-width:972px} — das ist die eigentliche
   Ursache dafür, dass die Seite auf jedem Telefon horizontal überläuft. */
.container {
    min-width: 0;
    width: 100%;
    max-width: 1440px;
    padding-top: calc(var(--header-h) + var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
    /* Sicherheitsnetz gegen ein einzelnes zu breites Element.
       clip statt hidden: hidden würde einen Scroll-Container erzeugen und
       damit position:sticky und scroll-margin-top aushebeln. */
    overflow-x: clip;
    background-color: var(--page-bg);
    color: var(--ink);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.shadow {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06),
        0 12px 40px rgba(16, 24, 40, 0.1);
}

/* Die Anhangsseiten (method/name/software_database) tragen .other-page und
   haben keinen fixierten Header — dort darf oben kein Platz reserviert
   werden. Sie nutzen sonst dieselbe Typografie und Tabellenbehandlung. */
.other-page .container {
    padding-top: var(--gutter);
    max-width: 1100px;
}

.other-page header {
    min-height: 0;
}

/* Das Logo ist per .pull-right gefloatet und drängt den zentrierten Titel
   auf schmalen Breiten in eine Restspalte, in der Wörter mitten
   auseinanderbrechen. Unter 700px steht es deshalb auf eigener Zeile. */
.other-page > .container > header {
    overflow: hidden;
}

.other-page .amend-title {
    clear: both;
}

@media (max-width: 699px) {
    .other-page header .pull-right {
        float: none !important;
        display: block;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Legacy-Markup auf den Anhangsseiten: <font color="#337ab7"> als
   Zwischentitel. Auf die kontraststärkere Marken-Stufe gezogen. */
.other-page font[color="#337ab7"] {
    color: var(--brand-deep);
}

/* Sprungziele dürfen nicht unter dem fixierten Header landen. */
[id] {
    scroll-margin-top: calc(var(--header-h) + var(--gutter));
}

.other-page [id] {
    scroll-margin-top: var(--gutter);
}

/* Skip-Link */
.skip-link {
    /* fixed, nicht absolute: nav.css setzt body{position:relative}, mit
       absolute würde der Link bei gescrollter Seite am Dokumentanfang
       auftauchen — also unsichtbar. */
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: var(--z-drawer);
    padding: 10px 18px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    text-decoration: none;
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
    transform: translate(-50%, 0);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. Kopfzeile
   -------------------------------------------------------------------------- */

.h-fix {
    width: 100% !important;
    left: 0;
    right: 0;
    min-height: var(--header-h);
    padding: 0;
    display: block;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 3px solid var(--brand);
    z-index: var(--z-header);
}

/* Die beiden dekorativen Doppellinien des Originals entfallen — sie
   arbeiteten mit negativen Offsets und rissen bei jeder anderen Breite auf. */
.h-fix::before,
.h-fix::after {
    content: none;
}

.h-fix-inner {
    max-width: 1440px;
    margin: 0 auto;
    min-height: var(--header-h);
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 12px;
}

.h-fix .brand-logo {
    width: auto !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--dur) var(--ease);
}

.h-fix .brand-logo span {
    color: var(--ink-muted);
    font-weight: 400;
}

.h-fix .brand-logo:hover {
    opacity: 0.75;
}

.h-fix .brand-txt {
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.3;
    text-align: right;
}

@media (max-width: 519px) {
    /* Auf sehr schmalen Geräten konkurriert der Zusatztext mit dem Logo. */
    .h-fix .brand-txt {
        display: none;
    }
}

@media (min-width: 768px) {
    .h-fix .brand-logo {
        font-size: 26px;
    }

    .h-fix .brand-txt {
        font-size: 15px;
    }
}

/* Der Menüknopf für das Inhaltsverzeichnis unter 992px */
.toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    margin-left: -8px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-toc);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.toc-toggle:hover {
    background: var(--brand-wash);
    border-color: var(--line-strong);
}

.toc-toggle-bars {
    display: block;
    position: relative;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.toc-toggle-bars::before,
.toc-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.toc-toggle-bars::before {
    top: -5px;
}

.toc-toggle-bars::after {
    top: 5px;
}

.toc-toggle-label {
    display: none;
}

@media (min-width: 420px) {
    .toc-toggle-label {
        display: inline;
    }
}

@media (min-width: 992px) {
    .toc-toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4. Inhaltsverzeichnis: sticky auf dem Desktop, Drawer auf klein
   -------------------------------------------------------------------------- */

/* Die Original-Lösung war Bootstrap-affix mit position:fixed und fest
   verdrahteten 213px/263px. position:sticky erbt die Spaltenbreite und
   braucht keine Pixelrechnung. */
@media (min-width: 992px) {
    .container > .row {
        align-items: flex-start;
    }

    div[role="complementary"].col-md-3 {
        position: sticky;
        top: calc(var(--header-h) + var(--gutter));
        align-self: flex-start;
        max-height: calc(100vh - var(--header-h) - var(--gutter) * 2);
        display: flex;
        flex-direction: column;
        padding-left: 0;
    }

    .bs-docs-sidebar,
    .bs-docs-sidebar.affix,
    .bs-docs-sidebar.affix-top,
    .bs-docs-sidebar.affix-bottom {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0;
        margin: 0;
        padding: 6px 0 10px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.bs-list {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-panel);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    color: var(--ink-toc);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-indent: 0;
    line-height: 1 !important;
    z-index: auto;
}

.bs-list::before,
.bs-list::after {
    content: none;
}

.bs-docs-sidebar {
    background: var(--surface-panel);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: none;
}

/* Der Original-Selektor hängt an .affix; ohne affix bräuchte der Container
   den Rahmen. Beides zusammengefasst: */
div[role="complementary"].col-md-3 {
    /* Rahmen sitzt auf .bs-list + .bs-docs-sidebar, nicht auf der Spalte */
}

.bs-docs-sidebar .nav > li > a {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-toc);
    border-radius: 6px;
    line-height: 1.35;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bs-docs-sidebar .nav .nav > li > a {
    padding: 6px 16px 6px 28px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-toc-sub);
    line-height: 1.35;
}

.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus,
.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
    padding-left: 16px;
    background: var(--brand-wash);
    color: var(--brand-ink);
    text-decoration: none;
}

.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
    padding-left: 28px;
}

/* Aktiver Zustand: eine Farbe, nicht drei konkurrierende */
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a,
.bs-docs-sidebar .nav > .active > a.js-active-bg,
.bs-docs-sidebar .nav > .active:hover > a.js-active-bg,
.bs-docs-sidebar .nav > .active:focus > a.js-active-bg,
.bs-docs-sidebar .nav > .active > a.active_header,
.nav > .active > a.active_header {
    padding-left: 16px;
    font-weight: 700;
    color: #fff !important;
    background-color: var(--brand) !important;
}

.bs-docs-sidebar .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav > .active > a.js-active-bg {
    padding-left: 28px;
    font-weight: 700;
    color: var(--brand-ink) !important;
    background: var(--brand-wash) !important;
}

.bs-docs-sidebar .nav .nav {
    padding-bottom: 4px;
}

ul.bs-docs-sidenav li {
    margin-left: 0;
    line-height: 1.35;
}

.bs-docs-sidenav {
    margin: 8px;
}

/* Mobiler Drawer -------------------------------------------------------- */

.toc-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(88vw, 350px);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 40px rgba(16, 24, 40, 0.18);
    transform: translateX(-101%);
    visibility: hidden;
    /* visibility darf NICHT mitanimieren: sonst ist der Drawer beim Öffnen
       im ersten Frame noch hidden und ein focus() darin wird verworfen.
       Stattdessen sofort umschalten beim Öffnen, verzögert beim Schliessen,
       damit die Ausblend-Animation noch sichtbar ist. */
    transition: transform 260ms var(--ease), visibility 0s linear 260ms;
    padding-left: env(safe-area-inset-left);
}

.toc-drawer[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 260ms var(--ease), visibility 0s linear 0s;
}

.toc-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 18px;
    padding-top: max(12px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--line);
    background: var(--surface-panel);
}

.toc-drawer-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-toc);
}

.toc-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-toc);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.toc-drawer-close:hover {
    background: var(--brand-wash);
}

.toc-drawer-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px max(16px, env(safe-area-inset-bottom));
}

.toc-drawer-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-drawer-body li {
    margin: 0;
    line-height: 1.35;
}

.toc-drawer-body a {
    display: block;
    padding: 11px 14px;
    border-radius: 6px;
    color: var(--ink-toc);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur) var(--ease);
}

.toc-drawer-body ul ul a {
    padding-left: 28px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-toc-sub);
}

.toc-drawer-body ul ul ul a {
    padding-left: 42px;
    font-size: 13px;
}

.toc-drawer-body a:hover,
.toc-drawer-body a:focus {
    background: var(--brand-wash);
    color: var(--brand-ink);
}

.toc-drawer-body a:active {
    background: var(--brand);
    color: #fff;
}

.toc-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: rgba(15, 20, 28, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}

.toc-backdrop[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms var(--ease), visibility 0s linear 0s;
}

body.toc-open {
    overflow: hidden;
}

@media (min-width: 992px) {
    .toc-drawer,
    .toc-backdrop {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */

h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Das Original mischte drei fast identische Blautöne (#0066cc, #2e6da4,
   #337ab7). Zusammengeführt auf eine zweistufige Marken-Rampe. */
h2,
#title {
    color: var(--brand-deep);
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25 !important;
    padding: 8px 0 24px;
}

h3 {
    color: var(--brand);
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
    margin-top: 2.25em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--line);
}

h4 {
    color: var(--brand-deep);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35 !important;
    margin-top: 1.9em;
}

h5 {
    color: var(--brand-deep);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4 !important;
    margin-top: 1.5em;
}

section > h3:first-child {
    margin-top: 0.5em;
}

/* Lesezeile begrenzen — Fließtext, nicht Tabellen oder Abbildungen. */
.paragraph,
.p-abstract,
.paragraph-none-indent,
.paragraph-mark,
section > ol > li,
section > ul > li {
    max-width: var(--measure);
    color: var(--ink);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.paragraph,
.p-abstract,
.paragraph-none-indent {
    line-height: 1.65 !important;
}

.paragraph {
    margin-bottom: 0.9em !important;
}

.p-abstract {
    padding-left: 0;
    padding-right: 0;
}

ul li,
ol li {
    line-height: 1.65em;
}

ol,
ul {
    padding-left: 1.25em;
}

ul li,
ol li {
    margin-left: 0;
}

/* Bild- und Tabellenbeschriftungen: kleiner, ruhiger, aber kontraststark */
.img-mark,
.table-mark,
p.small {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.6;
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

.table-mark {
    padding: 0;
}

/* Abbildungs-/Tabellentitel */
p.text-center {
    color: var(--ink-toc);
    font-weight: 600;
}

/* Links */
a {
    color: var(--brand-ink);
    overflow-wrap: break-word;
}

a:hover,
a:focus {
    color: var(--brand-deep);
}

section ol li a {
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 92, 153, 0.28);
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

section ol li a:hover {
    border-bottom-color: var(--brand-ink);
    background: var(--brand-wash);
}

@media (max-width: 767px) {
    .paragraph {
        text-indent: 1.25em;
    }

    .container {
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   6. Tabellen
   -------------------------------------------------------------------------- */

/* Bootstrap 3 lässt .table-responsive nur unter 768px scrollen. Die
   Tabellen hier sind bis 5770px breit — sie müssen auf JEDER Breite
   scrollen, sonst sprengen sie das Layout. */
.table-responsive {
    padding: 0;
    margin: 0 0 0.5em;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* Schatten-Affordanz: zeigt an, dass seitlich noch mehr kommt.
       background-attachment:local koppelt die Deckflächen an den Inhalt. */
    background-image: linear-gradient(
            to right,
            var(--surface) 30%,
            rgba(255, 255, 255, 0)
        ),
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)),
        radial-gradient(
            farthest-side at 0 50%,
            rgba(16, 24, 40, 0.16),
            rgba(16, 24, 40, 0)
        ),
        radial-gradient(
            farthest-side at 100% 50%,
            rgba(16, 24, 40, 0.16),
            rgba(16, 24, 40, 0)
        );
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
}

.table-responsive .table {
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    background: transparent;
}

.table > thead > tr > th,
.table > tbody > tr > td {
    padding: 10px 14px;
    font-size: 14px;
    vertical-align: middle;
    border-color: var(--line);
}

.table > thead > tr > th {
    white-space: nowrap;
    font-weight: 600;
    border-bottom: 0;
}

.table > tbody > tr > td {
    /* Table 20 hat Zellen mit langen Genbeschreibungen. Ohne Deckel wird
       die Tabelle 5770px breit; mit Umbruch bleibt sie lesbar. */
    max-width: 34ch;
    overflow-wrap: break-word;
}

.bg-info,
.table > thead > tr.bg-info > th {
    background: var(--brand);
    color: #fff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--surface-zebra);
}

/* Das Original schaltete den Hover-Zustand explizit ab
   (.table-hover>tbody>tr:hover{background:none}). Bei 13- bis 25-spaltigen
   Tabellen ist Zeilen-Tracking aber genau das, was man braucht. */
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:nth-of-type(odd):hover {
    background: var(--brand-wash);
}

@media (max-width: 767px) {
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   7. Abbildungen und Slider
   -------------------------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}

.img-width-max {
    max-width: 100%;
    max-height: none;
    height: auto;
}

@media (min-width: 768px) {
    .img-width-max {
        max-height: 460px;
        width: auto;
    }
}

.img-width-normal {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.img-width-min {
    width: 100%;
    max-width: 200px;
    height: auto;
}

p img {
    padding: 8px 0;
}

/* Abbildungen sind per fancyBox zoombar — das darf man sehen. */
a.img-toggle {
    display: inline-block;
    max-width: 100%;
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

a.img-toggle:hover {
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.16);
    transform: translateY(-2px);
}

a.img-toggle img {
    border-radius: var(--radius);
}

/* raxus-Slider: Basisbreite war fix 800px.
   Die Höhe darf NICHT auf auto stehen — .slider-area ist absolut
   positioniert (top:0;bottom:0) und würde auf 0 kollabieren. Die vendor-
   Höhe von 600px bleibt als Fallback stehen; report-responsive.js rechnet
   sie aus Breite und Bild-Seitenverhältnis exakt aus. */
.raxus-slider {
    width: 100% !important;
    max-width: 820px;
    margin: 0 auto;
    border-radius: var(--radius);
}

.raxus-slider .slider-area {
    max-width: 100%;
}

/* raxus.css:337 setzt die Bildhöhe hart auf 470px (plus max-width:85%).
   Damit ist das Bild auf einem Telefon höher als sein eigener Rahmen.
   Die Höhe kommt jetzt aus --slide-img-h, das report-responsive.js pro
   Slider aus Breite und Seitenverhältnis berechnet; 470px bleibt Fallback. */
.raxus-slider .slider-relative .slide .image img {
    height: var(--slide-img-h, 470px);
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 0;
    object-fit: contain;
}

/* ACHTUNG: Am Miniaturstreifen darf keine Breite angetastet werden.
   raxus zentriert jedes Vorschaubild über eine 1000px breite Box mit
   left:50%/margin-left:-500px (raxus.css:604) und scrollt den Streifen
   über die Breite von ul.mini-images. Ein max-width:100% darauf schiebt
   die Bilder aus ihrem Rahmen bzw. blockiert das Scrollen des Streifens.

   Die Vorschaubilder sind helle Plots auf weissem Grund und praktisch
   unsichtbar. Rahmen und Grundton machen sie auffindbar — ausschliesslich
   über box-shadow/background, damit das Boxmodell unberührt bleibt. */
.raxus-slider .mini-images li {
    background: var(--surface-zebra);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 3px;
    cursor: pointer;
    transition: box-shadow var(--dur) var(--ease);
}

.raxus-slider .mini-images li:hover {
    box-shadow: inset 0 0 0 1px var(--brand);
}

.raxus-slider .mini-images li.selected {
    box-shadow: inset 0 0 0 2px var(--brand);
}

/* Der Vendor legt für den ausgewählten Zustand ein graues Inset-Overlay
   darüber; das würde den Markenring wieder zumatschen. */
.raxus-slider .mini-images li.selected .img-selected,
.raxus-slider .mini-images li:hover .img-selected {
    box-shadow: none;
}

/* Die Pfeilgrafiken (next.png/prev.png) fehlen in der Lieferung. Statt
   unsichtbarer Klickflächen: eigene Pfeile, groß genug für Touch. */
.raxus-slider .arrow-l,
.raxus-slider .arrow-r {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.2);
    transition: background var(--dur) var(--ease);
}

.raxus-slider .arrow-l:hover,
.raxus-slider .arrow-r:hover {
    background: #fff;
}

.raxus-slider .arrow-l::after,
.raxus-slider .arrow-r::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--brand-deep);
    border-right: 2px solid var(--brand-deep);
}

.raxus-slider .arrow-l::after {
    transform: translate(-40%, -50%) rotate(-135deg);
}

.raxus-slider .arrow-r::after {
    transform: translate(-60%, -50%) rotate(45deg);
}

/* Das zweite Pfeilpaar scrollt nur den Miniaturstreifen. Es trägt beide
   Klassen (arrow-l arrow-l-bottom) und darf nicht so laut auftreten wie
   die Hauptnavigation — sonst konkurrieren vier gleich starke Knöpfe. */
.raxus-slider .arrow-l-bottom,
.raxus-slider .arrow-r-bottom {
    width: 30px;
    height: 30px;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.55;
}

.raxus-slider .arrow-l-bottom:hover,
.raxus-slider .arrow-r-bottom:hover {
    background: var(--brand-wash);
    opacity: 1;
}

.raxus-slider .arrow-l-bottom::after,
.raxus-slider .arrow-r-bottom::after {
    width: 7px;
    height: 7px;
    border-width: 2px;
}

/* --------------------------------------------------------------------------
   8. Interaktion und Zustände
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Zurück-nach-oben: das Original positionierte per
   transform:translateX(900px) — bricht bei jeder anderen Breite. */
#goTop {
    position: fixed;
    right: max(var(--gutter), env(safe-area-inset-right));
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    z-index: var(--z-fab);
}

.backtotop {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.18);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.backtotop:hover {
    background: var(--brand-wash);
    transform: translateY(-2px);
}

.backtotop .back-tip {
    width: 22px;
    height: 22px;
    opacity: 0.85;
}

/* FAQ-Akkordeon */
.my-faq-title,
.my-faq-question {
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease);
}

.my-faq-title:hover,
.my-faq-question:hover {
    background: var(--brand-wash);
}

.my-faq-item,
.my-faq-body,
.my-faq-question {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .toc-drawer,
    .toc-backdrop {
        transition: none;
    }

    a.img-toggle:hover,
    .backtotop:hover {
        transform: none;
    }
}

/* Touch-Geräte: keine Hover-abhängigen Effekte, größere Ziele */
@media (hover: none) {
    a.img-toggle:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (pointer: coarse) {
    .bs-docs-sidebar .nav > li > a,
    .bs-docs-sidebar .nav .nav > li > a {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* --------------------------------------------------------------------------
   10. Druck / PDF-Export
   -------------------------------------------------------------------------- */

@media print {
    :root {
        --header-h: 0px;
    }

    body {
        background: #fff;
    }

    .container {
        max-width: none;
        width: auto;
        padding: 0;
        box-shadow: none;
    }

    .h-fix,
    .toc-toggle,
    .toc-drawer,
    .toc-backdrop,
    #goTop,
    div[role="complementary"].col-md-3,
    .skip-link {
        display: none !important;
    }

    .col-md-9 {
        width: 100%;
        float: none;
        padding: 0;
    }

    .container > .row {
        display: block !important;
    }

    /* Tabellen im Druck vollständig zeigen, nicht abgeschnitten scrollen */
    .table-responsive {
        overflow: visible !important;
        border: 0;
        background-image: none;
    }

    .table {
        font-size: 9pt;
    }

    .table > thead {
        display: table-header-group;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 4px 6px;
    }

    h2,
    h3,
    h4,
    h5 {
        break-after: avoid;
        page-break-after: avoid;
        color: #000;
    }

    section,
    tr,
    .table-responsive,
    p.text-center,
    .img-mark {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    a.img-toggle {
        box-shadow: none;
    }

    /* Ziel-URLs sichtbar machen, solange sie nicht schon im Text stehen */
    section ol li a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #444;
        word-break: break-all;
    }
}