/* Ratgeber-Artikel, Checklisten-Anmeldung und Gutschein-Hinweis.
   Eigene Datei, weil die CSP (style-src 'self') keine eingebetteten Styles erlaubt. */

.artikel-meta{ color:var(--muted); font-size:.92rem; margin:0 0 1.2rem; }
.kurz{ margin:1.2rem 0 1.8rem; }
.kurz p{ font-size:1.05rem; line-height:1.6; }

.article blockquote{ margin:1.4rem 0; padding:.9rem 1.2rem; background:var(--warn-bg);
  border-left:4px solid var(--warn-line); border-radius:0 8px 8px 0; }
.article blockquote p{ margin:.4rem 0; font-size:.97rem; line-height:1.55; }
.article ol{ line-height:1.7; }
.article li{ margin:.25rem 0; }
.tabelle{ overflow-x:auto; margin:1.1rem 0; -webkit-overflow-scrolling:touch; }
.tabelle table{ margin:0; min-width:30rem; }
.tabelle:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.faq h3{ margin-top:1.4rem; }

/* Kästen im und unter dem Artikel */
.cta-box{ margin:2rem 0; padding:1.2rem 1.3rem 1.3rem; background:var(--card); border:1px solid var(--line);
  border-radius:10px; }
.cta-box h2, .cta-box h3{ margin:0 0 .5rem; padding:0; border:0; font-size:1.15rem; }
.cta-box p{ margin:.4rem 0 .9rem; line-height:1.55; }
.cta-box .btn{ margin:.2rem .4rem .2rem 0; }
.cta-buch{ display:flex; gap:1.2rem; align-items:flex-start; border-color:var(--accent); }
.cta-buch img{ width:7rem; height:auto; border-radius:6px; flex:none; box-shadow:0 4px 14px rgba(0,0,0,.18); }
@media (max-width:34rem){ .cta-buch{ flex-direction:column; } .cta-buch img{ width:6rem; } }
.hinweis-beratung{ font-size:.9rem; color:var(--muted); margin-top:2rem; }

.weiter{ margin:2.4rem 0 0; }
.weiter h2{ font-size:1.15rem; }
.weiter ul{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.5rem; }
.weiter a{ display:block; padding:.7rem .9rem; border:1px solid var(--line); border-radius:9px;
  text-decoration:none; color:inherit; background:var(--card); }
.weiter a:hover{ border-color:var(--accent); }
.weiter strong{ color:var(--accent); display:block; }
.weiter span{ font-size:.9rem; color:var(--muted); }

/* Übersicht /ratgeber/ */
.rg-liste{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.8rem; }
.rg-liste a{ display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:inherit; background:var(--card); }
.rg-liste a:hover{ border-color:var(--accent); }
.rg-liste strong{ display:block; color:var(--accent); font-size:1.05rem; margin-bottom:.25rem; }
.rg-liste span{ color:var(--muted); font-size:.95rem; line-height:1.5; }

/* Anmeldung Checkliste */
.lead-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin:1.6rem 0 2rem; }
@media (min-width:52rem){ main.article:has(.lead-grid){ max-width:60rem; } .lead-grid{ grid-template-columns:1.1fr 1fr; align-items:start; } }
.lead-grid h2{ margin-top:0; font-size:1.2rem; }
.lead-box{ padding:1.3rem 1.3rem 1.1rem; background:var(--card); border:2px solid var(--accent); border-radius:12px; }
.lead-form label{ display:block; font-weight:700; margin:0 0 .35rem; }
.lead-form input[type=email]{ width:100%; box-sizing:border-box; font:inherit; padding:.75rem .8rem; border:1px solid var(--muted);
  border-radius:8px; background:var(--bg); color:var(--fg); }
.lead-form input[type=email]:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }
.lead-form .einw{ display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.9rem; line-height:1.5; margin:1rem 0; }
.lead-form .einw input{ width:1.25rem; height:1.25rem; margin:.15rem 0 0; flex:none; }
.lead-form .btn{ width:100%; border:0; cursor:pointer; font:inherit; font-weight:700; }
.lead-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.klein{ font-size:.88rem; color:var(--muted); line-height:1.5; }
ul.haken{ list-style:none; padding:0; margin:.6rem 0 1rem; display:grid; gap:.7rem; }
ul.haken li{ position:relative; padding-left:1.7rem; line-height:1.55; }
ul.haken li::before{ content:"✓"; position:absolute; left:0; font-weight:700; color:var(--ok); }

/* Gutschein-Hinweis: wird von /assets/seite.js nur eingeblendet, wenn ein gültiger Code in der Adresse steht */
.gutschein{ margin:0; padding:.7rem 1.2rem; background:var(--warn-bg); border-bottom:2px solid var(--warn-line);
  text-align:center; font-size:.98rem; line-height:1.45; }
.gutschein strong{ white-space:nowrap; }