/* ==========================================================================
   Funkenart Media – Ratgeber (Artikel-Layout)
   Baut auf style.css auf. Eigene Lese-Typografie, eigene Bausteine.
   Keine gebauten Titelbilder, echte Fotos. Bis Freigabe nummerierte Platzhalter.
   ========================================================================== */

/* ---------- Artikel-Hero (dunkel, editorial) ---------- */
.art-hero { padding-top: calc(var(--head-h) + clamp(26px,4vw,52px)); padding-bottom: clamp(72px,8vw,110px); }
.art-hero .wrap { max-width:880px; }
.art-hero-inner { position:relative; z-index:1; }

/* Brotkrümel */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--dk-muted); }
.crumbs a { color:var(--dk-muted); transition:color .2s; }
.crumbs a:hover { color:#fff; }
.crumbs .sep { color:rgba(255,255,255,.32); }
.crumbs .here { color:#EBE2D4; }

/* Kategorie */
.art-cat { display:inline-block; margin-top:22px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); padding:7px 14px; border:1px solid rgba(235,78,28,.42); border-radius:999px; }
.art-hero h1 { color:#fff; font-size:clamp(31px,4.6vw,54px); line-height:1.08; letter-spacing:-.035em; margin-top:20px; max-width:20ch; text-wrap:balance; }
.art-hero h1 em { color:var(--accent); }
.art-hero .lead { margin-top:20px; max-width:60ch; color:#E7DECF; font-size:clamp(17px,1.5vw,19.5px); line-height:1.62; }

/* Meta-Zeile (Autor, Datum, Lesezeit) */
.art-meta { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; color:var(--dk-muted); }
.art-meta .am-author { display:inline-flex; align-items:center; gap:10px; color:#F4ECDF; font-weight:600; }
.art-meta .am-author img { width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:1px solid rgba(255,255,255,.2); }
.art-meta .am-dot { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.3); }

/* ---------- Titelbild (echtes Foto / Platzhalter) ---------- */
.art-cover-wrap { margin-top:clamp(-60px,-6vw,-40px); position:relative; z-index:2; }
.art-cover { position:relative; margin:0; max-width:800px; margin-inline:auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh); background:var(--cream-2); }
.art-cover img { width:100%; height:auto; display:block; }
/* Dezentes Overlay über echten Titelbildern: vereinheitlicht den Look und hält den Bildnachweis lesbar */
.art-cover:not(.is-graphic):not(.ph-img)::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(27,20,12,.32) 0%, rgba(27,20,12,0) 30%), rgba(60,40,20,.06); }
/* Platzhalter (kein echtes Bild) behalten einen festen Rahmen */
.art-cover.ph-img { aspect-ratio:16/9; }

