/* Wiederverwendbare Content-Elemente: Review-Karten-Grid + Vergleichstabelle (sortierbar) */

/* --- Icon-Klassen (SVG als CSS-Background statt Inline-SVG) --- */
.wrapper .ic-check, .wrapper .ic-star, .wrapper .ic-chev { display: inline-block; width: 1em; height: 1em; background-position: center; background-repeat: no-repeat; background-size: contain; vertical-align: -0.12em; flex-shrink: 0; }
.wrapper .ic-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%230b5e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wrapper .ic-star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z' fill='%23e8a009'/%3E%3C/svg%3E"); }
.wrapper .ic-chev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2315539e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --- Review-Karten-Grid (Testberichte, Homepage "Neueste Tests") --- */
.wrapper .review-cards { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 26px 0 12px; }
@media (min-width: 700px) { .wrapper .review-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wrapper .review-cards { grid-template-columns: 1fr 1fr 1fr; } }

.wrapper .rcard { position: relative; background: #ffffff; border: 1px solid #e9eef3; border-radius: 14px; padding: 24px 20px 20px; box-shadow: 0 6px 20px rgba(20, 40, 80, 0.06); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wrapper .rcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 40, 80, 0.12); }
.wrapper .rcard-rank { position: absolute; top: -13px; left: 20px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; background: #15539e; color: #ffffff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.wrapper .rcard-rank.rank-1 { background: #e8a009; }
.wrapper .rcard-rank.rank-2 { background: #8a97a6; }
.wrapper .rcard-rank.rank-3 { background: #b6712e; }
.wrapper .rcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wrapper .rcard-name { font-size: 19px; font-weight: 800; color: #222222; }
.wrapper .rcard-score { display: inline-flex; align-items: center; gap: 6px; background: #eaf3fb; color: #15539e; font-weight: 800; font-size: 15px; padding: 5px 11px; border-radius: 8px; white-space: nowrap; }
.wrapper .rcard-score svg { width: 15px; height: 15px; }
.wrapper .rcard-tag { font-size: 13px; color: #5d6770; margin: 0 0 14px; line-height: 1.5; }
.wrapper .rcard-facts { margin: 0 0 18px; padding: 0; list-style: none; }
.wrapper .rcard-facts li { position: relative; padding-left: 24px; font-size: 14px; color: #444444; margin-bottom: 8px; line-height: 1.5; }
.wrapper .rcard-facts li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 8px; border-left: 2px solid #1c9e57; border-bottom: 2px solid #1c9e57; transform: rotate(-45deg); }
.wrapper .rcard-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.wrapper .rcard-btn { display: block; text-align: center; padding: 11px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; }
.wrapper .rcard-btn-primary { background: #15539e; color: #ffffff; }
.wrapper .rcard-btn-primary:hover { background: #0e3f7a; }
.wrapper .rcard-btn-ghost { border: 2px solid #15539e; color: #15539e; padding: 9px 14px; }
.wrapper .rcard-btn-ghost:hover { background: #eaf3fb; }

/* --- Sortierbare Vergleichstabelle (Top 10) --- */
.wrapper .compare-wrap { overflow-x: auto; margin: 24px 0 14px; border-radius: 12px; box-shadow: 0 6px 20px rgba(20, 40, 80, 0.06); -webkit-overflow-scrolling: touch; }
.wrapper .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #ffffff; font-size: 14px; min-width: 620px; }
.wrapper .compare-table th, .wrapper .compare-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid #eef2f6; }
.wrapper .compare-table thead th { background: #0c2a4d; color: #ffffff; font-weight: 700; font-size: 13px; position: relative; }
.wrapper .compare-table th.sortable { cursor: pointer; user-select: none; }
.wrapper .compare-table th.sortable::after { content: "⇅"; margin-left: 6px; opacity: 0.55; font-size: 11px; }
.wrapper .compare-table th.sort-asc::after { content: "↑"; opacity: 1; }
.wrapper .compare-table th.sort-desc::after { content: "↓"; opacity: 1; }
.wrapper .compare-table tbody tr:nth-child(even) td { background: #f6f9fc; }
.wrapper .compare-table tbody tr:hover td { background: #eef5fb; }
.wrapper .compare-rank { font-weight: 800; color: #15539e; }
.wrapper .compare-name { font-weight: 700; color: #222222; }
.wrapper .compare-name a { color: #15539e; }
.wrapper .compare-score { font-weight: 800; color: #0e7a3a; }
.wrapper .compare-go { display: inline-block; background: #e8a009; color: #3a2a00; font-weight: 800; padding: 7px 13px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.wrapper .compare-go:hover { background: #d9940a; }
.wrapper .compare-hint { font-size: 13px; color: #7a8694; margin: 0 0 4px; }

/* --- Sektionstitel für eingebettete Element-Blöcke --- */
.wrapper .content-prose .block-title { font-size: 21px; font-weight: 800; color: #333333; margin: 40px 0 6px; }
@media (min-width: 768px) { .wrapper .content-prose .block-title { font-size: 24px; } }

/* Anker-Offset, damit Inhaltsverzeichnis-Sprünge nicht unter den Header rutschen */
.wrapper .content-prose h2[id] { scroll-margin-top: 90px; }

/* Listen in Element-Bausteinen: content-prose-Disc/Padding gezielt zurücksetzen
   (höhere Spezifität als ".content-prose ul") */
.wrapper .content-prose .toc-list,
.wrapper .content-prose .pf-chips,
.wrapper .content-prose .mini-facts,
.wrapper .content-prose .rcard-facts { list-style: none; padding-left: 0; margin-left: 0; }
.wrapper .content-prose .pf-chips li,
.wrapper .content-prose .mini-facts li,
.wrapper .content-prose .toc-item { margin-bottom: 8px; }
.wrapper .content-prose .pf-chips li::marker,
.wrapper .content-prose .mini-facts li::marker,
.wrapper .content-prose .toc-item::marker { content: ""; }

/* Farb-Overrides: schlagen ".content-prose p/a/strong/blockquote" (Element-Selektor
   gewinnt sonst über meine 2-Klassen-Regeln) — sonst dunkler Text auf dunklem Grund. */
.wrapper .content-prose .cta-head { color: #ffffff; }
.wrapper .content-prose .cta-sub { color: #d3e3f6; }
.wrapper .content-prose .cta-sub strong { color: #ffffff; }
.wrapper .content-prose .cta-primary { color: #3a2a00; }
.wrapper .content-prose .cta-ghost { color: #ffffff; }
.wrapper .content-prose .rcard-btn-primary { color: #ffffff; }
.wrapper .content-prose .rcard-btn-ghost { color: #15539e; }
.wrapper .content-prose .mini-cta { color: #3a2a00; }
.wrapper .content-prose .mini-link { color: #15539e; }
.wrapper .content-prose .compare-go { color: #3a2a00; }
.wrapper .content-prose .compare-name a { color: #15539e; }
.wrapper .content-prose .top3-note a,
.wrapper .content-prose .toc-item a { color: #15539e; }
.wrapper .content-prose .pq-name { color: #15539e; }
.wrapper .content-prose .stat-num,
.wrapper .content-prose .stat-label { color: inherit; }
/* Pull-Quote & Inline-Zitat: content-prose-blockquote-Box (weiß, Rahmen) zurücksetzen */
.wrapper .content-prose .pq-text { background: transparent; border: 0; border-left: 0; border-radius: 0; box-shadow: none; padding: 0; color: #1d2733; }
.wrapper .content-prose .inline-quote { background: transparent; border-radius: 0; box-shadow: none; padding: 6px 0 6px 20px; border-left: 3px solid #03a9f4; }
.wrapper .content-prose .inline-quote p { color: #2a3a4a; }

/* --- Inhaltsverzeichnis "Auf dieser Seite" --- */
.wrapper .toc { background: #f6f9fc; border: 1px solid #e3eaf2; border-left: 4px solid #15539e; border-radius: 12px; padding: 18px 22px; margin: 26px 0; }
.wrapper .toc-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #15539e; margin: 0 0 10px; }
.wrapper .toc-list { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: toc; columns: 1; }
@media (min-width: 700px) { .wrapper .toc-list { columns: 2; column-gap: 30px; } }
.wrapper .toc-item { counter-increment: toc; margin: 0 0 8px; break-inside: avoid; line-height: 1.4; }
.wrapper .toc-item a { color: #2a3a4a; font-size: 14.5px; text-decoration: none; }
.wrapper .toc-item a::before { content: counter(toc) ". "; color: #8a97a6; font-weight: 700; }
.wrapper .toc-item a:hover { color: #15539e; text-decoration: underline; }

/* --- "Auf einen Blick"-Faktenbox --- */
.wrapper .keyfacts { background: #ffffff; border: 1px solid #e9eef3; border-radius: 14px; box-shadow: 0 6px 20px rgba(20, 40, 80, 0.06); padding: 20px 22px; margin: 26px 0; }
.wrapper .kf-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #0c2a4d; margin: 0 0 12px; }
.wrapper .kf-title svg { width: 18px; height: 18px; }
.wrapper .kf-grid { display: grid; gap: 0; }
.wrapper .kf-row { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #eef2f6; }
.wrapper .kf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wrapper .kf-label { font-size: 14.5px; color: #5d6770; font-weight: 600; }
.wrapper .kf-value { font-size: 14.5px; color: #1d2733; font-weight: 700; text-align: right; }

/* --- Zahlen-Kacheln --- */
.wrapper .stat-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 26px 0; }
.wrapper .stat { background: linear-gradient(160deg, #15539e 0%, #0c3a73 100%); color: #ffffff; border-radius: 12px; padding: 18px 14px; text-align: center; }
.wrapper .stat-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; margin-bottom: 5px; }
@media (min-width: 768px) { .wrapper .stat-num { font-size: 30px; } }
.wrapper .stat-label { display: block; font-size: 12.5px; color: #cfe0f3; line-height: 1.35; }

/* --- Top-3-Empfehlung --- */
.wrapper .top3 { margin: 30px 0; }
.wrapper .top3-title { font-size: 18px; font-weight: 800; color: #0c2a4d; margin: 0 0 14px; }
.wrapper .top3-lead { font-size: 14px; line-height: 1.55; color: #2c3b51; background: #fff6e6; border-left: 3px solid #e8a009; border-radius: 8px; padding: 11px 14px; margin: 0 0 16px; }
.wrapper .top3-lead strong { color: #b23b3b; }
.wrapper .top3-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .wrapper .top3-grid { grid-template-columns: 1fr 1fr 1fr; } }
.wrapper .mini-card { position: relative; background: #ffffff; border: 1px solid #e9eef3; border-radius: 14px; padding: 22px 18px 18px; box-shadow: 0 6px 18px rgba(20, 40, 80, 0.06); display: flex; flex-direction: column; }
.wrapper .mini-card.mini-1 { border-color: #e8a009; box-shadow: 0 8px 22px rgba(232, 160, 9, 0.18); }
.wrapper .mini-rank { position: absolute; top: -12px; left: 18px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #ffffff; background: #8a97a6; padding: 4px 10px; border-radius: 7px; }
.wrapper .mini-1 .mini-rank { background: #e8a009; }
.wrapper .mini-2 .mini-rank { background: #8a97a6; }
.wrapper .mini-3 .mini-rank { background: #b6712e; }
.wrapper .mini-name { font-size: 18px; font-weight: 800; color: #222222; margin: 6px 0 4px; }
.wrapper .mini-score { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #5d6770; margin: 0 0 8px; }
.wrapper .mini-score svg { width: 15px; height: 15px; }
.wrapper .mini-score strong { color: #0e7a3a; font-size: 16px; }
.wrapper .mini-tag { font-size: 13px; color: #5d6770; line-height: 1.5; margin: 0 0 12px; }
.wrapper .mini-facts { list-style: none; margin: 0 0 14px; padding: 0; }
.wrapper .mini-facts li { position: relative; padding-left: 22px; font-size: 13.5px; color: #444444; margin-bottom: 6px; }
.wrapper .mini-facts li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 11px; height: 7px; border-left: 2px solid #1c9e57; border-bottom: 2px solid #1c9e57; transform: rotate(-45deg); }
.wrapper .mini-cta { margin-top: auto; display: block; text-align: center; background: #e8a009; color: #3a2a00; font-weight: 800; padding: 11px 14px; border-radius: 9px; font-size: 14px; }
.wrapper .mini-cta:hover { background: #d9940a; }
.wrapper .mini-link { display: block; text-align: center; color: #15539e; font-weight: 700; font-size: 13.5px; margin-top: 9px; }
.wrapper .mini-link:hover { text-decoration: underline; }
.wrapper .top3-note { font-size: 12.5px; color: #7a8694; margin: 12px 0 0; line-height: 1.5; }
.wrapper .top3-note a { color: #15539e; }

/* --- Pull-Quote (Redaktions-Zitat) --- */
.wrapper .pullquote { margin: 32px 0; background: #f6f9fc; border-radius: 14px; padding: 26px 28px; border-left: 4px solid #e8a009; }
.wrapper .pq-text { margin: 0 0 16px; font-size: 19px; line-height: 1.5; font-weight: 700; color: #1d2733; font-style: italic; }
@media (min-width: 768px) { .wrapper .pq-text { font-size: 21px; } }
.wrapper .pq-text::before { content: "\201E"; }
.wrapper .pq-text::after { content: "\201C"; }
.wrapper .pq-cite { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.wrapper .pq-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wrapper .pq-meta { display: flex; flex-direction: column; }
.wrapper .pq-name { font-weight: 800; color: #15539e; font-size: 15px; }
.wrapper .pq-role { font-size: 13px; color: #5d6770; }

/* --- Inline-Blockzitat (aus dem Fließtext) --- */
.wrapper .content-prose .inline-quote { margin: 22px 0; padding: 6px 0 6px 20px; border-left: 3px solid #03a9f4; }
.wrapper .content-prose .inline-quote p { margin: 0; font-style: italic; color: #2a3a4a; font-size: 17px; }

/* --- Abschluss-CTA-Box --- */
.wrapper .cta-box { margin: 36px 0 10px; background: linear-gradient(135deg, #0c2a4d 0%, #15539e 100%); border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 820px) { .wrapper .cta-box { flex-direction: row; align-items: center; justify-content: space-between; } }
.wrapper .cta-head { font-size: 21px; font-weight: 800; color: #ffffff; margin: 0 0 6px; }
.wrapper .cta-sub { font-size: 14.5px; color: #d3e3f6; margin: 0; line-height: 1.55; max-width: 560px; }
.wrapper .cta-sub strong { color: #ffffff; }
.wrapper .cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
@media (min-width: 520px) { .wrapper .cta-actions { flex-direction: row; } }
.wrapper .cta-btn { display: block; text-align: center; padding: 13px 20px; border-radius: 10px; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.wrapper .cta-primary { background: #e8a009; color: #3a2a00; }
.wrapper .cta-primary:hover { background: #ffb71a; }
.wrapper .cta-ghost { border: 2px solid rgba(255, 255, 255, 0.5); color: #ffffff; padding: 11px 20px; }
.wrapper .cta-ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }

/* --- Autoren-Steckbrief (Profilseiten) --- */
.wrapper .profile-card { display: flex; flex-direction: column; gap: 16px; background: #ffffff; border: 1px solid #e9eef3; border-radius: 16px; box-shadow: 0 6px 20px rgba(20, 40, 80, 0.06); padding: 22px; margin: 0 0 26px; }
@media (min-width: 620px) { .wrapper .profile-card { flex-direction: row; } }
.wrapper .pf-portrait { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.wrapper .pf-name { font-size: 20px; font-weight: 800; color: #222222; margin: 0; }
.wrapper .pf-role { font-size: 14px; color: #15539e; font-weight: 700; margin: 2px 0 12px; }
.wrapper .pf-facts { display: grid; gap: 7px; margin-bottom: 12px; }
.wrapper .pf-row { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.wrapper .pf-k { color: #5d6770; min-width: 130px; }
.wrapper .pf-v { color: #1d2733; font-weight: 700; }
.wrapper .pf-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wrapper .pf-chip { background: #eaf3fb; color: #15539e; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 20px; }

/* --- Quellen-Box (externe autoritative Belege) --- */
.wrapper .sources { background: #ffffff; border: 1px solid #e9eef3; border-left: 4px solid #0e7a3a; border-radius: 12px; padding: 18px 22px; margin: 30px 0 12px; }
.wrapper .sources-title { font-size: 14px; font-weight: 800; color: #0c2a4d; margin: 0 0 10px; }
.wrapper .content-prose .sources-list { list-style: none; padding-left: 0; margin: 0 0 8px; }
.wrapper .content-prose .sources-list .src-item { position: relative; padding-left: 22px; margin-bottom: 7px; line-height: 1.45; }
.wrapper .content-prose .sources-list .src-item::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1' fill='none' stroke='%230e7a3a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1' fill='none' stroke='%230e7a3a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; }
.wrapper .content-prose .src-link { color: #15539e; font-size: 14px; font-weight: 600; }
.wrapper .content-prose .src-link:hover { text-decoration: underline; }
.wrapper .sources-note { font-size: 12px; color: #8a97a6; margin: 0; }

/* --- Autoren-Byline (oben auf jeder Inhaltsseite) --- */
.wrapper .byline { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; }
.wrapper .byline-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wrapper .byline-meta { min-width: 0; }
.wrapper .byline-line { margin: 0; font-size: 15px; color: #2a3a4a; line-height: 1.3; }
.wrapper .byline-name { font-weight: 800; color: #15539e; }
.wrapper .byline-name:hover { text-decoration: underline; }
.wrapper .byline-role { color: #5d6770; font-weight: 600; }
.wrapper .byline-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 3px 0 0; font-size: 13px; color: #6b7682; line-height: 1.4; }
.wrapper .byline-sub svg { width: 14px; height: 14px; flex-shrink: 0; }
.wrapper .byline-sub a, .wrapper .byline-link { color: #15539e; font-weight: 600; }

/* --- "Über den Autor"-Box (unten auf jeder Inhaltsseite) --- */
.wrapper .author-box, .wrapper .content-prose .author-box { display: flex; gap: 18px; align-items: flex-start; background: #f6f9fc; border: 1px solid #e3eaf2; border-radius: 14px; padding: 22px 24px; margin: 36px 0 12px; }
@media (max-width: 560px) { .wrapper .author-box, .wrapper .content-prose .author-box { flex-direction: column; gap: 12px; } }
.wrapper .ab-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wrapper .ab-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #15539e; margin: 0 0 4px; }
.wrapper .content-prose .ab-name { font-size: 18px; font-weight: 800; color: #222222; margin: 0 0 8px; }
.wrapper .ab-role { color: #5d6770; font-weight: 600; font-size: 14px; }
.wrapper .content-prose .ab-bio { font-size: 14.5px; color: #444444; line-height: 1.6; margin: 0 0 12px; }
.wrapper .ab-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wrapper .content-prose .ab-link { color: #15539e; font-weight: 700; font-size: 14px; }
.wrapper .content-prose .ab-link:hover { text-decoration: underline; }

/* --- Redaktionsteam-Karten (Übersicht) --- */
.wrapper .team-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0 12px; }
@media (min-width: 700px) { .wrapper .team-grid { grid-template-columns: 1fr 1fr 1fr; } }
.wrapper .team-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: #ffffff; border: 1px solid #e9eef3; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 40, 80, 0.06); padding: 24px 18px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wrapper .team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 40, 80, 0.12); }
.wrapper .team-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.wrapper .team-name { font-size: 17px; font-weight: 800; color: #222222; }
.wrapper .team-role { font-size: 13px; font-weight: 700; color: #15539e; margin: 2px 0 8px; }
.wrapper .team-desc { font-size: 13.5px; color: #5d6770; line-height: 1.5; }