/* Ratgeber (#46) – ergänzt assets/uebersicht.css um Artikel-Gestaltung */
.artikel-kopf { background: linear-gradient(160deg, var(--nacht), var(--navy)); color: var(--weiss); padding-block: 40px 34px; }
.brotkrumen { font-size: 13px; margin: 0 0 14px; color: #c7d3e8; }
.brotkrumen a { color: #ffffff; }
.artikel-kopf h1 { font: 800 clamp(28px, 4.6vw, 44px)/1.1 var(--display); margin: 0 0 12px; max-width: 24ch; text-wrap: balance; }
.artikel-meta { font-size: 14px; color: #c7d3e8; margin: 0; }

.artikel { display: grid; gap: 32px; padding-block: 36px 56px; }
@media (min-width: 1000px) { .artikel { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.artikel-text { min-width: 0; max-width: 72ch; }
.artikel-text h2 { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--display); color: var(--navy); margin: 40px 0 10px; scroll-margin-top: 80px; text-wrap: balance; }
.artikel-text h3 { font: 800 18px/1.3 var(--display); margin: 24px 0 6px; }
.artikel-text p, .artikel-text li { font-size: 16.5px; }
.artikel-text ul { padding-left: 22px; }
.artikel-text li { margin-bottom: 6px; }
.kurzantwort { background: var(--weiss); border-left: 5px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px; box-shadow: var(--schatten); }
.kurzantwort strong { display: block; font: 800 13px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 6px; }
.kurzantwort p { margin: 0; }
.inhalt { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 20px; margin-top: 22px; }
.inhalt strong { font-size: 14px; }
.inhalt ol { margin: 8px 0 0; padding-left: 20px; }
.inhalt li { font-size: 15px; margin-bottom: 4px; }
.tabelle-wrap { overflow-x: auto; margin: 14px 0 6px; background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius); }
.tabelle-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabelle-wrap table.breit { min-width: 520px; }  /* nur dreispaltige Tabellen scrollen auf dem Handy */
.tabelle-wrap th, .tabelle-wrap td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rand); }
.tabelle-wrap th { background: var(--papier); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
.tabelle-wrap tr:last-child td { border-bottom: 0; }
.tabelle-wrap td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quelle { font-size: 13px; color: var(--text-leise); }
.angebot-box { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--weiss); border: 2px solid var(--gold); border-radius: var(--radius); padding: 14px; margin: 26px 0; }
.angebot-box img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; width: 140px; height: auto; }
.angebot-box p { margin: 0 0 8px; font-size: 15px; }
.angebot-box strong.titel-klein { display: block; font: 800 17px/1.25 var(--display); margin-bottom: 4px; }
.angebot-box a { font-weight: 700; color: var(--navy); }
@media (max-width: 480px) { .angebot-box { grid-template-columns: 1fr; } .angebot-box img { width: 100%; } }
.faq details { border-bottom: 1px solid var(--rand); background: var(--weiss); padding: 0 16px; }
.faq details:first-of-type { border-radius: var(--radius) var(--radius) 0 0; border-top: 1px solid var(--rand); }
.faq details:last-of-type { border-radius: 0 0 var(--radius) var(--radius); }
.faq summary { cursor: pointer; font-weight: 700; padding: 13px 0; }
.faq details p { margin: 0 0 14px; color: var(--text-leise); }
.hinweis-recht { font-size: 13px; color: var(--text-leise); margin-top: 28px; }

