/* ================================================================
   sicherheit-im-internet.de | Hauptstylesheet
   Maxbreite: 1024px | Responsive ab 768px
   Retro-Design ~2010 mit modernem Fundament
   ================================================================ */

/* --- Reset & Basis --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #2e2e2e;
    background-color: #d6dce4;
    background-image: repeating-linear-gradient(
        135deg, transparent, transparent 3px,
        rgba(0,0,0,0.018) 3px, rgba(0,0,0,0.018) 6px
    );
}

a { color: #1a5f8a; text-decoration: underline; }
a:hover { color: #38872e; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.5em; }

/* --- Wrapper --- */
#wrapper {
    max-width: 1024px;
    margin: 0 auto;
    background-color: #f0f2f5;
    box-shadow: 0 0 14px rgba(0,0,0,0.3);
}

/* ================================================================
   HEADER
   ================================================================ */
#header {
    background: linear-gradient(to bottom, #12528b 0%, #1e6aab 65%, #0e4070 100%);
    border-bottom: 3px solid #38872e;
}

#header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px 11px;
}

#logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

#logo img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

#logo-text h1 {
    font-size: 21px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.45);
    letter-spacing: -0.3px;
    line-height: 1.2;
}

#logo-text span {
    font-size: 11px;
    color: #9ec4e0;
    display: block;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

#header-claim {
    font-size: 11px;
    color: #9ec4e0;
    text-align: right;
    line-height: 1.5;
    max-width: 250px;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
#nav {
    background-color: #0d2e50;
    border-top: 1px solid #163a64;
    position: relative;
    z-index: 100;
}

#nav-toggle {
    display: none;
    width: 100%;
    background: #38872e;
    border: none;
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

#nav-toggle::after { content: " ▾"; }

#nav-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
    margin: 0;
}

#nav-menu > li { position: relative; }

#nav-menu > li > a {
    display: block;
    padding: 9px 12px;
    color: #b8d4ee;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    border-right: 1px solid #163a64;
    white-space: nowrap;
}

#nav-menu > li > a:hover,
#nav-menu > li > a.active {
    background-color: #38872e;
    color: #fff;
    text-decoration: none;
}

/* Dropdown */
#nav-menu > li > ul.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background-color: #0d2e50;
    min-width: 215px;
    border: 1px solid #2d5a8a;
    border-top: 2px solid #38872e;
    z-index: 300;
    padding: 0;
    box-shadow: 3px 4px 10px rgba(0,0,0,0.45);
}

#nav-menu > li:hover > ul.dropdown { display: block; }

#nav-menu > li > ul.dropdown > li > a {
    display: block;
    padding: 8px 14px;
    color: #b8d4ee;
    text-decoration: none;
    font-size: 12px;
    border-bottom: 1px solid #1d3e62;
    white-space: nowrap;
}

#nav-menu > li > ul.dropdown > li:last-child > a { border-bottom: none; }

#nav-menu > li > ul.dropdown > li > a:hover {
    background-color: #38872e;
    color: #fff;
    text-decoration: none;
}

/* ================================================================
   ZWEISPALTIGES LAYOUT
   ================================================================ */
#content-wrapper {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

#main {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #ffffff;
    border-right: 1px solid #c4d0dc;
    padding: 20px 22px 26px;
}

#sidebar {
    flex: 0 0 238px;
    width: 238px;
    background-color: #f4f6fa;
    padding: 16px 13px;
    border-left: 1px solid #c4d0dc;
}

/* ================================================================
   HERO-BILD
   ================================================================ */
.hero {
    width: 100%;
    height: 195px;
    background: linear-gradient(135deg, #0f2d50 0%, #1e6aab 55%, #4488bb 100%);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
    border: 1px solid #b0bfce;
}

.hero img { width: 100%; height: 100%; object-fit: cover; }

.hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: 6px;
}

.hero-placeholder span {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-style: italic;
}

.hero-placeholder .hero-icon { font-size: 36px; opacity: 0.4; }

/* ================================================================
   BREADCRUMBS
   ================================================================ */
