/* theme.css — bestescasino.net — Hauptstylesheet (Design-Vorschau 1:1) */

/* ============================================================
   WRAPPER
   ============================================================ */
body .wrapper { min-height: 100vh; background-color: #F7F3EF; }

/* ============================================================
   UTILITY BAR (18+ & Compliance)
   ============================================================ */
body .wrapper .utility-bar { background-color: #2A1A16; padding: 7px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
body .wrapper .utility-bar .utility-left { display: flex; align-items: center; gap: 16px; }
body .wrapper .utility-bar .utility-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; background-color: #8E3B2F; color: #F7F3EF; font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.02em; flex-shrink: 0; }
body .wrapper .utility-bar .utility-text { font-family: 'Work Sans', sans-serif; font-size: 11px; color: #C4A99A; font-weight: 400; }
body .wrapper .utility-bar .utility-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
body .wrapper .utility-bar .utility-link { font-family: 'Work Sans', sans-serif; font-size: 11px; color: #C4A99A; text-decoration: none; transition: color 0.2s; }
body .wrapper .utility-bar .utility-link:hover { color: #D9A24B; text-decoration: none; }
body .wrapper .utility-bar .utility-help { display: flex; align-items: center; gap: 6px; }
body .wrapper .utility-bar .utility-help .help-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #D9A24B; animation: pulse 2s infinite; flex-shrink: 0; }
body .wrapper .utility-bar .utility-help .help-text { font-family: 'Work Sans', sans-serif; font-size: 11px; color: #C4A99A; }

/* ============================================================
   AFFILIATE NOTICE (Header-Banner)
   ============================================================ */
body .wrapper .affiliate-notice { background-color: rgba(217, 162, 75, 0.15); border-bottom: 1px solid rgba(217, 162, 75, 0.3); padding: 7px 24px; text-align: center; }
body .wrapper .affiliate-notice .notice-text { font-family: 'Work Sans', sans-serif; font-size: 11px; color: #6B4226; font-weight: 400; }
body .wrapper .affiliate-notice .notice-text strong { font-weight: 600; color: #2A1A16; }

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
body .wrapper .site-header { background-color: #F7F3EF; border-bottom: 1px solid rgba(42, 26, 22, 0.12); position: sticky; top: 0; z-index: 100; }
body .wrapper .site-header .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
body .wrapper .site-header .site-logo { display: flex; flex-direction: column; gap: 0; text-decoration: none; }
body .wrapper .site-header .site-logo .logo-name { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 20px; color: #2A1A16; letter-spacing: -0.03em; line-height: 1; }
body .wrapper .site-header .site-logo .logo-claim { font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 10px; color: #8E3B2F; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; margin-top: 3px; }
body .wrapper .site-header .site-nav { display: none; }
body .wrapper .site-header .site-nav .nav-list { display: flex; align-items: center; gap: 4px; }
body .wrapper .site-header .site-nav .nav-list .nav-item { display: flex; }
body .wrapper .site-header .site-nav .nav-list .nav-item .nav-link,
body .wrapper .site-header .site-nav .nav-list li a { font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 13px; color: #2A1A16; text-decoration: none; padding: 8px 14px; border-radius: 4px; transition: background-color 0.18s, color 0.18s; letter-spacing: 0.01em; display: block; }
body .wrapper .site-header .site-nav .nav-list .nav-item .nav-link:hover,
body .wrapper .site-header .site-nav .nav-list li a:hover { background-color: rgba(142, 59, 47, 0.08); color: #8E3B2F; text-decoration: none; }
body .wrapper .site-header .site-nav .nav-list .nav-item .nav-link.active { color: #8E3B2F; font-weight: 600; }
body .wrapper .site-header .header-cta { background-color: #8E3B2F; color: #F7F3EF; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 4px; text-decoration: none; transition: background-color 0.2s; letter-spacing: 0.01em; cursor: pointer; display: none; }
body .wrapper .site-header .header-cta:hover { background-color: #6E2D22; text-decoration: none; }
body .wrapper .site-header .mobile-menu-toggle { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
body .wrapper .site-header .mobile-menu-toggle .bar { width: 22px; height: 2px; background-color: #2A1A16; border-radius: 2px; transition: 0.2s; }

/* ============================================================
   HERO
   ============================================================ */
body .wrapper .hero { background-color: #2A1A16; padding: 60px 24px 64px; position: relative; overflow: hidden; }
body .wrapper .hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(142, 59, 47, 0.3) 0%, transparent 70%); pointer-events: none; }
body .wrapper .hero::after { content: ''; position: absolute; bottom: -60px; left: -40px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 162, 75, 0.12) 0%, transparent 70%); pointer-events: none; }
body .wrapper .hero .hero-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
body .wrapper .hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; animation: fadeInUp 0.5s ease both; }
body .wrapper .hero .hero-eyebrow .eyebrow-line { width: 28px; height: 1px; background-color: #D9A24B; }
body .wrapper .hero .hero-eyebrow .eyebrow-text { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #D9A24B; letter-spacing: 0.15em; text-transform: uppercase; }
body .wrapper .hero .hero-heading { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 36px; color: #F7F3EF; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; animation: fadeInUp 0.55s 0.1s ease both; }
body .wrapper .hero .hero-heading .accent { color: #D9A24B; font-style: italic; }
body .wrapper .hero .hero-subtext { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px; color: rgba(247, 243, 239, 0.75); line-height: 1.65; max-width: 560px; margin-bottom: 36px; animation: fadeInUp 0.55s 0.2s ease both; }
body .wrapper .hero .hero-stats { display: flex; flex-wrap: wrap; gap: 20px 36px; animation: fadeInUp 0.55s 0.3s ease both; }
body .wrapper .hero .hero-stats .stat { display: flex; flex-direction: column; gap: 2px; }
body .wrapper .hero .hero-stats .stat .stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; color: #D9A24B; line-height: 1; }
body .wrapper .hero .hero-stats .stat .stat-label { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 12px; color: rgba(247, 243, 239, 0.55); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   COMPLIANCE CLARIFICATION BAND
   ============================================================ */
body .wrapper .compliance-band { background-color: #F0E9E0; border-top: 3px solid #D9A24B; border-bottom: 1px solid rgba(42, 26, 22, 0.1); padding: 16px 24px; }
body .wrapper .compliance-band .compliance-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: flex-start; gap: 14px; }
body .wrapper .compliance-band .compliance-icon { flex-shrink: 0; margin-top: 2px; }
body .wrapper .compliance-band .compliance-text { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #4A2E1E; line-height: 1.55; font-weight: 400; }
body .wrapper .compliance-band .compliance-text strong { font-weight: 600; color: #2A1A16; }

/* ============================================================
   MATRIX SECTION
   ============================================================ */
body .wrapper .matrix-section { padding: 48px 24px 64px; }
body .wrapper .matrix-section .matrix-inner { max-width: 1280px; margin: 0 auto; }
body .wrapper .matrix-section .section-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
body .wrapper .matrix-section .section-header .section-eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #8E3B2F; letter-spacing: 0.15em; text-transform: uppercase; }
body .wrapper .matrix-section .section-header .section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 28px; color: #2A1A16; letter-spacing: -0.02em; }
body .wrapper .matrix-section .section-header .section-desc { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #6B4226; line-height: 1.55; max-width: 560px; }

/* Filter Chips */
body .wrapper .matrix-section .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center; }
body .wrapper .matrix-section .filter-bar .filter-label { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #8E3B2F; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; flex-shrink: 0; }
body .wrapper .matrix-section .filter-bar .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(42, 26, 22, 0.18); background-color: #fff; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 500; color: #2A1A16; cursor: pointer; transition: all 0.18s; user-select: none; }
body .wrapper .matrix-section .filter-bar .filter-chip:hover { border-color: #8E3B2F; color: #8E3B2F; }
body .wrapper .matrix-section .filter-bar .filter-chip.active { background-color: #8E3B2F; border-color: #8E3B2F; color: #F7F3EF; }
body .wrapper .matrix-section .filter-bar .filter-chip .chip-count { background-color: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 600; }
body .wrapper .matrix-section .filter-bar .filter-chip.active .chip-count { background-color: rgba(255,255,255,0.2); }

/* Table */
body .wrapper .matrix-section .table-wrapper { overflow-x: auto; border-radius: 8px; box-shadow: 0 2px 16px rgba(42, 26, 22, 0.08); border: 1px solid rgba(42, 26, 22, 0.1); }
body .wrapper .matrix-section .table-wrapper .compare-table { width: 100%; border-collapse: collapse; background-color: #fff; min-width: 720px; }
body .wrapper .matrix-section .table-wrapper .compare-table thead th { background-color: #2A1A16; padding: 13px 16px; text-align: left; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #C4A99A; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid #8E3B2F; white-space: nowrap; }
body .wrapper .matrix-section .table-wrapper .compare-table tbody tr { border-bottom: 1px solid rgba(42, 26, 22, 0.07); transition: background-color 0.15s; }
body .wrapper .matrix-section .table-wrapper .compare-table tbody tr:last-child { border-bottom: none; }
body .wrapper .matrix-section .table-wrapper .compare-table tbody tr:hover { background-color: rgba(247, 243, 239, 0.7); }
body .wrapper .matrix-section .table-wrapper .compare-table tbody tr.hidden-row { display: none; }
body .wrapper .matrix-section .table-wrapper .compare-table tbody td { padding: 14px 16px; font-family: 'Work Sans', sans-serif; font-size: 13px; color: #2A1A16; vertical-align: middle; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell { display: flex; align-items: center; gap: 12px; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell .provider-logo { width: 80px; height: 46px; border-radius: 8px; background-color: #F7F3EF; border: 1px solid rgba(42, 26, 22, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 6px; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell .provider-logo .logo-initials { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 13px; color: #8E3B2F; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell .provider-info { display: flex; flex-direction: column; gap: 2px; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell .provider-name { font-weight: 600; font-size: 14px; color: #2A1A16; }
body .wrapper .matrix-section .table-wrapper .compare-table .provider-cell .provider-tag { font-size: 10px; color: #8E3B2F; font-weight: 500; letter-spacing: 0.04em; }
body .wrapper .matrix-section .table-wrapper .compare-table .score-cell { display: flex; align-items: center; gap: 8px; }
body .wrapper .matrix-section .table-wrapper .compare-table .score-cell .score-bar-track { width: 60px; height: 4px; background-color: rgba(42, 26, 22, 0.1); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
body .wrapper .matrix-section .table-wrapper .compare-table .score-cell .score-bar-fill { height: 100%; border-radius: 2px; background-color: #8E3B2F; }
body .wrapper .matrix-section .table-wrapper .compare-table .score-cell .score-num { font-weight: 600; font-size: 14px; color: #2A1A16; }
body .wrapper .matrix-section .table-wrapper .compare-table .badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
body .wrapper .matrix-section .table-wrapper .compare-table .badge-green { background-color: rgba(40, 130, 80, 0.12); color: #1A6B42; }
body .wrapper .matrix-section .table-wrapper .compare-table .badge-amber { background-color: rgba(217, 162, 75, 0.18); color: #7A5510; }
body .wrapper .matrix-section .table-wrapper .compare-table .badge-ggl { background-color: rgba(142, 59, 47, 0.1); color: #6E2D22; }
body .wrapper .matrix-section .table-wrapper .compare-table .cta-col { text-align: right; white-space: nowrap; }
body .wrapper .matrix-section .table-wrapper .compare-table .cta-col .table-cta { display: inline-block; background-color: #8E3B2F; color: #F7F3EF; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 12px; padding: 7px 16px; border-radius: 4px; text-decoration: none; transition: background-color 0.18s; cursor: pointer; }
body .wrapper .matrix-section .table-wrapper .compare-table .cta-col .table-cta:hover { background-color: #6E2D22; text-decoration: none; }
body .wrapper .matrix-section .matrix-note { margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; }
body .wrapper .matrix-section .matrix-note .note-icon { flex-shrink: 0; margin-top: 1px; }
body .wrapper .matrix-section .matrix-note .note-text { font-family: 'Work Sans', sans-serif; font-size: 12px; color: #6B4226; line-height: 1.5; }

/* ============================================================
   RATGEBER HUB SECTION
   ============================================================ */
body .wrapper .ratgeber-section { padding: 56px 24px; background-color: #EDE5D8; }
body .wrapper .ratgeber-section .ratgeber-inner { max-width: 1280px; margin: 0 auto; }
body .wrapper .ratgeber-section .section-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }
body .wrapper .ratgeber-section .section-header .section-eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #8E3B2F; letter-spacing: 0.15em; text-transform: uppercase; }
body .wrapper .ratgeber-section .section-header .section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 28px; color: #2A1A16; letter-spacing: -0.02em; }
body .wrapper .ratgeber-section .ratgeber-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card { background-color: #fff; border-radius: 8px; padding: 24px; border: 1px solid rgba(42, 26, 22, 0.08); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(42, 26, 22, 0.1); text-decoration: none; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-icon { width: 44px; height: 44px; border-radius: 8px; background-color: rgba(142, 59, 47, 0.08); display: flex; align-items: center; justify-content: center; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-content { display: flex; flex-direction: column; gap: 6px; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-label { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 10px; color: #8E3B2F; letter-spacing: 0.12em; text-transform: uppercase; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 17px; color: #2A1A16; line-height: 1.25; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-desc { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #6B4226; line-height: 1.55; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-arrow { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
body .wrapper .ratgeber-section .ratgeber-grid .ratgeber-card .card-arrow .arrow-text { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 12px; color: #8E3B2F; }

/* ============================================================
   AUTHORS / METHODIK SECTION
   ============================================================ */
body .wrapper .authors-section { padding: 56px 24px; background-color: #F7F3EF; }
body .wrapper .authors-section .authors-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
body .wrapper .authors-section .authors-intro { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
body .wrapper .authors-section .authors-intro .section-eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #8E3B2F; letter-spacing: 0.15em; text-transform: uppercase; }
body .wrapper .authors-section .authors-intro .section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 28px; color: #2A1A16; letter-spacing: -0.02em; }
body .wrapper .authors-section .authors-intro .section-text { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #6B4226; line-height: 1.65; }
body .wrapper .authors-section .authors-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
body .wrapper .authors-section .authors-grid .author-card { background-color: #fff; border-radius: 8px; padding: 24px; border: 1px solid rgba(42, 26, 22, 0.08); display: flex; gap: 20px; align-items: flex-start; }
body .wrapper .authors-section .authors-grid .author-card .author-avatar { width: 56px; height: 56px; border-radius: 50%; background-color: #2A1A16; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
body .wrapper .authors-section .authors-grid .author-card .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
body .wrapper .authors-section .authors-grid .author-card .author-avatar .avatar-initials { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 18px; color: #D9A24B; }
body .wrapper .authors-section .authors-grid .author-card .author-info { display: flex; flex-direction: column; gap: 6px; }
body .wrapper .authors-section .authors-grid .author-card .author-info .author-name { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 17px; color: #2A1A16; }
body .wrapper .authors-section .authors-grid .author-card .author-info .author-role { font-family: 'Work Sans', sans-serif; font-size: 12px; color: #8E3B2F; font-weight: 500; letter-spacing: 0.04em; }
body .wrapper .authors-section .authors-grid .author-card .author-info .author-bio { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #6B4226; line-height: 1.55; margin-top: 4px; }
body .wrapper .authors-section .methodik-teaser { background-color: #2A1A16; border-radius: 8px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
body .wrapper .authors-section .methodik-teaser .methodik-label { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #D9A24B; letter-spacing: 0.15em; text-transform: uppercase; }
body .wrapper .authors-section .methodik-teaser .methodik-text { font-family: 'Work Sans', sans-serif; font-size: 14px; color: rgba(247, 243, 239, 0.8); line-height: 1.6; }
body .wrapper .authors-section .methodik-teaser .methodik-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 13px; color: #D9A24B; text-decoration: none; }
body .wrapper .authors-section .methodik-teaser .methodik-link:hover { text-decoration: underline; color: #D9A24B; }

/* ============================================================
   GENERIC CONTENT PAGE (Ratgeber / Anbieter)
   ============================================================ */
body .wrapper .page-content { max-width: 1280px; margin: 0 auto; padding: 48px 24px 72px; }
body .wrapper .page-content .page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(42, 26, 22, 0.1); }
body .wrapper .page-content .page-header .page-eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #8E3B2F; letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-bottom: 12px; }
body .wrapper .page-content .page-header h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 40px; color: #2A1A16; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
body .wrapper .page-content .page-header .page-intro { font-family: 'Work Sans', sans-serif; font-size: 17px; color: #6B4226; line-height: 1.65; max-width: 680px; }
body .wrapper .page-content .article-body h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; color: #2A1A16; letter-spacing: -0.01em; margin-top: 48px; margin-bottom: 16px; }
body .wrapper .page-content .article-body h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; color: #2A1A16; margin-top: 32px; margin-bottom: 12px; }
body .wrapper .page-content .article-body p { font-family: 'Work Sans', sans-serif; font-size: 15px; color: #3A2218; line-height: 1.75; margin-bottom: 20px; }
body .wrapper .page-content .article-body ul, body .wrapper .page-content .article-body ol { padding-left: 0; margin-bottom: 20px; }
body .wrapper .page-content .article-body li { font-family: 'Work Sans', sans-serif; font-size: 15px; color: #3A2218; line-height: 1.7; padding-left: 24px; position: relative; margin-bottom: 8px; list-style: none; }
body .wrapper .page-content .article-body ul li::before { content: '→'; position: absolute; left: 0; color: #8E3B2F; font-weight: 700; }
body .wrapper .page-content .article-body ol { counter-reset: ol-counter; }
body .wrapper .page-content .article-body ol li::before { counter-increment: ol-counter; content: counter(ol-counter) '.'; position: absolute; left: 0; color: #8E3B2F; font-weight: 700; font-size: 13px; top: 2px; }

/* Info/Warning Box */
body .wrapper .page-content .info-box { background-color: #F0E9E0; border-left: 4px solid #D9A24B; border-radius: 0 6px 6px 0; padding: 18px 22px; margin: 28px 0; }
body .wrapper .page-content .info-box p { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #4A2E1E; margin: 0; }
body .wrapper .page-content .warning-box { background-color: rgba(142, 59, 47, 0.08); border-left: 4px solid #8E3B2F; border-radius: 0 6px 6px 0; padding: 18px 22px; margin: 28px 0; }

/* Author Box */
body .wrapper .author-box { background-color: #fff; border-radius: 8px; padding: 24px; border: 1px solid rgba(42, 26, 22, 0.08); display: flex; gap: 20px; align-items: flex-start; margin-top: 48px; }
body .wrapper .author-box .author-avatar { width: 64px; height: 64px; border-radius: 50%; background-color: #2A1A16; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
body .wrapper .author-box .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
body .wrapper .author-box .author-avatar .avatar-initials { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; color: #D9A24B; }
body .wrapper .author-box .author-meta { display: flex; flex-direction: column; gap: 6px; }
body .wrapper .author-box .author-meta .author-label { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 10px; color: #8E3B2F; letter-spacing: 0.12em; text-transform: uppercase; }
body .wrapper .author-box .author-meta .author-name { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 18px; color: #2A1A16; }
body .wrapper .author-box .author-meta .author-role { font-family: 'Work Sans', sans-serif; font-size: 12px; color: #8E3B2F; font-weight: 500; }
body .wrapper .author-box .author-meta .author-bio { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #6B4226; line-height: 1.55; margin-top: 4px; }

/* Affiliate Disclosure Box (auf Anbieter-Seiten) */
body .wrapper .disclosure-box { background-color: rgba(217, 162, 75, 0.12); border: 1px solid rgba(217, 162, 75, 0.35); border-radius: 6px; padding: 14px 18px; margin-bottom: 32px; font-family: 'Work Sans', sans-serif; font-size: 13px; color: #5A3D1A; line-height: 1.55; }

/* Review Score Panel */
body .wrapper .review-score-panel { background-color: #2A1A16; border-radius: 8px; padding: 28px 24px; display: flex; align-items: center; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
body .wrapper .review-score-panel .score-big { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 56px; color: #D9A24B; line-height: 1; }
body .wrapper .review-score-panel .score-label { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
body .wrapper .review-score-panel .score-breakdown { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
body .wrapper .review-score-panel .score-row { display: flex; align-items: center; gap: 10px; }
body .wrapper .review-score-panel .score-row .row-label { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.7); width: 120px; flex-shrink: 0; }
body .wrapper .review-score-panel .score-row .row-bar-track { flex: 1; height: 4px; background-color: rgba(255,255,255,0.1); border-radius: 2px; }
body .wrapper .review-score-panel .score-row .row-bar-fill { height: 100%; border-radius: 2px; background-color: #8E3B2F; }
body .wrapper .review-score-panel .score-row .row-score { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.7); width: 30px; text-align: right; }

/* Fact Box (Anbieter-Daten) */
body .wrapper .fact-box { border: 1px solid rgba(42, 26, 22, 0.12); border-radius: 8px; overflow: hidden; margin-bottom: 32px; }
body .wrapper .fact-box .fact-box-header { background-color: #F0E9E0; padding: 14px 20px; font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 13px; color: #2A1A16; border-bottom: 1px solid rgba(42, 26, 22, 0.1); }
body .wrapper .fact-box .fact-row { display: flex; padding: 12px 20px; border-bottom: 1px solid rgba(42, 26, 22, 0.07); }
body .wrapper .fact-box .fact-row:last-child { border-bottom: none; }
body .wrapper .fact-box .fact-row .fact-key { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #6B4226; width: 160px; flex-shrink: 0; font-weight: 500; }
body .wrapper .fact-box .fact-row .fact-val { font-family: 'Work Sans', sans-serif; font-size: 13px; color: #2A1A16; font-weight: 400; }

/* FAQ Block */
body .wrapper .faq-block { margin-top: 48px; }
body .wrapper .faq-block .faq-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; color: #2A1A16; margin-bottom: 24px; }
body .wrapper .faq-item { border-bottom: 1px solid rgba(42, 26, 22, 0.1); }
body .wrapper .faq-item summary { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px; color: #2A1A16; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
body .wrapper .faq-item summary::after { content: '+'; font-size: 20px; color: #8E3B2F; font-weight: 400; transition: transform 0.2s; }
body .wrapper .faq-item[open] summary::after { content: '−'; }
body .wrapper .faq-item .faq-answer { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #4A2E1E; line-height: 1.7; padding-bottom: 16px; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
body .wrapper .breadcrumb { max-width: 1280px; margin: 0 auto; padding: 12px 24px 0; }
body .wrapper .breadcrumb .bc-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body .wrapper .breadcrumb .bc-list .bc-item { font-family: 'Work Sans', sans-serif; font-size: 12px; color: #8E3B2F; }
body .wrapper .breadcrumb .bc-list .bc-sep { color: rgba(42, 26, 22, 0.3); font-size: 12px; }
body .wrapper .breadcrumb .bc-list .bc-item.current { color: #6B4226; font-weight: 400; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
body .wrapper .site-footer { background-color: #1E120F; padding: 48px 24px 32px; }
body .wrapper .site-footer .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
body .wrapper .site-footer .footer-top { display: grid; grid-template-columns: 1fr; gap: 32px; }
body .wrapper .site-footer .footer-brand .brand-name { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 20px; color: #F7F3EF; letter-spacing: -0.03em; }
body .wrapper .site-footer .footer-brand .brand-desc { font-family: 'Work Sans', sans-serif; font-size: 13px; color: rgba(247, 243, 239, 0.55); line-height: 1.6; margin-top: 8px; max-width: 280px; }
body .wrapper .site-footer .footer-col .col-title { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #D9A24B; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
body .wrapper .site-footer .footer-col .col-links { display: flex; flex-direction: column; gap: 10px; }
body .wrapper .site-footer .footer-col .col-links .footer-link { font-family: 'Work Sans', sans-serif; font-size: 13px; color: rgba(247, 243, 239, 0.65); text-decoration: none; transition: color 0.18s; }
body .wrapper .site-footer .footer-col .col-links .footer-link:hover { color: #F7F3EF; text-decoration: none; }
body .wrapper .site-footer .footer-compliance { background-color: rgba(255,255,255,0.04); border-radius: 6px; padding: 20px; border-left: 3px solid #8E3B2F; }
body .wrapper .site-footer .footer-compliance .compliance-block { display: flex; flex-direction: column; gap: 10px; }
body .wrapper .site-footer .footer-compliance .compliance-row { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.6); line-height: 1.55; }
body .wrapper .site-footer .footer-compliance .compliance-row a { color: #D9A24B; }
body .wrapper .site-footer .footer-compliance .compliance-row a:hover { color: #E8B85C; text-decoration: underline; }
body .wrapper .site-footer .footer-compliance .compliance-row strong { color: rgba(247, 243, 239, 0.8); font-weight: 600; }
body .wrapper .site-footer .footer-compliance .compliance-addiction { background-color: rgba(142, 59, 47, 0.25); border-radius: 4px; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; }
body .wrapper .site-footer .footer-compliance .compliance-addiction .addiction-icon { flex-shrink: 0; margin-top: 1px; }
body .wrapper .site-footer .footer-compliance .compliance-addiction .addiction-text { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.8); line-height: 1.5; }
body .wrapper .site-footer .footer-compliance .compliance-addiction .addiction-text a { color: #D9A24B; font-weight: 500; }
body .wrapper .site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
body .wrapper .site-footer .footer-bottom .copyright { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.4); }
body .wrapper .site-footer .footer-bottom .bottom-links { display: flex; flex-wrap: wrap; gap: 16px; }
body .wrapper .site-footer .footer-bottom .bottom-links .bottom-link { font-family: 'Work Sans', sans-serif; font-size: 12px; color: rgba(247, 243, 239, 0.4); text-decoration: none; transition: color 0.18s; }
body .wrapper .site-footer .footer-bottom .bottom-links .bottom-link:hover { color: rgba(247, 243, 239, 0.7); text-decoration: none; }

/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */
@media (min-width: 768px) {
  body .wrapper .hero { padding: 80px 40px 88px; }
  body .wrapper .hero .hero-heading { font-size: 52px; }
  body .wrapper .hero .hero-subtext { font-size: 17px; }
  body .wrapper .site-header .header-inner { padding: 0 40px; }
  body .wrapper .site-header .mobile-menu-toggle { display: none; }
  body .wrapper .site-header .site-nav { display: flex; }
  body .wrapper .site-header .header-cta { display: block; }
  body .wrapper .ratgeber-section .ratgeber-grid { grid-template-columns: 1fr 1fr; }
  body .wrapper .authors-section .authors-grid { grid-template-columns: 1fr 1fr; }
  body .wrapper .site-footer .footer-top { grid-template-columns: 2fr 1fr 1fr; }
  body .wrapper .compliance-band .compliance-inner { align-items: center; }
  body .wrapper .matrix-section { padding: 56px 40px 72px; }
  body .wrapper .ratgeber-section { padding: 64px 40px; }
  body .wrapper .authors-section { padding: 64px 40px; }
  body .wrapper .site-footer { padding: 56px 40px 36px; }
  body .wrapper .page-content { padding: 56px 40px 80px; }
  body .wrapper .page-content .page-header h1 { font-size: 52px; }
  body .wrapper .fact-box .fact-row .fact-key { width: 200px; }
}

@media (min-width: 1024px) {
  body .wrapper .hero .hero-heading { font-size: 64px; }
  body .wrapper .ratgeber-section .ratgeber-grid { grid-template-columns: repeat(3, 1fr); }
  body .wrapper .site-footer .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; }
  body .wrapper .authors-section .methodik-teaser { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  body .wrapper .authors-section .methodik-teaser .methodik-content { flex: 1; }
}

@media (min-width: 1200px) {
  body .wrapper .hero { padding: 96px 40px 104px; }
  body .wrapper .hero .hero-heading { font-size: 72px; }
}

/* Anbieter-Logo im Review-Header */
body .anbieter-logo { display: inline-flex; align-items: center; justify-content: center; background: #F7F3EF; border: 1px solid rgba(42, 26, 22, 0.12); border-radius: 10px; padding: 12px 18px; margin-bottom: 14px; }
body .anbieter-logo img { height: 48px; width: auto; max-width: 200px; object-fit: contain; display: block; }

/* ============================================================
   REVIEW ELEMENTS — site-weit (alle Anbieter-Reviews)
   ============================================================ */

/* --- .review-tldr (Steckbrief-Box) --- */
.review-tldr { background-color: #fff; border: 1px solid rgba(42, 26, 22, 0.12); border-radius: 10px; overflow: hidden; margin-bottom: 36px; box-shadow: 0 2px 12px rgba(42, 26, 22, 0.06); }
.review-tldr .tldr-header { background-color: #2A1A16; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.review-tldr .tldr-header .tldr-title { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 12px; color: #D9A24B; letter-spacing: 0.14em; text-transform: uppercase; }
.review-tldr .tldr-header .tldr-score { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 28px; color: #D9A24B; line-height: 1; }
.review-tldr .tldr-header .tldr-score-label { font-family: 'Work Sans', sans-serif; font-size: 11px; color: rgba(247, 243, 239, 0.55); margin-top: 2px; }
.review-tldr .tldr-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.review-tldr .tldr-kacheln .kachel { padding: 16px 20px; border-right: 1px solid rgba(42, 26, 22, 0.07); border-bottom: 1px solid rgba(42, 26, 22, 0.07); display: flex; flex-direction: column; gap: 4px; }
.review-tldr .tldr-kacheln .kachel:nth-child(2n) { border-right: none; }
.review-tldr .tldr-kacheln .kachel:last-child, .review-tldr .tldr-kacheln .kachel:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.review-tldr .tldr-kacheln .kachel .kachel-label { font-family: 'Work Sans', sans-serif; font-size: 10px; color: #8E3B2F; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.review-tldr .tldr-kacheln .kachel .kachel-val { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #2A1A16; font-weight: 500; line-height: 1.3; }
.review-tldr .tldr-kacheln .kachel .kachel-val.yes { color: #1A6B42; font-weight: 600; }
.review-tldr .tldr-kacheln .kachel .kachel-val.no { color: #8E3B2F; font-weight: 600; }
@media (min-width: 640px) { .review-tldr .tldr-kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .review-tldr .tldr-kacheln { grid-template-columns: repeat(4, 1fr); } .review-tldr .tldr-kacheln .kachel:nth-child(2n) { border-right: 1px solid rgba(42, 26, 22, 0.07); } .review-tldr .tldr-kacheln .kachel:nth-child(4n) { border-right: none; } }

/* --- .toc (Mini-Inhaltsverzeichnis) --- */
.toc { background-color: #F0E9E0; border-left: 4px solid #D9A24B; border-radius: 0 8px 8px 0; padding: 20px 24px; margin-bottom: 36px; }
.toc .toc-title { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 12px; color: #8E3B2F; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.toc ol { margin: 0; padding: 0; counter-reset: toc-counter; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.toc ol li { counter-increment: toc-counter; display: flex; align-items: baseline; gap: 10px; font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 1.4; padding-left: 0; position: static; margin-bottom: 0; }
.toc ol li::before { content: counter(toc-counter) '.'; color: #D9A24B; font-weight: 700; font-size: 12px; flex-shrink: 0; min-width: 16px; position: static; }
.toc ol li a { color: #2A1A16; text-decoration: none; transition: color 0.18s; }
.toc ol li a:hover { color: #8E3B2F; text-decoration: none; }

/* --- .pros-cons (Vor-/Nachteile) --- */
.pros-cons { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 32px 0; }
.pros-cons .pros, .pros-cons .cons { border-radius: 8px; padding: 20px 22px; }
.pros-cons .pros { background-color: rgba(26, 107, 66, 0.07); border: 1px solid rgba(26, 107, 66, 0.2); }
.pros-cons .cons { background-color: rgba(142, 59, 47, 0.07); border: 1px solid rgba(142, 59, 47, 0.2); }
.pros-cons .pros .pc-title { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 12px; color: #1A6B42; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pros-cons .cons .pc-title { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 12px; color: #8E3B2F; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pros-cons ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pros-cons ul li { font-family: 'Work Sans', sans-serif; font-size: 14px; color: #2A1A16; line-height: 1.55; padding-left: 22px; position: relative; margin-bottom: 0; }
.pros-cons .pros ul li::before { content: '✓'; position: absolute; left: 0; color: #1A6B42; font-weight: 700; font-size: 13px; }
.pros-cons .cons ul li::before { content: '✗'; position: absolute; left: 0; color: #8E3B2F; font-weight: 700; font-size: 13px; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

/* --- .payment-table (Zahlungsmethoden-Tabelle) --- */
.payment-table { overflow-x: auto; border-radius: 8px; border: 1px solid rgba(42, 26, 22, 0.1); margin: 28px 0; }
.payment-table table { width: 100%; border-collapse: collapse; min-width: 480px; background-color: #fff; }
.payment-table table thead th { background-color: #F0E9E0; padding: 11px 16px; text-align: left; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 11px; color: #6B4226; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid rgba(217, 162, 75, 0.35); white-space: nowrap; }
.payment-table table tbody tr { border-bottom: 1px solid rgba(42, 26, 22, 0.07); }
.payment-table table tbody tr:last-child { border-bottom: none; }
.payment-table table tbody tr:hover { background-color: rgba(247, 243, 239, 0.6); }
.payment-table table tbody td { padding: 11px 16px; font-family: 'Work Sans', sans-serif; font-size: 13px; color: #3A2218; vertical-align: middle; }
.payment-table table tbody td.pm-name { font-weight: 500; color: #2A1A16; }
.payment-table table tbody td .pm-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; background-color: rgba(217, 162, 75, 0.15); color: #7A5510; }

/* --- .pull-quote (Gold-Border, Fraunces) --- */
.pull-quote { border-left: 4px solid #D9A24B; margin: 40px 0; padding: 6px 0 6px 28px; }
.pull-quote blockquote { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 20px; color: #2A1A16; line-height: 1.45; letter-spacing: -0.01em; margin: 0; }
.pull-quote cite { display: block; font-family: 'Work Sans', sans-serif; font-style: normal; font-size: 12px; color: #8E3B2F; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; }
@media (min-width: 768px) { .pull-quote blockquote { font-size: 23px; } }

/* === Content-Links klar als Links erkennbar (Terrakotta + Gold-Unterstrich) === */
body .wrapper .page-content .article-body a:not(.table-cta):not(.btn):not(.review-cta):not(.related-card),
body .wrapper .page-content .article-body .toc a {
  color: #8E3B2F;
  text-decoration: underline;
  text-decoration-color: #D9A24B;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
body .wrapper .page-content .article-body a:not(.table-cta):not(.btn):not(.review-cta):hover {
  color: #6E2D22; text-decoration-color: #6E2D22;
}

/* === Affiliate-CTA über Router /zu/ === */
body .wrapper .review-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 13px 26px; background: #8E3B2F; color: #F7F3EF;
  font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em; text-decoration: none; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(142,59,47,.25);
  transition: background .18s, transform .12s, box-shadow .18s;
}
body .wrapper .review-cta:hover { background: #6E2D22; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(110,45,34,.32); }
body .wrapper .review-cta--lg { padding: 16px 36px; font-size: 17px; }
body .wrapper .review-cta-final { margin: 36px 0 8px; padding: 26px; text-align: center; background: #F7F3EF; border: 1px solid rgba(42,26,22,.12); border-radius: 12px; }
body .wrapper .review-cta-note { margin: 12px 0 0; font-size: 12px; color: #6B5750; font-family: 'Work Sans', sans-serif; }
body .wrapper .review-cta-note a { color: #8E3B2F; }
body .wrapper .table-testlink { display: block; margin-top: 6px; font-size: 11px; font-family: 'Work Sans', sans-serif; color: #8E3B2F; text-decoration: underline; text-underline-offset: 2px; }
body .wrapper .table-testlink:hover { color: #6E2D22; }