/* hoc.css — Hunde-OP-Check domain components.
   Built in the same Bankon design language as the ported system (2px ink
   borders, hard offset shadows, 20px radius, Space Grotesk display, teal
   accent, JetBrains Mono numbers). Only what the finanz system doesn't ship. */

/* ======================================================================
   finanzfluss palette overrides (white / navy / blue, 2026-06-21)
   The blue accent is mid-dark, so accent FILLS carry WHITE text.
====================================================================== */
.btn--coral { color: var(--color-white); }
.card--featured,
.card--featured:hover { background: var(--color-coral); }
.card--featured,
.card--featured .card__title,
.card--featured .card__excerpt,
.card--featured .stat-card__label,
.card--featured .stat-card__value,
.card--featured .stat-card__desc { color: var(--color-white); }
.compare__row--best td { background: var(--color-coral-soft); }
.cost-table thead th,
.prose table thead th { color: var(--color-white); }
::selection { background: var(--color-coral); color: var(--color-white); }

/* ======================================================================
   Long-form article body (the_content) — mirrors .prose
====================================================================== */
.article-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  max-width: var(--max-width-content);
}
.article-body > * + * { margin-top: var(--space-4); }
.article-body h2 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
}
.article-body h3 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.article-body ul, .article-body ol { padding-left: var(--space-6); }
.article-body li + li { margin-top: var(--space-2); }
.article-body a { color: var(--color-ink); text-underline-offset: 3px; }
.article-body a:hover { color: var(--color-coral-deep); }
/* Article body lives in a wide content column on breed pages; cap it for reading */
.breed-layout__main .article-body { max-width: none; }

/* ======================================================================
   Key facts box
====================================================================== */
.key-facts-box {
  background: var(--color-white);
  border: 2px solid var(--color-border-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  padding: var(--space-6) var(--space-8);
  margin-block: var(--space-8);
}
.key-facts-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.key-facts-box li {
  position: relative;
  padding-left: 2rem;
  line-height: var(--line-height-snug);
}
.key-facts-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-coral);
  /* white check mark on the blue circle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.key-facts-box strong { font-weight: 700; }

/* ======================================================================
   Author byline (E-E-A-T)
====================================================================== */
.author-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* let the date wrap instead of truncating on mobile */
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-8);
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}
.author-byline > * { min-width: 0; }
.author-byline img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-ink);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-paper-soft);
}
.author-byline strong { color: var(--color-ink); }

/* Above-the-fold affiliate CTA on anbieter pages */
.anbieter-cta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
}
.anbieter-cta-top__flag { font-size: var(--font-size-sm); color: var(--color-ink-mute); }

/* ======================================================================
   Trust strip
====================================================================== */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
}
.trust-strip > span:not([aria-hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.trust-strip > span[aria-hidden] { color: var(--color-ink-mute); }

/* ======================================================================
   Affiliate disclosure
====================================================================== */
.affiliate-disclosure {
  font-size: var(--font-size-xs);
  color: var(--color-ink-mute);
  line-height: var(--line-height-normal);
  margin-block: var(--space-4);
}
.affiliate-flag {
  font-size: var(--font-size-xs);
  color: var(--color-ink-mute);
  font-weight: 500;
}

/* ======================================================================
   Comparison table
====================================================================== */
.compare-wrap { margin-block: var(--space-8); }
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
}
.compare {
  width: 100%;
  min-width: 720px;
  border: 2px solid var(--color-border-ink);
  border-radius: 20px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-hard-md);
  overflow: hidden;
  font-size: var(--font-size-sm);
}
.compare thead th {
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.compare tbody td {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  vertical-align: top;
}
.compare tbody tr:first-child td { border-top: 0; }
.compare__row--best td { background: var(--color-coral-soft); }
.compare__badge {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.compare__name strong {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  display: block;
}
.compare__name small { color: var(--color-ink-mute); }
.compare__detail-link {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare__price strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-ink);
}
.compare__usp { color: var(--color-ink-soft); max-width: 30ch; }
.compare__badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trust-badge {
  display: inline-block;
  background: var(--color-paper-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  width: fit-content;
}
.compare__cta { white-space: nowrap; }
.compare__cta .btn { width: 100%; }
.compare__cta .affiliate-flag { display: block; text-align: center; margin-top: var(--space-2); }
.compare-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-ink-mute);
  margin-top: var(--space-3);
}
.compare-hint svg { flex-shrink: 0; }

/* ======================================================================
   Cost table
====================================================================== */
.cost-table-wrap { margin-block: var(--space-6); }
.cost-table {
  width: 100%;
  border: 2px solid var(--color-border-ink);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
}
.cost-table thead th {
  background: var(--color-coral-deep); /* deeper blue → white text passes WCAG AA */
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: left;
  padding: var(--space-3) var(--space-4);
}
.cost-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
.cost-table tbody tr:nth-child(even) td { background: var(--color-paper); }
.cost-table__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}
.cost-table__note {
  font-size: var(--font-size-xs);
  color: var(--color-ink-mute);
  margin-top: var(--space-2);
}