.breadcrumb {
    font-size: 11px;
    color: #888;
    margin-bottom: 13px;
    padding: 4px 0 8px;
    border-bottom: 1px dotted #d0d8e0;
}

.breadcrumb a { color: #1a5f8a; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 5px; color: #bbb; }

/* ================================================================
   TYPOGRAFIE HAUPTCONTENT
   ================================================================ */
#main h1 {
    font-size: 20px;
    color: #0f2d50;
    border-bottom: 2px solid #38872e;
    padding-bottom: 7px;
    margin-bottom: 15px;
    line-height: 1.3;
}

#main h2 {
    font-size: 15px;
    color: #0f2d50;
    border-left: 4px solid #38872e;
    padding-left: 9px;
    margin: 22px 0 9px;
    line-height: 1.3;
}

#main h3 {
    font-size: 14px;
    color: #0f2d50;
    margin: 14px 0 5px;
    font-weight: bold;
}

#main p { margin-bottom: 11px; }
#main ul, #main ol { margin-bottom: 11px; }
#main li { margin-bottom: 3px; }

.intro-text {
    font-size: 14px;
    color: #444;
    border-left: 3px solid #c4d0dc;
    padding: 9px 13px;
    background-color: #f7f9fb;
    margin-bottom: 17px;
    line-height: 1.7;
}

.infobox {
    background-color: #edf4fb;
    border: 1px solid #aac4de;
    border-left: 4px solid #1e6aab;
    padding: 11px 13px;
    margin: 14px 0;
    font-size: 13px;
}

