/* ====================================================================
   NBRP-Rat  -  gemeinsames Rahmen-Stylesheet (responsiv)
   Kopf (Logo), obere Navigation mit Aufklappmenüs, linke Schnellzugriffs-
   Knöpfe mit Bildwechsel, Inhaltsbereich, Fuß.  Wird von /nbr und allen
   Teilanwendungen (/nbr/strains, ...) als /nbr/nbrp-ui/nbrp.css eingebunden.
   Breiten:  >= 1000px PC   |  720-999px Tablet  |  < 720px Telefon
   ==================================================================== */

:root {
    --nbrp-bg: #F7F7F7;
    --nbrp-text: #333333;
    --nbrp-red: #990000;
    --nbrp-dark: #800000;
    --nbrp-rule: #C0C0C0;
    --nbrp-width: 1080px;
    --nbrp-tabs-w: 118px;
    --nbrp-tab: 100px;              /* Knopfbreite, Höhe = 0.95 * Breite */
    --nbrp-font: Tahoma, Helvetica, Arial, sans-serif;
    --nbrp-nav-font: bold 10pt Arial, Verdana, sans-serif;
}
html.nbrp-ja, .nbrp-ja {
    --nbrp-font: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", Tahoma, sans-serif;
    --nbrp-nav-font: bold 10pt Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic", Verdana, sans-serif;
}

html { -webkit-text-size-adjust: 100%; background: var(--nbrp-bg); }
body {
    margin: 0;
    padding: 0;
    background: var(--nbrp-bg);
    color: var(--nbrp-text);
    font: 13px/1.5 var(--nbrp-font);
}
/* box-sizing nur für den Rahmen - die alten Inhaltsseiten rechnen mit dem Standardmodell */
.nbrp-header, .nbrp-nav, .nbrp-nav *, .nbrp-tabs, .nbrp-tabs *, .nbrp-page, .nbrp-content, .nbrp-footer,
.home, .home-news, .home-main, .home-sns, .nbrp-chart-host { box-sizing: border-box; }