/* ======================================================================
   Breed cards (hub grid) — built on .card-row of <a class="card breed-card">
====================================================================== */
.breed-card { align-items: flex-start; }
.breed-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  background: var(--color-coral-soft);
  color: var(--color-coral-deep);
  margin-bottom: var(--space-4);
}
.breed-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.risk-chip {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.risk-chip--high   { background: var(--color-coral-soft); color: var(--color-coral-deep); border: 1px solid var(--color-coral); }
.risk-chip--medium { background: var(--color-paper-soft); color: var(--color-ink-soft); border: 1px solid var(--color-border-soft); }

/* ======================================================================
   Breed page layout (main + sidebar)
====================================================================== */
.breed-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .breed-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-16); align-items: start; }
  .breed-layout__sidebar { position: sticky; top: calc(var(--site-header-h) + var(--space-4)); }
}
.breed-hero {
  width: 100%;
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  margin-block: var(--space-6);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Quick recommendation box (sidebar) */
.rec-box {
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.rec-box h3 { margin-top: 0; font-size: var(--font-size-lg); }
.rec-box p { color: var(--color-ink-soft); font-size: var(--font-size-sm); }

/* ======================================================================
   Related breeds
====================================================================== */
.related-breeds {
  margin-block: var(--space-12);
  padding: var(--space-6) var(--space-8);
  background: var(--color-paper-soft);
  border-radius: 20px;
}
.related-breeds h3 { margin-top: 0; font-size: var(--font-size-xl); }
.related-breeds ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.related-breeds li { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.related-breeds a { font-family: var(--font-display); font-weight: 500; }

/* ======================================================================
   Calculator (compact card — used in hub + breed sidebar)
====================================================================== */
.calc {
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  padding: var(--space-6);
}
.calc__title { margin-top: 0; font-size: var(--font-size-lg); }
.calc__form { display: flex; flex-direction: column; gap: var(--space-4); }
.calc__result { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 2px solid var(--color-border-soft); }
.calc__result-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-mute);
  margin: 0 0 var(--space-2);
}
.calc__result-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-coral-deep); /* dark teal — readable on white */
  line-height: 1.1;
}
.calc__result-unit { font-family: var(--font-display); font-size: var(--font-size-base); color: var(--color-ink); font-weight: 500; }
.calc__disclaimer { font-size: var(--font-size-xs); color: var(--color-ink-mute); margin-top: var(--space-3); }

/* Calculator recommendation (conversion bridge after the result) */
.calc__reco {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  background: var(--color-coral-soft);
}
.calc__reco-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calc__reco-text { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-ink-soft); }
.calc__reco-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* ======================================================================
   Sticky mobile CTA bar
====================================================================== */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-paper);
  border-top: 2px solid var(--color-ink);
}
.sticky-cta .btn { width: 100%; }
@media (min-width: 769px) { .sticky-cta { display: none !important; } }

/* ======================================================================
   Cookie banner (DSGVO) — design-language card
====================================================================== */
.cookie-banner {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 2rem));
  z-index: 9999;
}
.cookie-banner__inner {
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  padding: var(--space-6);
}
.cookie-banner__text { font-size: var(--font-size-sm); color: var(--color-ink-soft); margin: 0 0 var(--space-4); }
.cookie-banner__actions { display: flex; gap: var(--space-2); }
.cookie-banner__actions .btn { flex: 1; }
@media (max-width: 420px) {
  .cookie-banner { left: 0.75rem; right: 0.75rem; transform: none; width: auto; }
  /* Keep the two buttons side-by-side (was column) so the banner stays short
     and does not cover the primary CTAs on mobile. */
  .cookie-banner__actions { flex-direction: row; }
  .cookie-banner__inner { padding: var(--space-4); }
  .cookie-banner__text { margin-bottom: var(--space-3); }
}

/* ======================================================================
   CTA band (ratgeber / generic conversion block)
====================================================================== */
.cta-band {
  margin-block: var(--space-12);
  padding: var(--space-8);
  background: var(--color-coral-soft);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  text-align: center;
}
.cta-band h2, .cta-band h3 { margin-top: 0; }
.cta-band p { color: var(--color-ink-soft); margin-bottom: var(--space-6); }

/* ======================================================================
   Stat facts (homepage "warum")
====================================================================== */
.stat-card { text-align: center; }
.stat-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--font-size-3xl);
  color: var(--color-coral-deep); /* dark teal — readable on white */
  line-height: 1.05;
  margin: var(--space-2) 0;
}
.stat-card__label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-mute);
}
.stat-card__desc { color: var(--color-ink-soft); font-size: var(--font-size-sm); }