.infobox strong { color: #0f2d50; }

.warnbox {
    background-color: #fff8ee;
    border: 1px solid #f0c070;
    border-left: 4px solid #38872e;
    padding: 11px 13px;
    margin: 14px 0;
    font-size: 13px;
}

.warnbox strong { color: #1f5a18; }

/* Inhaltsbilder */
.content-img {
    float: right;
    margin: 0 0 12px 16px;
    max-width: 210px;
    border: 1px solid #c4d0dc;
    padding: 4px;
    background: #fff;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
}

.content-img img { width: 100%; }

.content-img figcaption {
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 4px 0 0;
    font-style: italic;
}

.clearfix::after { content: ""; display: table; clear: both; }

/* ================================================================
   THEMEN-ÜBERSICHT (Startseite)
   ================================================================ */
.themen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 20px;
}

.themen-card {
    border: 1px solid #c4d0dc;
    background-color: #fafcfe;
    padding: 11px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.12s, background-color 0.12s;
}

.themen-card:hover {
    border-color: #1e6aab;
    background-color: #edf4fb;
    text-decoration: none;
}

.themen-card .card-icon {
    font-size: 20px;
    margin-bottom: 5px;
    display: block;
    line-height: 1;
}

.themen-card h3 {
    font-size: 13px;
    color: #0f2d50;
    margin: 0 0 3px;
    font-weight: bold;
    line-height: 1.2;
}

.themen-card p {
    font-size: 11px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* ================================================================
   PRODUKTBOXEN
   ================================================================ */
.produkte-section {
    margin-top: 26px;
    border-top: 2px solid #dde4ec;
    padding-top: 16px;
}

.produkte-section > h2 {
    font-size: 15px;
    color: #0f2d50;
    margin-bottom: 6px;
    border-left: none;
    padding-left: 0;
    border-bottom: 1px solid #dde4ec;
    padding-bottom: 6px;
}

.affiliate-hinweis {
    font-size: 11px;
    color: #999;
    margin-bottom: 13px;
    font-style: italic;
}

.produkt-liste { display: flex; flex-direction: column; gap: 12px; }

.product-box {
    display: flex;
    gap: 13px;
    border: 1px solid #c4d0dc;
    background-color: #fafcfe;
    padding: 13px;
}

.product-box:hover { border-color: #1e6aab; background-color: #f0f6fc; }

.product-box .product-image { flex: 0 0 105px; }

.product-box .product-image img {
    width: 105px;
    height: 105px;
    object-fit: contain;
    border: 1px solid #dde4ec;
    background: #fff;
    padding: 4px;
}

.product-box .product-info { flex: 1; min-width: 0; }

.product-box h3 {
    font-size: 14px;
    color: #0f2d50;
    margin: 0 0 4px;
    line-height: 1.3;
    font-weight: bold;
    border: none;
    padding: 0;
}

.product-box .product-intro {
    font-size: 12px;
    color: #444;
    margin-bottom: 7px;
}

.product-box .pros-cons {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}

.product-box .pros,
.product-box .cons {
    flex: 1;
    font-size: 12px;
}

.product-box .pros h4,
.product-box .cons h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 3px;
    font-weight: bold;
}

.product-box .pros ul,
.product-box .cons ul { list-style: none; padding: 0; margin: 0; }

.product-box .pros li::before { content: "+ "; color: #2a7a2a; font-weight: bold; }
.product-box .cons li::before { content: "– "; color: #b03030; font-weight: bold; }
.product-box .pros li, .product-box .cons li { margin-bottom: 2px; color: #444; }

.product-box .product-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dotted #d0d8e0;
    gap: 10px;
}

.product-box .product-price {
    font-size: 13px;
    color: #b03030;
    font-weight: bold;
    line-height: 1.3;
}

.product-box .product-price .price-note {
    font-size: 10px;
    color: #999;
    font-weight: normal;
    display: block;
}

.btn-amazon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(to bottom, #f7ca45 0%, #f0a921 100%);
    color: #111 !important;
    text-decoration: none !important;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #c8922a;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.btn-amazon::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 14px;
    background-image: url('img/amazon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}

.btn-amazon:hover {
    background: linear-gradient(to bottom, #f9d057 0%, #e8991a 100%);
    color: #111 !important;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar-widget {
    margin-bottom: 15px;
    border: 1px solid #c4d0dc;
    background-color: #ffffff;
}

.sidebar-widget-title {
    background: linear-gradient(to bottom, #12528b, #1e6aab);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sidebar-widget-body { padding: 9px 10px; font-size: 12px; }

.sidebar-widget-body ul { list-style: none; padding: 0; margin: 0; }

.sidebar-widget-body ul li {
    border-bottom: 1px dotted #c4d0dc;
    padding: 5px 0;
    line-height: 1.4;
}

.sidebar-widget-body ul li:last-child { border-bottom: none; }

.sidebar-widget-body a { color: #1a5f8a; text-decoration: none; font-size: 12px; }
.sidebar-widget-body a:hover { color: #38872e; }

.sidebar-widget-body p {
    font-size: 12px;
    color: #555;
    margin-bottom: 7px;
    line-height: 1.5;
}

.sidebar-widget-body p:last-child { margin-bottom: 0; }

/* Warn-Widget – gleicher Titel wie andere Sidebar-Widgets */

/* ================================================================
   FOOTER
   ================================================================ */
#footer {
    background-color: #0d2e50;
    border-top: 3px solid #38872e;
    padding: 16px 20px;
    color: #a0b8ce;
    font-size: 12px;
}

#footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

#footer-left p { margin-bottom: 4px; }
#footer-left a { color: #a0b8ce; }
#footer-left a:hover { color: #38872e; }

#footer-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

#footer-links a {
    color: #a0b8ce;
    text-decoration: none;
    font-size: 12px;
}

#footer-links a:hover { color: #38872e; }
#footer-links .sep { color: #3a5878; }

#footer-affiliate {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #243e5e;
    font-size: 11px;
    color: #607888;
    line-height: 1.55;
}

/* ================================================================
   COOKIE-BANNER
   ================================================================ */
#cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0d2e50;
    color: #c0d4e8;
    padding: 10px 20px;
    font-size: 12px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 2px solid #38872e;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}

#cookie-notice a { color: #80b4d8; }

#cookie-notice button {
    background: #38872e;
    border: 1px solid #b35500;
    color: #fff;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    flex-shrink: 0;
    font-family: inherit;
}

#cookie-notice button:hover { background: #257020; }

/* ================================================================
   IMPRESSUM / DATENSCHUTZ
   ================================================================ */
.legal-section {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dde4ec;
}

.legal-section:last-child { border-bottom: none; }

.legal-section h2 {
    font-size: 17px;
    color: #0f2d50;
    border-bottom: 2px solid #38872e;
    padding-bottom: 6px;
    margin-bottom: 14px;
    border-left: none;
    padding-left: 0;
}

.legal-section h3 {
    font-size: 14px;
    color: #0f2d50;
    margin: 14px 0 5px;
    font-weight: bold;
}

.legal-section p { margin-bottom: 10px; font-size: 13px; }
.legal-section ul { margin-bottom: 10px; font-size: 13px; }
.legal-section li { margin-bottom: 3px; }

/* ================================================================
   RESPONSIVE < 768px
   ================================================================ */
@media (max-width: 768px) {
    #header-claim { display: none; }
    #logo-text h1 { font-size: 17px; }
    #logo img { width: 40px; height: 40px; }

    #nav-toggle { display: block; }

    #nav-menu {
        display: none;
        flex-direction: column;
        padding: 0;
    }

    #nav-menu.open { display: flex; }

    #nav-menu > li > a {
        border-right: none;
        border-bottom: 1px solid #163a64;
        padding: 10px 16px;
    }

    #nav-menu > li > ul.dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background-color: #0e2438;
    }

    #nav-menu > li.open-sub > ul.dropdown { display: block; }

    #nav-menu > li > ul.dropdown > li > a {
        padding-left: 26px;
        border-bottom: 1px solid #162840;
    }

    #content-wrapper { flex-direction: column; }

    #main {
        border-right: none;
        border-bottom: 1px solid #c4d0dc;
        padding: 14px 14px 20px;
    }

    #sidebar { width: 100%; flex: none; }

    .themen-grid { grid-template-columns: repeat(2, 1fr); }

    .product-box { flex-direction: column; }
    .product-box .product-image { flex: none; }

    .content-img {
        float: none;
        max-width: 100%;
        margin: 0 0 12px 0;
    }

    .hero { height: 145px; }

    #footer-inner { flex-direction: column; gap: 10px; }

    #cookie-notice { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .themen-grid { grid-template-columns: 1fr 1fr; }
    .pros-cons { flex-direction: column; }
    #main h1 { font-size: 18px; }
}


/* ================================================================
   LIGHTBOX
   ================================================================ */
#lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#lb-overlay.lb-visible {
    display: flex;
}

#lb-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#lb-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 4px 32px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.12);
}