h1 { font-weight: bold; font-size: 16px; color: #4b2269; }
h2 { font-weight: bold; font-size: 10pt; color: #4b2269; }
a { color: #993333; text-decoration: none; }
.nbrp-ja a { color: #800000; }
a:visited { color: #800000; }
a:hover { color: #993300; }
a:active { color: #FF0000; }
th a { font-weight: bold; color: Black; }
th a:hover { color: #8B0000; }
.bold { font-weight: bold; }
.red { color: #800000; }
.horizCentre { margin: 10px auto; }

/* ---------- Kopf ---------- */
.nbrp-header {
    max-width: var(--nbrp-width);
    margin: 0 auto;
    overflow: hidden;
    background: #F7F7F7;                 /* die Logo-Grafik hat helle Ränder - auch im Dunkelmodus hell hinterlegt */
    aspect-ratio: 1079 / 150;
}
.nbrp-ja .nbrp-header { aspect-ratio: 1063 / 142; }
.nbrp-header a { display: block; }
.nbrp-header img { display: block; width: 100%; height: auto; }

/* ---------- obere Navigation ---------- */
.nbrp-nav {
    max-width: var(--nbrp-width);
    margin: 0 auto;
    position: relative;
    z-index: 30;
}
.nbrp-bar { display: none; }                     /* nur Telefon */
.nbrp-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 calc(var(--nbrp-tabs-w) + 12px);
    display: flex;
    align-items: stretch;
}
.nbrp-item { position: relative; }
.nbrp-item > .nbrp-link {
    display: block;
    padding: 9px 14px 7px;
    font: var(--nbrp-nav-font);
    color: var(--nbrp-text);
    white-space: nowrap;
    position: relative;
    transition: color .15s;
}
.nbrp-item > .nbrp-link::after {                /* Unterstrich, der beim Überfahren aufgeht */
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    background: var(--nbrp-red);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .2s ease-out;
}
.nbrp-item > .nbrp-link:hover, .nbrp-item.has-sub:focus-within > .nbrp-link { color: var(--nbrp-red); }
.nbrp-item > .nbrp-link:hover::after, .nbrp-item.has-sub:focus-within > .nbrp-link::after { transform: scaleX(1); }
.nbrp-item.is-current > .nbrp-link { color: var(--nbrp-dark); }
.nbrp-item.is-current > .nbrp-link::after { transform: scaleX(1); background: var(--nbrp-dark); }
.nbrp-lang { margin-left: auto; }
.nbrp-lang > .nbrp-link { font-weight: normal; }
.nbrp-sub-toggle { display: none; }

.nbrp-sub {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: 100%; left: 0;
    min-width: 210px;
    background: #FFFFF8;
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
}
.nbrp-sub::before {                             /* kleiner Pfeil nach oben */
    content: '';
    position: absolute;
    top: -6px; left: 24px;
    width: 10px; height: 10px;
    background: #FFFFF8;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    transform: rotate(45deg);
}
.nbrp-item.has-sub:hover > .nbrp-sub,
.nbrp-item.has-sub:focus-within > .nbrp-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: .06s, .06s, 0s;
}
.nbrp-nav .nbrp-sub a {
    display: block;
    padding: 7px 18px;
    font: 10pt Arial, Verdana, sans-serif;
    color: var(--nbrp-text);
    white-space: nowrap;
    transition: background-color .12s, color .12s, padding-left .12s;
}
.nbrp-ja .nbrp-sub a { font-family: Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; }
.nbrp-nav .nbrp-sub a:hover, .nbrp-nav .nbrp-sub a:focus { background: #F3E9E9; color: var(--nbrp-red); padding-left: 22px; }
.nbrp-nav .nbrp-sub li.is-current a { font-weight: bold; color: var(--nbrp-dark); }
.nbrp-item.is-external > .nbrp-link::before {   /* kleiner Pfeil: führt auf eine fremde Seite */
    content: '\2197';
    font-size: 80%;
    margin-right: 4px;
    opacity: .6;
}
.nbrp-nav .nbrp-noscript { padding: 8px 14px; }

/* ---------- Seite: linke Knöpfe + Inhalt ---------- */
.nbrp-page {
    max-width: var(--nbrp-width);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.nbrp-tabs {
    flex: 0 0 var(--nbrp-tabs-w);
    width: var(--nbrp-tabs-w);
    min-height: calc(6 * var(--nbrp-tab) * .95 + 12px);
    margin-top: 10px;
    padding: 6px 0 20px 6px;
    border-right: 1px solid var(--nbrp-rule);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nbrp-tab {
    position: relative;
    display: block;
    width: var(--nbrp-tab);
    height: calc(var(--nbrp-tab) * .95);
    background: url('../Images/Navi/TabBar/sqButton_off.png') no-repeat 0 0 / 100% 100%;
    color: var(--nbrp-text);
    text-align: center;
    font-size: 11pt;
    text-decoration: none;
    transition: transform .2s ease-out;
}
.nbrp-tab.is-pink { background-image: url('../Images/Navi/TabBar/sqButton_offPink.png'); }
.nbrp-tabs .nbrp-tab, .nbrp-tabs .nbrp-tab:visited, .nbrp-tabs .nbrp-tab:hover { color: var(--nbrp-text); }
.nbrp-tab-label {
    position: absolute;
    left: 4px; right: 4px; top: 50%;
    transform: translateY(-50%);
    line-height: 1.2;
    transition: opacity .2s ease-out;
}
.nbrp-tab-pic {                                  /* das gezeichnete Bild, erscheint beim Überfahren */
    position: absolute;
    inset: 0;
    background: no-repeat 0 0 / 100% 100%;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .22s ease-out, transform .22s ease-out;
}
.nbrp-tab:hover, .nbrp-tab:focus-visible { transform: translateX(3px); outline: none; }
.nbrp-tab:hover .nbrp-tab-pic, .nbrp-tab:focus-visible .nbrp-tab-pic { opacity: 1; transform: scale(1); }
.nbrp-tab:hover .nbrp-tab-label, .nbrp-tab:focus-visible .nbrp-tab-label { opacity: 0; }
.nbrp-tab.is-current .nbrp-tab-label { color: var(--nbrp-dark); font-weight: bold; }

.nbrp-content {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;                           /* Bezug für absolut gesetzte Blöcke der alten Seiten (Contact), wie das alte div#Content */
    padding: 14px 10px 10px 15px;
    margin-top: 10px;                             /* am PC wie bisher 933 px breit, ohne Beschneiden (Ajax-Sprechblasen) */
}
.nbrp-content img { max-width: 100%; height: auto; }
.nbrp-wide .nbrp-header, .nbrp-wide .nbrp-nav, .nbrp-wide .nbrp-page, .nbrp-wide .nbrp-footer { max-width: 1200px; }

.nbrp-footer {
    max-width: var(--nbrp-width);
    margin: 0 auto;
    padding: 10px;
    text-align: right;
    color: #666;
    clear: both;
}

/* ---------- Startseite ---------- */
.HomeTitle { font-size: 18px; color: var(--nbrp-dark); margin: 10px 0 8px 5px; }
.HomeText { font-size: 12px; color: #414243; margin: 0 5px; }
.homeTextL { font-size: 13px; }
.home { display: grid; grid-template-columns: minmax(240px, 276px) minmax(0, 1fr); column-gap: 20px; }
.home .nbrp-chart-host { padding-left: 0; }
.home-news { border-right: 1px solid var(--nbrp-rule); padding-right: 12px; }
.home-news .home-update { text-align: right; }
.home-news ul { list-style: none; margin: 4px 0 10px; padding: 0; }
.home-news li { padding-left: 1.1em; text-indent: -1.1em; }
.home-news li::before { content: '・'; }
.home-news li.diamond::before { content: '◆'; }
.home-news .highlight { color: #C0C0C0; }
.home-news .highlight a { background: #C0C0C0; color: #800000; padding: 0 2px; }
.home-sns a { display: inline-block; background: #C0C0C0; color: #800000; padding: 0 3px; margin: 2px 0; }
.home-sns strong { color: blue; }
.nbrp-chart-host { display: flow-root; max-width: 680px; margin: 0 0 26px; padding-left: 14px; }

/* Kachelseiten (tools.aspx, tools_jp.aspx): zwei Spalten als Raster statt schwimmender Kästen mit fester Höhe -
   jede Zeile wird so hoch wie ihr längerer Text (vorher liefen längere Texte in die nächste Zeile hinein) */
.nbrp-content .nbrp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; height: auto !important; overflow: visible !important; }
.nbrp-content .nbrp-tiles > .margin10left { float: none; width: auto !important; height: auto !important; min-height: 150px; margin: 10px 0 !important; }
.nbrp-content .nbrp-tiles > .margin10left img[align="left"] { margin: 0 12px 6px 0; }
@media (max-width: 999px) {
  .nbrp-content .nbrp-tiles { grid-template-columns: 1fr; }
  .nbrp-content .nbrp-tiles > .margin10left { min-height: 0; }
}

/* ====================================================================
   Tablet  (720 - 999px)
   ==================================================================== */
@media (max-width: 999px) {
    :root { --nbrp-tabs-w: 92px; --nbrp-tab: 80px; }
    .nbrp-menu { padding-left: 4px; }
    .nbrp-item > .nbrp-link { padding: 9px 9px 7px; font-size: 9.5pt; }
    .nbrp-item > .nbrp-link::after { left: 9px; right: 9px; }
    .nbrp-tab { font-size: 9.5pt; }
    .nbrp-content { padding-left: 12px; overflow-x: auto; }   /* breite Tabellen alter Seiten rollen, statt das Layout zu sprengen */
    .home { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); column-gap: 16px; }
}

/* ====================================================================
   Tablet und Telefon (< 1000px): alte Inhaltsseiten - Spalten, Floats und absolute Positionen auflösen,
   feste Breiten auf die Displaybreite begrenzen (die Seiten wurden für 933 px Inhaltsbreite gebaut)
   ==================================================================== */
@media (max-width: 999px) {
    .nbrp-content { overflow-wrap: anywhere; }
    .nbrp-content div[style*="width"], .nbrp-content p[style*="width"], .nbrp-content span[style*="width"]:not(.nbrp-bar-fill), .nbrp-content ul[style*="width"],
    .nbrp-content div[width], .nbrp-content .HomeTitle { max-width: 100% !important; }
    /* (.nbrp-bar-fill: die Balken der Diagramme aus nbrpStatus tragen ihre Länge als Prozentbreite im style-Attribut) */
    .nbrp-content [style*="float"], .nbrp-content .margin10left, .nbrp-content .margin10right, .nbrp-content .margin10leftClLeft,
    .nbrp-content .margin10leftClLeftWidth350, .nbrp-content .roundPanelFl, .nbrp-content .roundPanelFr, .nbrp-content .refrep,
    .nbrp-content .mta, .nbrp-content .accordionDepositDiv { float: none !important; width: auto !important; max-width: 100% !important; clear: both; }
    .nbrp-content .margin10left, .nbrp-content .margin10right, .nbrp-content .margin10leftClLeft, .nbrp-content .margin10leftClLeftWidth350 { margin: 10px 0; }
    .nbrp-content #depositcontainer, .nbrp-content #orderdd, .nbrp-content #orderTbl, .nbrp-content #hotNews, .nbrp-content #DounatPanel,
    .nbrp-content #LatestStrainsPanel, .nbrp-content #FrequentTasksPanel { float: none !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; }
    /* Hinterlegungs- und Bestellformular: die Anleitung ("How to deposit?", "Order Information") vor den Eingabefeldern */
    .nbrp-content #depositcontainer, .nbrp-content #orderdd { display: flex; flex-direction: column; }
    .nbrp-content #depositcontainer > .mta, .nbrp-content #orderdd > .mta,
    .nbrp-content #depositcontainer > .accordionDepositDiv { order: -1; margin-bottom: 14px; }   /* deposit_jp: Akkordeon heißt dort accordionDepositDiv */
    .nbrp-content #depositcontainer > table { align-self: stretch; }
    /* Akkordeonköpfe: die Grafiken sind 420 bzw. 933 x 25 px - auf Telefon und Tablet ist die Zeile höher (japanische Schrift) oder bricht um,
       dann stand unter der Grafik ein flacher roter Streifen. Deshalb hier derselbe Farbverlauf als CSS statt der Grafik. */
    .nbrp-content .accordionHeader, .nbrp-content .AccordionHeaderL, .nbrp-content .cpeL { background: linear-gradient(#710201, #b65b40); border-radius: 5px; }
    .nbrp-content .accordionHeaderSelected, .nbrp-content .AccordionHeaderLSelected { background: linear-gradient(#a1321b, #cd8f76); border-radius: 5px; }
    .nbrp-content div[style*="position: absolute"], .nbrp-content div[style*="position:absolute"], .nbrp-content .depositText { position: static !important; }
    .nbrp-content div[style*="margin"], .nbrp-content p[style*="margin"], .nbrp-content .HomeTitle { margin-left: 0 !important; margin-right: 0 !important; }
    .nbrp-content .yearCentral { margin-left: 0; margin-right: 0; }
    .nbrp-content input[type="text"], .nbrp-content select { max-width: 100%; box-sizing: border-box; }
    .nbrp-content textarea { max-width: 100%; box-sizing: border-box; }
    .nbrp-content iframe, .nbrp-content object, .nbrp-content embed { max-width: 100%; }
    .nbrp-content pre { white-space: pre-wrap; }
    /* Tabellen mit fester Breite: nur so breit wie nötig (Datenmatrizen rollen in ihrem Kasten, s. nbrp-datatable) */
    body:not(.nbrp-wide) .nbrp-content table[style*="width"], body:not(.nbrp-wide) .nbrp-content table[width] { width: auto !important; max-width: 100% !important; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable { display: block; overflow-x: auto; max-width: 100% !important; width: auto !important; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
    .nbrp-content .accordionContent, .nbrp-content .accordionDepositDiv { overflow: visible; }
    /* Formulare (deposit, order): die Eingabefelder sind 722 px breit - Zellen untereinander wie am Telefon */
    .nbrp-content #depositcontainer table, .nbrp-content #depositcontainer tbody, .nbrp-content #depositcontainer tr, .nbrp-content #depositcontainer td,
    .nbrp-content #orderdd table, .nbrp-content #orderdd tbody, .nbrp-content #orderdd tr, .nbrp-content #orderdd td {
        display: block; width: auto !important; max-width: 100% !important; box-sizing: border-box; height: auto !important;
    }
    .nbrp-content #depositcontainer td, .nbrp-content #orderdd td { padding: 3px 4px; text-align: left; }
    .nbrp-content #depositcontainer td:empty, .nbrp-content #orderdd td:empty { display: none; }
    .nbrp-content #depositcontainer td.nbrp-sp, .nbrp-content #orderdd td.nbrp-sp { display: none; }   /* Abstandszellen (Leerzeichen) der Formulare */
    .nbrp-content #depositcontainer table table tr, .nbrp-content #orderdd table table tr { border-bottom: 0; margin-bottom: 0; }   /* Kästchenlisten: keine Trennlinie je Zeile */
    .nbrp-content #depositcontainer > table > tbody > tr, .nbrp-content #orderdd > table > tbody > tr { margin-bottom: 4px; border-bottom: 1px solid #E4E4E4; }
    .nbrp-content #depositcontainer textarea, .nbrp-content #orderdd textarea { width: 100% !important; }
    .nbrp-content #depositcontainer input[type="text"][style*="width:7"], .nbrp-content #orderdd input[type="text"][style*="width:7"] { width: 100% !important; }
}

/* ====================================================================
   Telefon  (< 720px)
   ==================================================================== */
@media (max-width: 719px) {
    :root { --nbrp-tab: 74px; }
    .nbrp-header { aspect-ratio: auto; }
    .nbrp-ja .nbrp-header { aspect-ratio: auto; }
    .nbrp-header img { margin-bottom: -6%; }      /* den weißen Verlauf unten einkürzen */

    .nbrp-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px 4px 12px;
        border-top: 1px solid var(--nbrp-rule);
        border-bottom: 1px solid var(--nbrp-rule);
        background: var(--nbrp-bg);
    }
    .nbrp-nav .nbrp-bar-home { font: var(--nbrp-nav-font); color: var(--nbrp-dark); margin-right: auto; }
    .nbrp-nav .nbrp-bar-lang { font-size: 10pt; color: var(--nbrp-text); padding: 6px 8px; }
    .nbrp-burger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--nbrp-rule);
        border-radius: 4px;
        background: #fff;
        color: var(--nbrp-text);
        font: bold 10pt Arial, sans-serif;
        padding: 6px 10px;
        cursor: pointer;
    }
    .nbrp-burger-icon, .nbrp-burger-icon::before, .nbrp-burger-icon::after {
        display: block; width: 18px; height: 2px; background: var(--nbrp-dark); border-radius: 1px;
        transition: transform .2s, opacity .2s;
    }
    .nbrp-burger-icon { position: relative; }
    .nbrp-burger-icon::before, .nbrp-burger-icon::after { content: ''; position: absolute; left: 0; }
    .nbrp-burger-icon::before { top: -6px; }
    .nbrp-burger-icon::after { top: 6px; }
    .nbrp-nav.is-open .nbrp-burger-icon { background: transparent; }
    .nbrp-nav.is-open .nbrp-burger-icon::before { transform: translateY(6px) rotate(45deg); }
    .nbrp-nav.is-open .nbrp-burger-icon::after { transform: translateY(-6px) rotate(-45deg); }

    .nbrp-menu {
        display: none;
        flex-direction: column;
        padding: 0;
        background: #fff;
        border-bottom: 1px solid var(--nbrp-rule);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
        position: absolute;
        left: 0; right: 0;
    }
    .nbrp-nav.is-open .nbrp-menu { display: flex; animation: nbrp-drop .18s ease-out; }
    @keyframes nbrp-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    .nbrp-item { display: flex; flex-wrap: wrap; border-top: 1px solid #ECECEC; }
    .nbrp-item > .nbrp-link { flex: 1 1 auto; padding: 11px 16px; white-space: normal; }
    .nbrp-item > .nbrp-link::after { display: none; }
    .nbrp-lang { margin-left: 0; display: none; }  /* Sprache steht schon in der Leiste */
    .nbrp-sub-toggle {
        display: block;
        flex: 0 0 48px;
        border: 0; border-left: 1px solid #ECECEC;
        background: transparent;
        cursor: pointer;
        position: relative;
    }
    .nbrp-sub-toggle::before {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        width: 9px; height: 9px;
        margin: -7px 0 0 -5px;
        border-right: 2px solid var(--nbrp-dark);
        border-bottom: 2px solid var(--nbrp-dark);
        transform: rotate(45deg);
        transition: transform .2s;
    }
    .nbrp-item.is-open .nbrp-sub-toggle::before { transform: rotate(225deg); margin-top: -2px; }
    .nbrp-sub {
        flex: 0 0 100%;
        position: static;
        display: none;
        min-width: 0;
        background: #F4F4F4;
        border: 0; border-radius: 0;
        box-shadow: none;
        opacity: 1; visibility: visible; transform: none; transition: none;
        padding: 4px 0 8px;
    }
    .nbrp-sub::before { display: none; }
    .nbrp-item.is-open .nbrp-sub { display: block; animation: nbrp-drop .15s ease-out; }
    .nbrp-nav .nbrp-sub a { padding: 9px 16px 9px 32px; white-space: normal; }
    .nbrp-nav .nbrp-sub a:hover { padding-left: 32px; }

    .nbrp-page { display: block; }
    /* Schnellzugriff am Telefon: die gezeichneten Knöpfe sind dafür zu groß - stattdessen kleine Textknöpfe */
    .nbrp-tabs {
        width: auto;
        min-height: 0;
        margin-top: 0;
        padding: 8px 10px 6px;
        border-right: 0;
        border-bottom: 1px solid var(--nbrp-rule);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 8px;
    }
    .nbrp-tab {
        flex: 0 0 auto;
        width: auto;
        height: auto;
        background: #fff;
        border: 1px solid var(--nbrp-rule);
        border-radius: 15px;
        padding: 5px 12px;
        font-size: 10pt;
        line-height: 1.2;
        transition: background-color .15s, color .15s;
    }
    .nbrp-tab.is-pink { background: #F6DDE0; border-color: #E5B9BF; }
    .nbrp-tab-pic { display: none; }
    .nbrp-tab-label { position: static; transform: none; }
    .nbrp-tab:hover, .nbrp-tab:focus-visible { transform: none; background: #F3E9E9; }
    .nbrp-tab:hover .nbrp-tab-label, .nbrp-tab:focus-visible .nbrp-tab-label { opacity: 1; }
    .nbrp-tabs .nbrp-tab.is-current { background: var(--nbrp-dark); border-color: var(--nbrp-dark); color: #fff; }
    .nbrp-tab.is-current .nbrp-tab-label { color: inherit; font-weight: bold; }
    .nbrp-content { margin-top: 0; padding: 12px 12px 10px; overflow-x: auto; }
    .nbrp-footer { text-align: center; font-size: 12px; }

    .home { display: block; }
    .home-news { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--nbrp-rule); margin-bottom: 16px; padding-bottom: 8px; }
    .nbrp-chart-host { padding-left: 0; }

    /* ---- alte Inhaltsseiten am Telefon: feste Breiten vollständig auflösen, Layouttabellen stapeln ---- */
    .nbrp-content div[style*="width"], .nbrp-content p[style*="width"], .nbrp-content span[style*="width"]:not(.nbrp-bar-fill):not([style*="inline-block"]),
    .nbrp-content ul[style*="width"], .nbrp-content div[width], .nbrp-content .HomeTitle { width: auto !important; }
    /* (inline-block-Spans mit Breite sind Feldbeschriftungen gleicher Breite, z.B. Contact - die bleiben, sonst stehen die Felder treppenförmig) */
    .nbrp-content div[style*="height"]:not(#map):not(.nbrp-collapsible), .nbrp-content span[style*="height"], .nbrp-content td[style*="height"] { height: auto !important; min-height: 0 !important; }
    /* (.nbrp-collapsible: Ziel eines CollapsiblePanelExtenders - der steuert die Höhe selbst per style-Attribut, z.B. access) */
    .nbrp-content textarea { width: 100% !important; }
    /* Tabellen: Zellen untereinander (nicht auf den breiten Datenseiten der Wide-Masterseite) */
    body:not(.nbrp-wide) .nbrp-content table, body:not(.nbrp-wide) .nbrp-content thead, body:not(.nbrp-wide) .nbrp-content tbody,
    body:not(.nbrp-wide) .nbrp-content tr, body:not(.nbrp-wide) .nbrp-content th, body:not(.nbrp-wide) .nbrp-content td {
        display: block; width: auto !important; max-width: 100% !important; box-sizing: border-box; height: auto !important;
    }
    body:not(.nbrp-wide) .nbrp-content td, body:not(.nbrp-wide) .nbrp-content th { padding: 3px 4px; text-align: left; }
    body:not(.nbrp-wide) .nbrp-content td:empty { display: none; }
    body:not(.nbrp-wide) .nbrp-content td.nbrp-sp { display: none; }
    body:not(.nbrp-wide) .nbrp-content tr { margin-bottom: 4px; border-bottom: 1px solid #E4E4E4; }
    body:not(.nbrp-wide) .nbrp-content tr:last-child { border-bottom: 0; }
    /* Ausnahmen per Klasse in der Seite:  nbrp-chips = kurze Zellen nebeneinander (Chromosomen, Marker),
       nbrp-datatable = echte Datenmatrix bleibt Tabelle und rollt in ihrem eigenen Kasten */
    body:not(.nbrp-wide) .nbrp-content table.nbrp-chips tr { border: 0; margin: 0; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-chips td, body:not(.nbrp-wide) .nbrp-content table.nbrp-chips th { display: inline-block; padding: 3px 9px 3px 0; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable { display: block; overflow-x: auto; max-width: 100% !important; width: auto !important; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable tbody { display: table; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable tr { display: table-row; margin: 0; border: 0; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable td, body:not(.nbrp-wide) .nbrp-content table.nbrp-datatable th { display: table-cell; width: auto !important; white-space: nowrap; }
    /* nbrp-table = schmale Tabelle bleibt Tabelle (z.B. zwei Spalten Name/Abkürzung auf repository) */
    body:not(.nbrp-wide) .nbrp-content table.nbrp-table { display: table; width: auto !important; max-width: 100% !important; border-collapse: collapse; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-table tbody { display: table-row-group; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-table tr { display: table-row; margin: 0; border: 0; }
    body:not(.nbrp-wide) .nbrp-content table.nbrp-table td, body:not(.nbrp-wide) .nbrp-content table.nbrp-table th { display: table-cell; width: auto !important; padding: 4px 10px; }
}