/* Bildnachweis, dezent unten rechts im Bild (Standard für alle Ratgeber-Bilder) */
.art-cover .art-credit { position:absolute; right:10px; bottom:9px; z-index:2; margin:0;
  font-size:11px; font-weight:500; line-height:1; letter-spacing:.01em; color:rgba(255,255,255,.92);
  background:rgba(20,14,8,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:5px 10px; border-radius:999px; }
.art-cover .art-credit a { color:#fff; }
@media (max-width:620px){ .art-cover .art-credit { font-size:10px; right:8px; bottom:8px; padding:4px 9px; } }

/* Nummerierter Platzhalter (kein echtes Bild) */
.ph-img { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  background:repeating-linear-gradient(135deg,#efe6d6,#efe6d6 14px,#ece1cf 14px,#ece1cf 28px); color:var(--muted); padding:24px; }
.ph-img::before { content:attr(data-ph); font-family:"Manrope",sans-serif; font-weight:800; font-size:clamp(17px,2vw,22px); letter-spacing:.02em; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 20px; box-shadow:var(--sh-sm); }
.ph-img .ph-desc { max-width:46ch; font-size:13.5px; font-weight:600; line-height:1.5; color:var(--ink-2); }

/* ---------- Artikel-Körper (Lese-Typografie) ---------- */
.art-section { padding-top:clamp(44px,5vw,72px); padding-bottom:clamp(40px,4.5vw,56px); }
.art-body { max-width:720px; margin-inline:auto; }
.art-body > * + * { margin-top:22px; }
.art-intro { font-size:clamp(18px,1.65vw,21px); line-height:1.65; color:var(--ink); font-weight:500; text-wrap:pretty; }
.art-body h2 { font-size:clamp(24px,2.7vw,31px); line-height:1.18; letter-spacing:-.02em; margin-top:clamp(38px,4vw,52px); }
.art-body h3 { font-size:20px; font-weight:700; line-height:1.3; margin-top:clamp(26px,3vw,34px); }
.art-body p { font-size:17.5px; line-height:1.75; color:var(--ink-2); }
.art-body strong { color:var(--ink); font-weight:700; }
.art-body a.inline { color:var(--accent); font-weight:600; border-bottom:1px solid rgba(235,78,28,.4); transition:border-color .2s; }
.art-body a.inline:hover { border-color:var(--accent); }

/* Lese-Liste */
.art-body ul.art-list { list-style:none; margin-top:22px; padding:0; display:grid; gap:14px; }
.art-body ul.art-list li { position:relative; padding-left:30px; font-size:17px; line-height:1.6; color:var(--ink-2); }
.art-body ul.art-list li::before { content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* Merksatz / Pull-Quote */
.art-pull { margin-top:clamp(34px,4vw,46px); padding:clamp(22px,3vw,30px) clamp(24px,3vw,34px); border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 var(--r-lg) var(--r-lg) 0; }
.art-pull p { margin:0; font-size:clamp(18px,1.8vw,22px); line-height:1.5; font-weight:600; color:var(--ink); text-wrap:pretty; }

/* ---------- Kostenüberblick (visueller Beweis) ---------- */
.cost-block { margin-top:clamp(34px,4vw,48px); }
.cost-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cost-head .k { font-size:13px; font-weight:800; letter-spacing:.01em; color:var(--accent); }
.cost-head .hint { font-size:13px; color:var(--faint); }
.cost-cards { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cost-card { display:flex; flex-direction:column; background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-sm); }
.cost-card .cc-label { font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }
.cost-card .cc-price { margin-top:10px; font-size:clamp(19px,2vw,22px); font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.15; white-space:nowrap; }
.cost-card .cc-price small { display:block; font-size:12.5px; font-weight:600; color:var(--faint); letter-spacing:0; margin-top:5px; white-space:normal; }
.cost-card .cc-desc { margin-top:13px; padding-top:13px; border-top:1px solid var(--line-2); font-size:14.5px; line-height:1.55; color:var(--ink-2); }

/* Laufende Kosten (schmaler Streifen) */
.cost-run { margin-top:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; background:var(--dark); background:linear-gradient(168deg,var(--dark-2),var(--dark)); border-radius:var(--r-lg); padding:22px 20px; }
.cost-run .cr-item { display:flex; flex-direction:column; gap:4px; }
.cost-run .cr-item + .cr-item { padding-left:18px; border-left:1px solid var(--dk-line); }
.cost-run .cr-label { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); }
.cost-run .cr-val { font-size:clamp(16px,1.7vw,19px); font-weight:800; color:#fff; letter-spacing:-.01em; }
.cost-run .cr-sub { font-size:12.5px; color:var(--dk-muted); }

/* ---------- Quellen ---------- */
.art-sources { margin-top:clamp(40px,5vw,56px); padding-top:24px; border-top:1px solid var(--line); }
.art-sources h2 { font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0; }
.art-sources ol { margin:16px 0 0; padding-left:20px; display:grid; gap:9px; }
.art-sources li { font-size:14px; line-height:1.55; color:var(--ink-2); }
.art-sources a { color:var(--accent); font-weight:600; word-break:break-word; }
.art-sources a:hover { text-decoration:underline; }
.art-sources .src-note { margin-top:14px; font-size:13px; color:var(--faint); line-height:1.55; }

/* ---------- Ruhiger Leistungshinweis + Erstgespräch (hochwertige Card) ---------- */
.art-offer { padding:0 0 clamp(44px,5vw,60px); }
.art-offer .wrap { max-width:880px; }
.offer-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(32px,4.2vw,52px) clamp(26px,4vw,52px); }
.offer-card h2 { font-size:clamp(21px,2.3vw,26px); margin:0; line-height:1.25; letter-spacing:-.02em; }
.offer-card p { margin-top:14px; color:var(--ink-2); font-size:15.5px; line-height:1.65; max-width:58ch; }
.offer-card .btn { margin-top:26px; }
@media (min-width:900px) {
  .offer-card { display:grid; grid-template-columns:1fr auto; column-gap:64px; align-items:center; }
  .offer-card h2, .offer-card p { grid-column:1; }
  .offer-card .btn { grid-column:2; grid-row:1 / span 2; margin-top:0; }
}

/* ---------- Fazit: abgesetzter Abschluss, Text wie normaler Fliesstext ----------
   Abstands-System wie die anderen Trenn-Bloecke (nl-box, art-sources): 40-56px aussen.
   Die 22px-Rhythmus-Regel (.art-body > * + *) greift nur fuer direkte Kinder,
   darum hier explizit fuer die Kinder des Blocks wiederholt. */
.art-body .art-fazit { margin-top:clamp(40px,5vw,56px); padding-top:clamp(28px,3.5vw,36px); border-top:1px solid var(--line); }
.art-body .art-fazit > * + * { margin-top:22px; }
.art-body .art-fazit h2 { margin-top:0; }

/* ---------- Verwandte Artikel ---------- */
.art-related { padding:clamp(48px,5.5vw,72px) 0 clamp(40px,4.5vw,56px); }
.art-related .sec-head { max-width:760px; }
.art-related .post .cover { display:block; }
.art-related .post .cover .ph-img { position:absolute; inset:0; border-radius:0; padding:16px; }
.art-related .post .cover .ph-img::before { font-size:15px; padding:7px 15px; }

/* ---------- Schluss-CTA (dunkler Abschluss, passend zum Hero) ---------- */
.art-final { position:relative; overflow:hidden; background:linear-gradient(168deg,var(--dark-2),var(--dark)); color:var(--dk-text); text-align:center; padding:clamp(64px,7vw,100px) 0; }
.art-final::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(48% 70% at 50% 0%, rgba(235,78,28,.13), transparent 62%); }
.art-final .wrap { position:relative; z-index:1; max-width:680px; }
.art-final .eyebrow { color:var(--accent-2); }
.art-final h2 { color:#fff; font-size:clamp(27px,3.4vw,40px); margin-top:16px; text-wrap:balance; }
.art-final h2 em { color:var(--accent-2); }
.art-final p { margin:18px auto 0; max-width:46ch; color:#E7DECF; font-size:clamp(16px,1.4vw,17.5px); line-height:1.6; }
.art-final .cta-actions { margin-top:30px; display:flex; justify-content:center; }
.art-final .note { margin-top:16px; font-size:13.5px; color:var(--dk-muted); }

/* ---------- Eingebaute Grafiken in Artikeln ---------- */
/* Google-Unternehmensprofil als Mock */
.gp-mock { max-width:430px; margin:clamp(28px,3.5vw,40px) auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.gp-mock .gp-top { display:flex; align-items:center; gap:13px; padding:18px; }
.gp-mock .gp-logo { width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); }
.gp-mock .gp-id b { display:block; font-size:16px; color:var(--ink); line-height:1.2; }
.gp-mock .gp-id span { font-size:13px; color:var(--muted); }
.gp-mock .gp-rate { display:flex; align-items:center; gap:8px; padding:0 18px 14px; font-size:13.5px; color:var(--muted); }
.gp-mock .gp-rate b { color:var(--ink); font-size:15px; }
.gp-mock .gp-stars { color:var(--accent); letter-spacing:1px; }
.gp-mock .gp-actions { display:flex; gap:8px; padding:0 18px 16px; flex-wrap:wrap; }
.gp-mock .gp-btn { font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); }
.gp-mock .gp-btn.pri { background:var(--accent); color:#fff; border-color:transparent; }
.gp-mock .gp-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--muted); }
.gp-mock .gp-open { color:#1a7f37; font-weight:700; }

/* Anzeigenvergleich Google vs Meta */
.ads-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:clamp(28px,3.5vw,40px) 0 0; }
.ads-col { background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--sh-sm); }
.ads-col .ac-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.ads-col h3 { margin:0; font-size:19px; font-weight:800; line-height:1.2; }
.ads-col > p { margin-top:9px; font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.ads-col ul { list-style:none; margin:15px 0 0; padding:15px 0 0; border-top:1px solid var(--line-2); display:grid; gap:9px; }
.ads-col li { font-size:14px; color:var(--ink-2); line-height:1.5; padding-left:18px; position:relative; }
.ads-col li::before { content:""; position:absolute; left:2px; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.art-cover.is-graphic { background:linear-gradient(168deg,#fbf5ea,#f2e7d5); padding:clamp(20px,3vw,32px); }
.art-cover.is-graphic .ads-compare { margin:0; }
@media (max-width:620px){ .ads-compare { grid-template-columns:1fr; } }

/* Mini-Cover für den Werbung-Artikel (gebaut, kein Foto) */
.post .cover .cover-ads { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:18px; background:linear-gradient(168deg,var(--dark-2),var(--dark)); }
.post .cover .cover-ads b { font-size:clamp(16px,2.2vw,19px); font-weight:800; color:#fff; letter-spacing:-.01em; }
.post .cover .cover-ads i { font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }

/* ---------- Übersichtsseite ---------- */
/* Weniger Abstand zwischen Hero und Karten */
.section.art-overview { padding-top:clamp(40px,5vw,64px); }
.section.art-overview .posts { margin-top:0; }
/* Karten-Überschriften strikt auf zwei Zeilen, damit alle Karten gleich ausgerichtet sind */
.posts .post h3 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }

/* ---------- Mobile-Feinschliff ---------- */
@media (max-width:860px){
  .cost-cards { grid-template-columns:1fr; }
  .cost-run { grid-template-columns:1fr; gap:0; }
  .cost-run .cr-item { padding:14px 0; }
  .cost-run .cr-item + .cr-item { padding-left:0; border-left:0; border-top:1px solid var(--dk-line); }
}
@media (max-width:620px){
  .art-hero { padding-bottom:68px; }
  .art-cat { margin-top:16px; }
  .art-hero h1 { margin-top:14px; }
  .art-cover { border-radius:var(--r-lg); }
  .art-cover-wrap { margin-top:-34px; }
  .art-body p { font-size:16.5px; }
  .art-body ul.art-list li { font-size:16px; }
  .art-meta { gap:10px; font-size:13px; }
  .posts .post h3 { min-height:0; }
}