#lb-caption {
    color: #ccc;
    font-size: 13px;
    font-family: Arial, sans-serif;
    text-align: center;
    max-width: 600px;
    margin: 0;
}

#lb-close {
    position: absolute;
    top: -38px;
    right: 0;
    background: none;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 18px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    line-height: 1;
    font-family: Arial, sans-serif;
}

#lb-close:hover {
    background: rgba(255,255,255,0.15);
}

/* Zoom-Hinweis auf content-img hover */
.content-img img:hover {
    opacity: 0.9;
    outline: 2px solid #12528b;
}

/* ================================================================
   SKIP-TO-CONTENT
   ================================================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    background: #12528b;
    color: #fff;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 9999;
    transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* ================================================================
   BACK TO TOP
   ================================================================ */
#back-to-top {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #12528b;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 500;
    font-family: Arial, sans-serif;
    line-height: 1;
}
#back-to-top.visible { display: flex; }
#back-to-top:hover { background: #0e3d6b; }

/* ================================================================
   INHALTSVERZEICHNIS
   ================================================================ */
.toc {
    background: #f4f6fa;
    border: 1px solid #c4d0dc;
    border-left: 4px solid #12528b;
    padding: 13px 16px;
    margin: 16px 0 22px;
    font-size: 13px;
}
.toc strong {
    display: block;
    font-size: 13px;
    color: #0f2d50;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.toc ol {
    margin: 0;
    padding-left: 1.4em;
}
.toc li { margin-bottom: 4px; }
.toc a { color: #12528b; text-decoration: none; }
.toc a:hover { text-decoration: underline; color: #38872e; }

/* ================================================================
   SHARE-BUTTONS
   ================================================================ */
.share-section {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 2px solid #dde4ec;
}
.share-section p {
    font-size: 12px;
    color: #888;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: bold;
}
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Gleichbreite Buttons im Sidebar-Grid */
.share-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.share-buttons-grid .share-btn {
    justify-content: center;
    padding: 7px 4px;
    font-size: 12px;
    gap: 4px;
}

/* Link-kopieren-Button: dunkler Hintergrund für weißen Text */
.share-copy {
    background: #4a5568;
    color: #fff !important;
    border: none;
}
.share-copy:hover { background: #2d3748; color: #fff !important; }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    color: #fff !important;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    line-height: 1.3;
}
.share-btn:hover { color: #fff !important; }
.share-btn svg { flex-shrink: 0; }
.share-fb   { background: #1251a3; color: #fff; }
.share-fb:hover { background: #0e3d80; color: #fff; }
.share-li   { background: #084d92; color: #fff; }
.share-li:hover { background: #063a70; color: #fff; }
.share-wa   { background: #075e54; color: #fff; }
.share-wa:hover { background: #054840; color: #fff; }
.share-tg   { background: #0d6e9a; color: #fff; }
.share-tg:hover { background: #095678; color: #fff; }
.share-xing { background: #004d4f; color: #fff; }
.share-xing:hover { background: #003638; color: #fff; }
.share-mail { background: #555; color: #fff; }
.share-mail:hover { background: #333; color: #fff; }
.share-native { background: #38872e; color: #fff; display: none; }
.share-native:hover { background: #2a6820; color: #fff; }

@media (max-width: 480px) {
    .share-buttons { gap: 5px; }
    .share-btn { font-size: 11px; padding: 5px 8px; }
}

/* ================================================================
   PRINT CSS
   ================================================================ */

/* ============================================================
   TABELLEN - content-table
   ============================================================ */

.content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 0.5rem;
    font-size: 0.93rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.content-table thead tr {
    background: #12528b;
    color: #fff;
    text-align: left;
}

.content-table thead th {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.content-table tbody tr {
    border-bottom: 1px solid #e8edf2;
    transition: background 0.15s;
}

.content-table tbody tr:last-child {
    border-bottom: none;
}

.content-table tbody tr:nth-child(odd) {
    background: #f7fafc;
}

.content-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.content-table tbody tr:hover {
    background: #eaf2fb;
}

.content-table td {
    padding: 11px 16px;
    vertical-align: top;
    line-height: 1.5;
    color: #2c3e50;
}

.content-table td:first-child {
    font-weight: 600;
    color: #12528b;
    white-space: nowrap;
}

.content-table + p[style] {
    margin-top: 0.25rem;
    font-size: 11px;
    color: #888;
}

/* Responsive: horizontal scroll auf kleinen Screens */
@media (max-width: 600px) {
    .content-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }

    .content-table thead th,
    .content-table td {
        padding: 9px 12px;
        white-space: normal;
    }

    .content-table td:first-child {
        white-space: normal;
    }
}

/* Print */
@media print {
    .content-table { box-shadow: none; }
    .content-table thead tr { background: #eee !important; color: #000 !important; }
    .content-table tbody tr:nth-child(odd) { background: #f9f9f9 !important; }
}

@media print {
    #nav, #sidebar, #back-to-top,
    #lb-overlay, #cookie-notice, .btn-amazon,
    .produkte-section, #footer-affiliate { display: none !important; }

    body { background: #fff; font-size: 12pt; color: #000; }
    #wrapper { box-shadow: none; max-width: 100%; }
    #header { background: #fff; border-bottom: 2pt solid #000; }
    #logo-text h1 { color: #000; text-shadow: none; font-size: 16pt; }
    #logo-text span { color: #555; }
    #header-claim { display: none; }
    #main { border: none; padding: 0; }
    #content-wrapper { display: block; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    .hero { display: none; }
    .infobox, .warnbox { border: 1pt solid #000; background: #f5f5f5; }
    h1 { font-size: 18pt; }
    h2 { font-size: 14pt; }
    h3 { font-size: 12pt; }
    .toc { break-inside: avoid; }
}