.seitenleiste { display: grid; gap: 16px; }
@media (min-width: 1000px) { .seitenleiste { position: sticky; top: 84px; } }
.seitenkarte { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.seitenkarte h2 { font: 800 17px/1.3 var(--display); margin: 0 0 8px; color: var(--navy); }
.seitenkarte p { margin: 0 0 12px; font-size: 14.5px; color: var(--text-leise); }
.seitenkarte .knopf { width: 100%; justify-content: center; margin-top: 6px; }

/* Ratgeber-Übersicht */
.ratgeber-liste { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); padding-block: 36px 56px; }
.ratgeber-karte { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ratgeber-karte h2 { font: 800 20px/1.25 var(--display); margin: 0; }
.ratgeber-karte h2 a { color: var(--text); text-decoration: none; }
.ratgeber-karte p { margin: 0; color: var(--text-leise); }
.ratgeber-karte .mehr { margin-top: auto; font-weight: 700; color: var(--navy); }

/* Reel zum Artikel (#126) – Hochformat-Video aus dem Reel-Ordner, vom Artikel-Bot eingebettet */
.reel-einbettung { margin: 26px 0; display: grid; gap: 10px; justify-items: start; }
.reel-einbettung video { width: min(100%, 360px); height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--nacht); box-shadow: var(--schatten); display: block; }
.reel-einbettung figcaption { font-size: 14px; color: var(--text-leise); max-width: 60ch; }
/* Play-Knopf über dem Reel (#174), von seo-track.js eingesetzt */
.reel-wrap { position: relative; display: block; width: min(100%, 360px); line-height: 0; }
.reel-wrap video { width: 100%; height: auto; }   /* height-Attribut (960) würde sonst ein hohes Kästchen mit Balken ergeben */
.reel-play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: 0; padding: 0 0 0 6px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: pointer; display: grid; place-items: center; transform: translate(-50%, -50%); transition: transform .15s ease, background .15s ease; -webkit-appearance: none; appearance: none; }
.reel-play:hover, .reel-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: #fff; outline: none; }
.reel-play::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: reel-puls 2.2s ease-out infinite; pointer-events: none; }
@keyframes reel-puls { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.reel-wrap.spielt .reel-play { display: none; }
@media (prefers-reduced-motion: reduce) { .reel-play::after { animation: none; } }
.reel-einbettung figcaption a { color: var(--navy); font-weight: 700; }
.kernaussagen { background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 20px; margin-top: 18px; }
.kernaussagen strong { display: block; font: 800 13px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 8px; }
.kernaussagen ul { margin: 0; padding-left: 20px; }
.kernaussagen li { margin-bottom: 6px; }
.verwandt { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 20px; margin-top: 32px; }
.verwandt strong { font-size: 14px; }
.verwandt ul { margin: 8px 0 0; padding-left: 20px; }
.verwandt li { margin-bottom: 4px; }
.verwandt a { color: var(--navy); font-weight: 700; }

/* Artikelbilder (#167) – Standbilder aus dem Reel und Galeriefotos, vom Artikel-Bot nach dem ersten Absatz eingebaut */
.artikel-bild { margin: 22px 0 26px; }
.artikel-bild img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schatten); background: var(--papier); }
.artikel-bild.hoch img { max-width: 360px; margin-inline: auto; }
.artikel-bild figcaption { font-size: 13.5px; line-height: 1.45; color: var(--text-leise); margin-top: 8px; }
.artikel-bild.hoch figcaption { text-align: center; }

/* Kontakt-Kasten im Artikel (#176) – offene Fragen aus dem Reel führen zur Beratung: Telefon, WhatsApp, E-Mail */
.kontakt-box { background: linear-gradient(160deg, var(--nacht), var(--navy)); color: var(--weiss); border-radius: var(--radius); padding: 20px 22px; margin: 26px 0; box-shadow: var(--schatten); }
.kontakt-box strong.titel-klein { display: block; font: 800 18px/1.25 var(--display); margin-bottom: 6px; color: var(--weiss); }
.kontakt-box p { margin: 0 0 14px; color: #dbe4f3; font-size: 15.5px; }
.kontakt-box .kontakt-wege { display: flex; flex-wrap: wrap; gap: 10px; }
.kontakt-box .knopf { margin: 0; }
.kontakt-box .knopf-rand { color: var(--weiss); border-color: rgba(255, 255, 255, .55); }
.kontakt-box .knopf-rand:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 480px) { .kontakt-box .kontakt-wege { flex-direction: column; } .kontakt-box .knopf { justify-content: center; } }