/* ============================================================
RATGEBER (nordic/blog.mjs)
Baut auf style.css auf: .legal (weiße Textseite, Montserrat, 760 px Lesebreite) und
.faq-item (aufklappbare Fragen wie auf der Startseite). Hier nur, was eine Rechtsseite
nicht braucht: Brotkrumen, Kategorie, Meta-Zeile, Titelbild, Kurzantwort, Merkkasten,
Inhaltsverzeichnis, FAQ hell, Autor, CTA, Übersicht, Druck.
Version im hochzählen: nordic/site.json → ratgeber.css
============================================================ */
/* Lesebreite: kommt allein aus .legal (style.css: Seitenpadding max(20px, (100% - 760px) / 2)),
ergibt 760 px Spalte am Desktop und volle Breite minus 2 x 20 px mobil. trägt beide
Klassen (legal post) — ein zusätzliches max-width hier deckelt die Border-Box und frisst mit
dem Padding die Spalte auf (bis 05.10.2026: 240 px bei 1280, 80 px bei 1440 px Fensterbreite). */
.post { max-width: none; }
/* Brotkrumen wie auf nordic-bau.de: Start › Ratgeber › Beitrag */
.post-crumbs { font-size: 14px; line-height: 21px; color: var(--muted); margin: 0 0 18px; }
.post-crumbs a { color: var(--muted); text-decoration: none; }
.post-crumbs a:hover { color: var(--water); text-decoration: underline; }
.post-crumbs .sep { margin: 0 8px; color: #9aa7b2; }
.post-crumbs .cur { color: var(--ink); }
/* Kategorie-Pille */
.legal .post-cat, .post-cat { display: inline-flex; align-items: center; border-radius: 999px;
background: rgba(232,84,47,.1); color: var(--alarm-text);
padding: 5px 13px; font-size: 12px; font-weight: 600; line-height: 18px;
letter-spacing: .02em; margin: 0 0 14px; }
/* Meta-Zeile mit Icons (Autor, Datum, Lesezeit) */
.legal .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
font-size: 14px; line-height: 21px; color: var(--muted); margin: 14px 0 22px; }
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--alarm); }
.post-meta time { font-weight: 600; }
.legal .post-lead { font-size: 17px; line-height: 27px; color: #2b3841; margin: 12px 0 26px; }
/* Titelbild: feste 16:9-Box gegen Layoutsprünge (height:auto, sonst gewinnt das height-Attribut) */
.post-cover { position: relative; margin: 0 0 30px; }
.post-cover-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto;
border-radius: 8px; background: var(--ice); }
/* EU-KI-VO Art. 50 Abs. 4: Kennzeichnung direkt am Bild */
.post-cover figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 11px; line-height: 16px;
background: rgba(0,0,0,.6); color: #fff; padding: 2px 7px; border-radius: 3px; pointer-events: none; }
/* Ohne Titelbild: Marken-Verlauf mit Kategorie (wie BlogCover auf nordic-bau.de) */
.post-cover--platzhalter { display: flex; align-items: center; justify-content: center;
aspect-ratio: 16 / 9; border-radius: 8px;
background: linear-gradient(135deg, var(--nv-navy-tief) 0%, var(--deep) 55%, var(--water) 100%); }
.post-cover--platzhalter span { padding: 0 24px; text-align: center; color: rgba(255,255,255,.86);
font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
/* Kurzantwort ganz oben: die zitierfähige Antwort in wenigen Sätzen */
.post-tldr { background: var(--ice); border-left: 4px solid var(--water);
padding: 20px 22px; margin: 0 0 32px; border-radius: 0 6px 6px 0; }
.legal .post-tldr h2 { font-size: 14px; line-height: 20px; text-transform: uppercase;
letter-spacing: .08em; color: var(--deep); margin: 0 0 8px; }
.legal .post-tldr p { font-size: 16px; line-height: 26px; color: var(--ink); margin: 0; }
.legal .post-tldr p + p { margin-top: 10px; }
/* Inhaltsverzeichnis */
.post-toc { border: 1px solid #dfe3e6; border-radius: 6px; padding: 18px 20px; margin: 0 0 32px; }
.legal .post-toc-titel { font-size: 14px; line-height: 20px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; margin: 0 0 10px; color: var(--ink); }
.post-toc ol { margin: 0; padding-left: 20px; }
.legal .post-toc li { margin-bottom: 6px; font-size: 15px; line-height: 22px; }
.legal .post-toc a { color: var(--deep); text-decoration: none; }
.legal .post-toc a:hover { text-decoration: underline; }
/* Merkkasten im Fließtext (, variante="alarm" für Achtung) */
.post-note { background: #fff; border: 1px solid #dfe3e6; border-radius: 6px;
padding: 18px 20px; margin: 22px 0; }
.legal .post-note-titel { margin: 0 0 8px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--deep); }
.legal .post-note p:last-child, .legal .post-note ul:last-child, .legal .post-note ol:last-child { margin-bottom: 0; }
.post-note--alarm { border-color: rgba(232,84,47,.4); background: rgba(232,84,47,.05); }
.legal .post-note--alarm .post-note-titel { color: var(--alarm-text); }
/* Tabellen (GFM) */
.post-tabelle { overflow-x: auto; margin: 22px 0; }
.post-tabelle table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 21px; }
.post-tabelle th, .post-tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #dfe3e6; vertical-align: top; }
.post-tabelle th { background: var(--ice); font-weight: 700; }
/* FAQ hell: erbt die Mechanik von .faq-item (style.css), dreht nur die Farben */
.post .faq-item { border-bottom: 1px solid #dfe3e6; }
.post .faq-item:last-of-type { border-bottom: 1px solid #dfe3e6; }
.legal .faq-item summary h3 { font-size: 16px; line-height: 24px; color: var(--ink); margin: 0; }
.post .faq-item summary:hover h3 { color: var(--water); }
.legal .post .faq-item p, .post .faq-item p, .post .faq-item li { font-size: 15px; line-height: 24px; color: #2b3841; }
/* Wer den Text verantwortet () */
.post-author { border-top: 2px solid var(--ink); margin: 40px 0 0; padding: 20px 0 0; }
.legal .post-author .post-note-titel { font-size: 15px; line-height: 22px; color: var(--ink); }
.legal .post-author p { font-size: 14px; line-height: 22px; color: var(--muted); }
.legal .post-author a { color: var(--muted); }
/* Weiterführende Artikel */
.post-weiter { margin: 40px 0 0; padding: 18px 22px; background: var(--ice); border-radius: 6px; }
.legal .post-weiter-titel { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.post-weiter ul { margin: 0; }
.legal .post-weiter li { margin: 0 0 6px; }
.legal .post-weiter a { color: var(--deep); }
/* Abschluss-Kasten zum Notruf */
.post-cta { background: var(--ink); color: #fff; border-radius: 8px; padding: 26px 24px; margin: 36px 0 0; }
.legal .post-cta h2 { font-size: 20px; line-height: 28px; color: #fff; margin: 0 0 8px; }
.legal .post-cta p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 24px; margin: 0 0 16px; }
.legal .post-cta .post-cta-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.legal .post-cta a.post-cta-btn { display: inline-block; background: var(--alarm-dark); color: #fff;
font-weight: 700; font-size: 16px; text-decoration: none; padding: 13px 22px; }
.legal .post-cta a.post-cta-btn:hover { background: var(--alarm-darker); }
.legal .post-cta a.post-cta-btn--hell { background: transparent; border: 1px solid rgba(255,255,255,.45); }
.legal .post-cta a.post-cta-btn--hell:hover { background: rgba(255,255,255,.08); }
/* Übersicht */
.bloglist { display: grid; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.legal .bloglist li { margin: 0; }
.bloglist-karte { display: block; border: 1px solid #dfe3e6; border-radius: 8px; overflow: hidden;
text-decoration: none; transition: border-color .2s; }
.bloglist-karte:hover { border-color: var(--water); }
.bloglist-karte .post-cover { margin: 0; }
.bloglist-karte .post-cover-img, .bloglist-karte .post-cover--platzhalter { border-radius: 0; }
.bloglist-body { display: block; padding: 20px 22px 22px; }
.bloglist-body .post-cat { margin-bottom: 10px; }
.bloglist-titel { display: block; font-size: 19px; line-height: 27px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.bloglist-karte:hover .bloglist-titel { color: var(--water); }
.bloglist-text { display: block; font-size: 15px; line-height: 24px; color: #2b3841; margin: 0 0 12px; }
.bloglist-meta { display: block; font-size: 13px; line-height: 20px; color: var(--muted); }
/* Footer ohne den Kopf-Abstand der Kontakt-Sektion (wie die Fehlerseite) */
.cta.blog-fuss { padding-top: 0; }
@media (min-width: 720px) {
.post-tldr { padding: 24px 26px; }
.post-cta { padding: 32px 30px; }
.bloglist { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
DRUCK / PDF
Beiträge sollen sich sauber ausdrucken lassen (auch als PDF zur Freigabe): Navigation,
Inhaltsverzeichnis, Notruf-Kasten und Footer raus, Farbflächen zu Rahmen, FAQ aufgeklappt.
============================================================ */
@media print {
@page { margin: 18mm 16mm; }
.vnav, .post-toc, .post-crumbs, .post-cta, .post-weiter, .blog-fuss, .dock, .vmodal { display: none !important; }
.post-cat { border: 1pt solid #bbb; background: none !important; color: #000 !important; }
.post-meta svg { display: none; }
body { background: #fff !important; }
.legal, .post { max-width: none; padding: 0; color: #000; }
.post h1 { font-size: 24pt; line-height: 1.25; }
.post h2 { font-size: 15pt; margin-top: 18pt; break-after: avoid; }
.post h3 { font-size: 12pt; margin-top: 12pt; break-after: avoid; }
.post p, .post li { font-size: 10.5pt; line-height: 1.55; color: #000; orphans: 3; widows: 3; }
.post-cover { max-height: 70mm; overflow: hidden; break-inside: avoid; }
.post-cover--platzhalter { display: none; }
.post-tldr { border: 1pt solid #888; border-left-width: 3pt; background: none !important; break-inside: avoid; }
.post-note { border: 1pt solid #bbb; background: none !important; break-inside: avoid; }
.post-note--alarm { border-color: #888; }
.post-author { break-inside: avoid; }
/* FAQ: im Druck immer vollständig sichtbar, ohne Aufklapp-Symbol. Geschlossene
druckt der Browser nur mit der Frage; blog/druck.js öffnet sie deshalb vor dem Druck. */
.post .faq-item { border-bottom: 1pt solid #ccc; break-inside: avoid; }
.post .faq-item summary { padding: 8pt 0 2pt; }
.post .faq-item summary::before, .post .faq-item summary::after { display: none; }
.post .faq-item p { padding-bottom: 8pt; }
/* Linkziele ausschreiben, sonst sind Verweise auf Papier wertlos */
.post a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
.post a[href^="/"]::after { content: " (nordic-sanierung.de" attr(href) ")"; font-size: 8.5pt; color: #555; }
.post a[href^="tel:"]::after, .post a[href^="#"]::after { content: ""; }
}