/* ------------------------------------------------------------------ */
/* HERO SHOWCASE IMAGE (front page) — framed in the Bankon language:   */
/* navy border + hard offset shadow + card radius. Sits below the      */
/* centered hero text, so the headline/CTA design stays intact.        */
/* ------------------------------------------------------------------ */
.hero__media {
  width: 100%;
  max-width: 940px;
  margin: var(--space-10) auto 0;
}
.hero__media picture { display: block; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-lg);
  background: var(--color-paper-soft);
}
@media (max-width: 640px) {
  .hero__media { margin-top: var(--space-8); }
  .hero__media img { border-radius: 14px; box-shadow: var(--shadow-hard-md); }
}

/* Logo mark now holds a paw glyph instead of the "h" letter. */
.site-logo__mark svg { width: 17px; height: 17px; display: block; }

/* ------------------------------------------------------------------ */
/* "WEITERE RATGEBER" related block                                    */
/* Renders inside .container narrow, but .card-row forces 3 columns on  */
/* VIEWPORT width — cramming 3 cards into the narrow column (~150px      */
/* each), so titles hyphenate char-by-char. Make it container-aware.    */
/* ------------------------------------------------------------------ */
.related-ratgeber .card-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: none;
  padding-inline: 0;
}
.related-ratgeber .card__title {
  font-size: var(--font-size-lg);   /* calmer than the fluid clamp in a small card */
  hyphens: manual;                   /* stop the auto German char-by-char breaks */
  -webkit-hyphens: manual;
}
.related-ratgeber .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;             /* even card heights, clean truncation */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* HTML Sitemap page                                                    */
/* ------------------------------------------------------------------ */
.sitemap-section { margin-bottom: var(--space-12); }
.sitemap-section h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-ink);
}
.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { padding: var(--space-1) 0; }
.sitemap-list li::before { content: "→ "; color: var(--color-coral); font-weight: 600; }
.sitemap-list a { color: var(--color-ink); text-decoration: none; }
.sitemap-list a:hover { color: var(--color-coral); text-decoration: underline; }
.sitemap-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-1) var(--space-6);
}

/* ------------------------------------------------------------------ */
/* TRUSTPILOT SCORE BADGE + REVIEW INTRO (single-anbieter.php)         */
/* ------------------------------------------------------------------ */

/* Prose paragraph that flows inside .article-body */
.review-intro {
  border-left: 3px solid var(--color-coral);
  padding-left: var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--font-size-base);
  line-height: 1.7;
  margin: var(--space-8) 0 var(--space-4);
}
.review-intro a { color: var(--color-coral); text-decoration: none; }
.review-intro a:hover { text-decoration: underline; }

/* Score block — rendered after article body */
.review-score-block {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-paper-soft);
  border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-hard-md);
  border-radius: 12px;
  padding: var(--space-5) var(--space-8);
  margin: var(--space-4) 0 var(--space-2);
}
.review-score-block__number {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink);
  min-width: 3.5rem;
}
.review-score-block__meta { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.review-score-block__label { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-ink); }
.review-score-block__source { font-size: var(--font-size-sm); color: var(--color-ink-soft); text-decoration: none; }
.review-score-block__source:hover { color: var(--color-coral); text-decoration: underline; }
.review-score-block__logo { margin-left: auto; opacity: .85; }
.review-score-block__disclaimer { font-size: var(--font-size-xs); color: var(--color-ink-mute); margin: 0 0 var(--space-8); }
.review-score-block__disclaimer a { color: var(--color-ink-mute); }
.review-score-block__disclaimer a:hover { color: var(--color-coral); }
@media (max-width: 560px) {
  .review-score-block { flex-wrap: wrap; padding: var(--space-4); }
  .review-score-block__logo { display: none; }
}

/* Stars */
.stars { display: inline-flex; gap: 2px; line-height: 1; }
.stars--lg .star { font-size: 1.4rem; }
.stars--md .star { font-size: 1.1rem; }
.stars--sm .star { font-size: 0.95rem; }
.stars--xs .star { font-size: 0.75rem; }
.star--full, .star--half { color: #00b67a; }
.star--empty { color: #dce0e0; }

/* ------------------------------------------------------------------ */
/* RATING BADGE (comparison table cell)                                 */
/* ------------------------------------------------------------------ */
.rating-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--color-ink);
  line-height: 1.2;
}
.rating-badge:hover { color: var(--color-coral); }
.rating-badge__score { font-size: var(--font-size-sm); font-weight: 700; }
.rating-badge__count { font-size: var(--font-size-xs); color: var(--color-ink-mute); }
.rating-badge--none { font-size: var(--font-size-sm); color: var(--color-ink-mute); }
.compare__rating { vertical-align: middle; min-width: 100px; }