/* ════════════════════════════════════════════════════════════════════════
   Vatten Haustechnik, Ratgeber-Artikel & Kategorie-Hubs
   Ergänzt site.css um Lesetypografie, Breadcrumb, FAQ, CTA, Related, Hub-Grid.
   ════════════════════════════════════════════════════════════════════════ */

/* Abstand unter der fixierten Navbar + Luft zum Footer */
.page { padding-top: 4.7rem; padding-bottom: 5.5rem; }

/* ══════════════════ BREADCRUMB ══════════════════ */
.breadcrumb-bar {
  border-bottom: 1px solid var(--bs-border-color);
  background: rgba(8,15,26,.35);
}
.breadcrumb-bar ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: .9rem 0;
  font-size: .8rem;
  letter-spacing: .04em;
}
.breadcrumb-bar li { color: var(--stahl); }
.breadcrumb-bar li:not(:last-child)::after { content: "›"; margin-left: .5rem; color: var(--stahl); }
.breadcrumb-bar a { color: var(--eis); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--kreide); }
.breadcrumb-bar li[aria-current] { color: var(--silber); }

/* ══════════════════ ARTIKEL-KOPF ══════════════════ */
.article-head { padding: 2.6rem 0 1.4rem; }
.article-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--eis);
}
.article-h1 {
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--kreide);
  margin: 1rem 0 1.1rem;
}

/* ══════════════════ PROSE / LESETYPOGRAFIE ══════════════════ */
.prose {
  max-width: 720px;
  color: var(--kreide);
  font-size: 1.06rem;
  line-height: 1.78;
}
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.3rem; color: #DCD8D1; }
.prose h2 {
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--kreide);
  margin: 2.8rem 0 1rem;
  padding-top: .6rem;
}
.prose h3 {
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--kreide);
  margin: 2rem 0 .8rem;
}
.prose a { color: var(--eis); text-underline-offset: .18em; text-decoration-color: rgba(122,156,184,.45); }
.prose a:hover { color: var(--kreide); text-decoration-color: var(--kreide); }
.prose strong { color: var(--kreide); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; color: #DCD8D1; }
.prose li { margin-bottom: .55rem; padding-left: .25rem; }
.prose li::marker { color: var(--stahl); }
.prose blockquote {
  margin: 1.6rem 0;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid var(--stahl);
  color: var(--eis);
  font-style: italic;
}
.prose code {
  background: rgba(13,27,46,.8);
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  padding: .1rem .35rem;
  font-size: .9em;
  color: var(--silber);
}
.prose hr { border: 0; border-top: 1px solid var(--bs-border-color); margin: 2.4rem 0; }

/* Tabellen (GFM) im Markenlook */
.table-wrap { overflow-x: auto; margin: 0 0 1.6rem; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .96rem;
  background: rgba(13,27,46,.45);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}
.prose thead th {
  text-align: left;
  background: rgba(30,58,88,.55);
  color: var(--kreide);
  font-weight: 600;
  letter-spacing: .02em;
}
.prose th, .prose td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  vertical-align: top;
  color: #DCD8D1;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(30,58,88,.22); }

/* ══════════════════ CTA-KARTE ══════════════════ */
.cta-card {
  margin: 3rem 0 1rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid rgba(122,156,184,.28);
  border-radius: .6rem;
  background: linear-gradient(160deg, rgba(30,58,88,.55), rgba(13,27,46,.55));
}
.cta-card h2 {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--kreide);
  margin: 0 0 .7rem;
}
.cta-card p { color: var(--silber); margin: 0 0 1.4rem; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-mail { color: var(--eis); font-weight: 500; text-decoration: none; }
.cta-mail:hover { color: var(--kreide); }

/* ══════════════════ RELATED / WEITERLESEN ══════════════════ */
.related { border-top: 1px solid var(--bs-border-color); margin-top: 3.2rem; padding-top: 2.2rem; }
.related h2 {
  font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--eis); margin-bottom: 1.3rem;
}
.related-card {
  display: block; height: 100%;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: linear-gradient(160deg, rgba(21,40,64,.5), rgba(13,27,46,.5));
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.related-card:hover { transform: translateY(-4px); border-color: rgba(122,156,184,.5); }
.related-cat { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stahl); font-weight: 600; }
.related-title { color: var(--kreide); font-weight: 600; font-size: 1.05rem; line-height: 1.35; margin: .5rem 0 0; }

/* ══════════════════ KATEGORIE-HUB ══════════════════ */
.hub-head { padding: 3.2rem 0 1.2rem; }
.hub-h1 {
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--kreide);
  margin: 1rem 0 1.1rem;
}
.hub-intro { color: var(--silber); font-size: 1.12rem; line-height: 1.7; max-width: 65ch; }
.hub-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .55rem;
  background: linear-gradient(160deg, rgba(21,40,64,.55), rgba(13,27,46,.55));
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.hub-card:hover { transform: translateY(-5px); border-color: rgba(122,156,184,.5); background: linear-gradient(160deg, rgba(30,58,88,.65), rgba(21,40,64,.65)); }
.hub-card .hub-type { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stahl); font-weight: 600; }
.hub-card .hub-title { color: var(--kreide); font-weight: 600; font-size: 1.18rem; line-height: 1.3; margin: .6rem 0 .6rem; }
.hub-card .hub-desc { color: var(--silber); font-size: .92rem; line-height: 1.55; flex-grow: 1; }
.hub-card .hub-readmore { margin-top: 1.1rem; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--eis); font-weight: 600; }
.hub-card .hub-readmore::after { content: " →"; transition: margin .25s; }
.hub-card:hover .hub-readmore::after { margin-left: .3rem; }

/* Querverweise zwischen Hubs (Fußbereich der Hub-Seite) */
.hub-nav-link {
  display: inline-block; margin: .3rem .6rem .3rem 0;
  padding: .45rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  color: var(--silber); text-decoration: none;
  font-size: .85rem;
  transition: border-color .25s, color .25s;
}
.hub-nav-link:hover { border-color: var(--eis); color: var(--kreide); }