/* Homepage editorial modules; shares the About page's palette and typography. */
.ht-home-kicker{display:block;color:#0276db;font-size:.78rem;font-weight:700;text-transform:uppercase;margin-bottom:8px}
.ht-home-section{padding-top:52px;padding-bottom:44px;color:#18213c}
.ht-home-link{color:#0276db;font-weight:700;white-space:normal}
.ht-home-muted{color:#596477;max-width:900px}
/* Method note under the provider cards - smaller than .ht-home-muted, since it
   is a footnote to the ranking rather than an introduction to it. */
.ht-home-method-note{color:#596477;max-width:900px;margin:18px 0 0;font-size:.8rem;line-height:1.55}
.ht-home-stats{background:#f4f8fc;border-bottom:1px solid #dfe4ea;color:#18213c}
.ht-home-stats-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.ht-home-stat-number{font-size:1.2rem;color:#18213c;display:block}
.ht-home-stats small{display:block;color:#596477;font-size:.8rem;margin-top:4px}
.ht-home-stat-change strong{color:#087849;font-size:1.1rem}
.ht-home-stat-change.is-negative strong{color:#b03b32}
/* Category tabs as pills: the underline variant was easy to mistake for running
   text before the active state was visible. Scrolls sideways on narrow screens
   instead of wrapping into a second row. */
/* The horizontal padding gives the active pill's shadow room inside the
   scroll container, which would otherwise clip it top and bottom and make the
   pills look cut off. The negative margin keeps the row flush with the grid. */
.ht-home-tabs{display:flex;gap:8px;overflow-x:auto;margin:22px -4px 28px;padding:6px 4px 8px;scrollbar-width:thin}
.ht-home-tabs a{flex:0 0 auto;padding:9px 18px;border:1px solid #dfe4ea;border-radius:999px;background:#fff;color:#596477;font-size:.88rem;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ht-home-tabs a:hover{border-color:#bcd3ea;background:#f4f8fc;color:var(--content-navy);text-decoration:none}
.ht-home-tabs a.is-active{border-color:transparent;background:var(--content-blue);color:#fff;box-shadow:0 2px 8px rgba(2,118,219,.28)}
.ht-home-tabs a.is-active:hover{background:#0269c2;color:#fff}
/* Without JS every panel stays visible, so the tabs would switch nothing. The
   script sets role="tablist" once it has wired them up; until then they are
   hidden and each panel keeps its own heading. */
.ht-home-tabs:not([role=tablist]){display:none}
.ht-home-provider-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
.ht-home-provider-panel[hidden]{display:none}
.ht-home-provider-panel[role=tabpanel]>.ht-home-category-title{display:none}

/* Provider cards follow the same card contract as .about-timeline-card and the
   review cards: white, 10px radius, hairline border, shadow that lifts on
   hover. The dark cover band stays as the section's accent, but it is now a
   thin header rather than a third of the card. */
.ht-home-provider-card{text-align:center;overflow:hidden;padding:0 0 22px;display:flex;align-items:center;flex-direction:column;background:#fff;border:1px solid #e9ecef;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ht-home-provider-card:hover{border-color:#cfdcea;box-shadow:0 10px 26px rgba(16,26,51,.12);transform:translateY(-2px)}
.ht-home-provider-cover{height:8px;background:linear-gradient(90deg,var(--content-blue) 0%,var(--content-turquoise) 160%);width:100%}
.ht-home-provider-logo{height:76px;width:104px;background:#fff;border:1px solid #e9ecef;border-radius:8px;margin-top:20px;display:flex;align-items:center;justify-content:center;position:relative;font-size:2rem;font-weight:700;color:var(--content-blue)}
.ht-home-provider-logo img{object-fit:contain;max-width:88px;max-height:64px}
.ht-home-provider-card h3{font-size:1.05rem;font-weight:600;line-height:1.35;padding:16px 16px 8px;margin:0;overflow-wrap:anywhere}
.ht-home-provider-card h3 a{color:var(--content-navy)}
.ht-home-provider-card h3 a:hover{color:var(--content-blue)}
.ht-home-provider-card .rating-stars{display:block;margin-bottom:2px}
.ht-home-provider-card p{font-size:.82rem;color:#596477;padding:6px 12px 0;margin:0 0 16px}
.ht-home-provider-card>.ht-home-link{margin-top:auto;padding:0 12px;font-size:.85rem}
/* Whole-card link. The provider name's ::after is stretched over the card, so a
   click anywhere on the tile opens the profile. The card needs position:relative
   to bound it, and the logo and footer links are lifted above it so they stay
   individually clickable (and keep their own hover state). */
.ht-home-provider-card{position:relative}
.ht-home-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.ht-home-provider-logo,.ht-home-provider-card>.ht-home-link{position:relative;z-index:2}
.ht-home-provider-card:focus-within{border-color:#cfdcea;box-shadow:0 10px 26px rgba(16,26,51,.12)}
.ht-home-card-link:focus-visible::after{outline:2px solid var(--content-blue);outline-offset:-3px;border-radius:10px}
/* Call to action under each category panel: leads into the comparison for the
   category currently on show. The button itself is .ma-btn .ma-btn-ghost, the
   shared base in assets/scss/buttons.scss - no button styling of its own here. */
.ht-home-category-cta{display:flex;justify-content:center;margin-top:26px}
/* "HOSTtest in Zahlen" - sits directly above .ht-home-about. It carries its own
   tinted ground like .ht-home-stats, so the colour change already separates it
   from the About section below; .ht-home-about therefore drops its border-top
   when it follows this module, which would otherwise read as a double rule. */
.ht-home-numbers{background:#f4f8fc;border-top:1px solid #dfe4ea;color:#18213c}
.ht-home-numbers-inner{padding-top:46px;padding-bottom:48px}
.ht-home-numbers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.ht-home-numbers-heading{display:flex;align-items:center;gap:14px}
.ht-home-numbers-mark{width:48px;height:48px;flex-shrink:0;border-radius:11px}
.ht-home-numbers-head h2{font-size:1.9rem;margin:0;line-height:1.2;letter-spacing:-.02em}
/* Tabular figures so the numbers line up, and nowrap because de_AT groups with
   a non-breaking space ("61 533") that would otherwise wrap inside a tile. */
.ht-home-num{display:block;font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ht-home-num-label{display:block;color:#596477;line-height:1.35}
.ht-home-numbers-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ht-home-numbers-tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:128px;padding:20px 18px;background:#fff;border:1px solid #e9ecef;border-radius:10px;box-shadow:0 2px 6px rgba(16,26,51,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.ht-home-numbers-tile{text-decoration:none;color:inherit}
a.ht-home-numbers-tile:hover{border-color:#cfdcea;box-shadow:0 10px 26px rgba(16,26,51,.12);transform:translateY(-2px);text-decoration:none}
.ht-home-numbers-tile .ht-home-num{font-size:2.1rem;color:#18213c}
.ht-home-numbers-tile .ht-home-num-label{font-size:.84rem;margin-top:8px}
.ht-home-num-sub{display:block;font-size:.76rem;color:#596477;margin-top:6px}
/* Exactly one tile is emphasised - the ratings, the figure that separates
   hosttest from a plain price comparison. Five competing accents would flatten
   the hierarchy instead of building one. */
.ht-home-numbers-tile.is-lead{grid-column:span 2;background:#18213c;border-color:#18213c}
.ht-home-numbers-tile.is-lead .ht-home-num{color:#fff;font-size:2.8rem}
.ht-home-numbers-tile.is-lead .ht-home-num-label{color:#c3ccdc}
.ht-home-numbers-tile.is-lead .ht-home-num-sub{color:#a8b5ca}
/* Plus gets its own card, not a fourth row of tiles: the numbers above describe
   what hosttest IS, this advertises a product that can be signed up for. The
   card carries the pitch and the CTA so the figures read as evidence for it. */
.ht-home-numbers-plus{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;align-items:center;margin-top:22px;padding:28px 30px;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 2px 6px rgba(16,26,51,.05)}
.ht-home-numbers-plus-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:#0276db;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ht-home-numbers-plus-title{font-size:1.45rem;line-height:1.25;letter-spacing:-.02em;color:#18213c;margin:12px 0 8px}
.ht-home-numbers-plus-text{font-size:.92rem;line-height:1.7;color:#596477;margin:0 0 16px;max-width:46ch}
.ht-home-numbers-plus-cta{display:inline-block;padding:11px 22px;border-radius:8px;background:#0276db;color:#fff;font-size:.9rem;font-weight:700;text-decoration:none;transition:background .15s ease}
.ht-home-numbers-plus-cta:hover{background:#0269c2;color:#fff;text-decoration:none}
.ht-home-numbers-plus-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:22px 20px;background:#f4f8fc;border-radius:10px}
.ht-home-numbers-plus-item .ht-home-num{font-size:1.75rem;color:#0276db}
.ht-home-numbers-plus-item .ht-home-num-label{font-size:.8rem;margin-top:6px}
.ht-home-numbers-plus-asterisk{font-size:.55em;vertical-align:super;line-height:0}
/* Footnote spans the whole figure block rather than sitting in one column. */
.ht-home-numbers-plus-note{grid-column:1/-1;margin:2px 0 0;color:#596477;font-size:.72rem}
/* Live dot marks the one figure that keeps moving while the page is open. */
.ht-home-numbers-plus-live{display:inline-flex;align-items:center;gap:5px;margin-top:4px;color:#087849;font-size:.72rem;font-weight:700}
.ht-home-numbers-plus-dot{width:6px;height:6px;border-radius:50%;background:#087849;animation:ht-home-plus-pulse 2s ease-in-out infinite}
@keyframes ht-home-plus-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ht-home-numbers-asof{display:block;color:#596477;font-size:.78rem;margin-top:14px}
.ht-home-about{display:grid;grid-template-columns:1fr 1fr;gap:64px;border-top:1px solid #dfe4ea}
/* Must follow .ht-home-about: same specificity, so source order decides. */
.ht-home-numbers+.ht-home-about{border-top:0}
.ht-home-about p{line-height:1.8;color:#4f596b}
.ht-home-faq details{border-top:1px solid #ccd4df}
.ht-home-faq details:last-child{border-bottom:1px solid #ccd4df}
.ht-home-faq summary{padding:20px 26px 20px 0;cursor:pointer;font-weight:700;color:#18213c;list-style:none;position:relative}
.ht-home-faq summary::-webkit-details-marker{display:none}
.ht-home-faq summary:after{content:'+';position:absolute;right:3px;font-size:1.25rem;top:15px}
.ht-home-faq details[open] summary:after{content:'−'}
.ht-home-faq p{padding-bottom:16px}
.ht-home-section a:focus-visible,.ht-home-faq summary:focus-visible,.ht-home-stats a:focus-visible{outline:3px solid #0276db;outline-offset:4px}

/* Reuse the About page's Plus card and editorial cards. */
.ht-home-plus { display: flex; align-self: stretch; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.ht-home-plus .about-plus-card { height: auto; }
.ht-home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ht-home-review-controls { display: flex; gap: 8px; flex-shrink: 0; }
.ht-home-review-controls[hidden] { display: none; }
.ht-home-review-controls button { width: 36px; height: 36px; border: 1px solid #0276db; border-radius: 50%; color: #0276db; background: white; cursor: pointer; }
.ht-home-review-controls button:disabled { opacity: .35; cursor: default; }
.ht-home-review-track { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 14px; }
.ht-home-review-track:focus-visible, .ht-home-review-controls button:focus-visible { outline: 3px solid #0276db; outline-offset: 3px; }
@media (max-width: 991px) {
    .ht-home-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ht-home-about { gap: 30px; }
    .ht-home-plus { order: 3; }
    .ht-hero-search .ht-hero-slider { order: 2; }
    .ht-home-review-track { grid-auto-columns: calc((100% - 16px) / 2); }
    .ht-home-numbers-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ht-home-numbers-head h2 { font-size: 1.6rem; }
    .ht-home-numbers-plus { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 575px) {
    .ht-home-section { padding-top: 32px; padding-bottom: 30px; }
    .ht-home-about { grid-template-columns: 1fr; }
    .ht-home-provider-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ht-home-provider-card h3 { font-size: .95rem; padding: 12px 10px 6px; }
    .ht-home-provider-card p { font-size: .75rem; }
    .ht-home-provider-logo { width: 88px; height: 64px; margin-top: 16px; }
    .ht-home-provider-logo img { max-width: 72px; max-height: 54px; }
    .ht-home-provider-card > .ht-home-link { font-size: .8rem; }
    .ht-home-stats-inner { gap: 14px; }
    .ht-home-tabs { gap: 6px; }
    .ht-home-tabs a { padding: 8px 14px; font-size: .82rem; }
    .ht-home-review-track { grid-auto-columns: 88%; }
    .ht-home-numbers-inner { padding-top: 32px; padding-bottom: 32px; }
    .ht-home-numbers-tiles { grid-template-columns: 1fr; }
    .ht-home-numbers-tile { min-height: 0; padding: 16px; }
    .ht-home-numbers-tile.is-lead { grid-column: span 1; }
    .ht-home-numbers-tile .ht-home-num { font-size: 1.7rem; }
    .ht-home-numbers-tile.is-lead .ht-home-num { font-size: 2.1rem; }
    .ht-home-numbers-plus { padding: 20px 18px; }
    .ht-home-numbers-plus-title { font-size: 1.25rem; }
    .ht-home-numbers-plus-figures { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px; }
    .ht-home-numbers-plus-item .ht-home-num { font-size: 1.5rem; }
    .ht-home-numbers-plus-cta { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ht-home-provider-card { transition: none; }
    .ht-home-provider-card:hover { transform: none; }
    .ht-home-numbers-tile { transition: none; }
    a.ht-home-numbers-tile:hover { transform: none; }
    .ht-home-numbers-plus-dot { animation: none; }
}

/* Inline links inside the running text - underlined so they are recognisable as
   links without competing with the standalone .ht-home-link arrows above. */
.ht-home-about p a:not(.ht-home-link), .ht-home-faq p a { color: #0276db; text-decoration: underline; text-underline-offset: 2px; }
.ht-home-about p a:not(.ht-home-link):hover, .ht-home-faq p a:hover { color: #015ba9; }
.ht-home-plus-panel { padding: 16px 0; }
.ht-home-plus-panel h2.ht-hoty-title { margin: 10px 0 14px; }
.ht-home-plus-panel .ht-plus-stats-box { display: block; width: 100%; margin: 20px 0 4px !important; padding: 20px 24px; }
.ht-home-plus-panel .ht-plus-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ht-home-plus-panel .ht-plus-stats-value { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.ht-home-plus-panel .ht-plus-stats-label { font-size: .78rem; }
@media (max-width: 380px) {
    .ht-home-plus-panel .ht-plus-stats-box { padding: 16px; }
    .ht-home-plus-panel .ht-plus-stats { gap: 8px; }
}

.ht-home-review-meta{font-size:.75rem;color:#596477}
.ht-home-verified{display:inline-block;color:#087849;background:#eaf8f0;border-radius:4px;padding:2px 6px;font-size:.72rem;margin-top:6px}
.ht-home-review-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; scroll-snap-align: start; }
.ht-home-review-body { padding: 18px 16px 14px; flex: 1; min-width: 0; }
.ht-home-review-person { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.ht-home-review-person > div { min-width: 0; overflow-wrap: anywhere; }
.ht-home-review-person strong { display: block; margin-bottom: 4px; }
.ht-home-review-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #18213c; color: white; font-size: 1.2rem; flex-shrink: 0; }
.ht-home-review-score { color: #596477; font-size: .75rem; white-space: nowrap; }
.ht-home-review-card h3 { font-size: .95rem; line-height: 1.4; font-weight: 600; margin: 16px 0 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ht-home-review-excerpt { font-size: .9rem; line-height: 1.55; color: #495057; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 12px; }
.ht-home-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ht-home-review-provider { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e9ecef; padding: 14px 16px; color: #18213c; }
.ht-home-review-provider > span { min-width: 0; }
.ht-home-review-provider strong { display: block; font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ht-home-review-provider small { color: #0276db; }
.ht-home-review-provider img, .ht-home-review-provider-initial { width: 44px; height: 44px; object-fit: contain; border: 1px solid #e9ecef; border-radius: 8px; background: white; padding: 3px; flex-shrink: 0; }
.ht-home-review-provider-initial { display: grid; place-items: center; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .ht-home-review-card { transition: none; }
    .ht-home-review-card:hover { transform: none; }
}

.ht-home-plus-warning { margin: 0 0 14px; color: #ffd5d5; font-size: .85rem; line-height: 1.5; }
.ht-home-plus-benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.ht-home-plus-benefits li { display: flex; align-items: baseline; gap: 6px; color: #fff; font-size: .8rem; line-height: 1.5; }
.ht-home-plus-benefits i { color: #16ea9e; flex-shrink: 0; }

/* Premium sponsor tile in the homepage article grid. Follows the same card
   contract as .rating-card (10px radius, hairline border, navy shadow that
   lifts on hover) so it reads as part of the same system, but carries the
   blue accent bar and an ad header so it never passes as editorial content.
   It sizes to its content instead of stretching to the article teasers: a
   two-line ad in a teaser-height box is mostly empty space. */
.ht-sponsor-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 26, 51, .06);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ht-sponsor-card:hover { border-color: #cfdcea; box-shadow: 0 10px 26px rgba(16, 26, 51, .12); transform: translateY(-2px); }
/* Accent bar in the brand gradient, same device as .ht-home-provider-cover. */
.ht-sponsor-card__accent { height: 6px; flex-shrink: 0; background: linear-gradient(90deg, var(--content-blue, #0276db) 0%, var(--content-turquoise, #16ea9e) 160%); }
.ht-sponsor-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #edf1f6; }
.ht-sponsor-card__title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--content-navy, #18213c); }
.ht-sponsor-card__ad { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #8b95a7; white-space: nowrap; }
.ht-sponsor-card__body { display: flex; flex-direction: column; padding: 4px 20px 6px; }
.ht-sponsor-card__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 0; }
.ht-sponsor-card__item + .ht-sponsor-card__item { border-top: 1px solid #edf1f6; }
.ht-sponsor-card__link { color: var(--content-navy, #18213c); font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ht-sponsor-card__link:hover, .ht-sponsor-card__link:focus { color: var(--content-blue, #0276db); text-decoration: none; }
/* Two lines of teaser, matching the clamp discipline of .rating-card-text. */
.ht-sponsor-card__teaser { display: -webkit-box; overflow: hidden; color: #4a5568; font-size: .88rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ht-sponsor-card__url { color: var(--content-blue, #0276db); font-size: .78rem; overflow-wrap: anywhere; margin-top: 2px; }
.ht-sponsor-card__url:hover, .ht-sponsor-card__url:focus { color: #015ba9; }
@media (prefers-reduced-motion: reduce) {
    .ht-sponsor-card { transition: none; }
    .ht-sponsor-card:hover { transform: none; }
}

/* The review carousel keeps its own title class (shared with /bewerten), so it
   is matched to .about-editorial-heading here only - on the homepage all four
   section headings have to read as one scale. */
.ht-home-section .rating-cards-title { font-size: 1.8rem; line-height: 1.25; margin-bottom: 20px; }

/* Equal heights per row for the teaser cards; the card styling itself lives in
   assets/scss/teaser-cards.scss, shared with /news, /wissen and the author
   pages. The ad slots keep their own height and are excluded. */
.ht-home-news-grid > [class*="col-"]:not(.ht-home-news-ad) { display: flex; }
.ht-home-news-grid > [class*="col-"]:not(.ht-home-news-ad) > a.block-link,
.ht-home-news-grid > [class*="col-"]:not(.ht-home-news-ad) > article { width: 100%; }
.ht-home-news-grid > [class*="col-"]:not(.ht-home-news-ad) > a.block-link { display: flex; }

/* "Mehr News" closes the section, centred below the completed grid rows. */
.ht-home-news-more { margin-top: 12px; text-align: center; }