/* Ratgeber- und Vergleichsseiten (20.10.2026, Learnings aus Dan Kulkovs
   Video: Inhalte zu echten Suchbegriffen, ohne JavaScript lesbar).
   Baut auf styles.css auf (nav, footer, section, eyebrow, hero-bg). */

.guide-hero { position: relative; padding: 150px clamp(20px,5vw,40px) 30px; text-align: center; }
.guide-hero h1 { margin: 0 0 18px; font-weight: 900; font-size: clamp(30px,5.6vw,54px); letter-spacing: -1px;
  color: #fff; text-transform: uppercase; line-height: 1.05; }
.guide-hero h1 .lime { color: #A4DC4A; }
.guide-hero .lead { margin: 0 auto; max-width: 640px; font-weight: 500; font-size: 17px; line-height: 1.65; color: #CCCCCC; }
.guide-meta { margin: 18px auto 0; font-size: 12.5px; letter-spacing: .5px; color: #777; }

.guide { max-width: 760px; margin: 0 auto; }
.guide h2 { margin: 0 0 16px; font-weight: 900; font-size: clamp(22px,3.4vw,30px); color: #fff; line-height: 1.15; }
.guide h3 { margin: 26px 0 8px; font-weight: 800; font-size: 18px; color: #fff; }
.guide p, .guide li { font-size: 16px; line-height: 1.7; color: #c4c4c4; }
.guide p { margin: 0 0 14px; }
.guide strong { color: #fff; }
.guide a { color: #A4DC4A; }
.guide ul, .guide ol { margin: 0 0 16px; padding-left: 22px; }
.guide li { margin-bottom: 6px; }

.guide-toc { max-width: 760px; margin: 34px auto 0; padding: 18px 22px; border: 1px solid #1e1e1e; border-radius: 14px;
  background: #111; text-align: left; }
.guide-toc .t { display: block; font-weight: 800; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #A4DC4A; margin-bottom: 8px; }
.guide-toc ol { margin: 0; padding-left: 20px; }
.guide-toc li { font-size: 14.5px; line-height: 1.7; color: #bbb; }
.guide-toc a { color: #ddd; text-decoration: none; }
.guide-toc a:hover { color: #A4DC4A; }

.guide-fig { margin: 22px 0 24px; border: 1px solid #1e1e1e; border-radius: 16px; overflow: hidden; background: #111; }
.guide-fig img { display: block; width: 100%; height: auto; }
.guide-fig figcaption { padding: 12px 16px 14px; font-size: 13.5px; line-height: 1.55; color: #999; }

.guide-box { margin: 20px 0 22px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.12); border-left: 3px solid #A4DC4A;
  border-radius: 10px; background: rgba(255,255,255,.03); }
.guide-box p { margin: 0; font-size: 15px; }

.guide-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14.5px; }
.guide-table th, .guide-table td { padding: 10px 12px; border-bottom: 1px solid #1f1f1f; text-align: left; vertical-align: top; color: #c4c4c4; }
.guide-table th { font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #A4DC4A; }
.guide-table td strong { color: #fff; }
.guide-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Breite Tabellen werden auf dem Handy zu Karten (Spaltenname aus data-label). */
@media (max-width: 600px) {
  .guide-table.stack thead { display: none; }
  .guide-table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid #1f1f1f; }
  .guide-table.stack td { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 3px 0; border: 0; }
  .guide-table.stack td::before { content: attr(data-label); font-weight: 800; font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; color: #A4DC4A; padding-top: 2px; }
  .guide-table.stack td:first-child { display: block; padding-bottom: 6px; font-size: 16px; }
  .guide-table.stack td:first-child::before { content: none; }
}

.guide-checklist { list-style: none; padding-left: 0 !important; }
.guide-checklist li { position: relative; padding-left: 28px; }
.guide-checklist li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 12px; border-radius: 3px;
  border: 2px solid #A4DC4A; }

.guide-faq details { border-bottom: 1px solid #1c1c1c; padding: 14px 0; }
.guide-faq summary { position: relative; cursor: pointer; padding-right: 28px; font-weight: 800; font-size: 16px; color: #fff; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; position: absolute; right: 4px; top: 0; color: #A4DC4A; font-weight: 900; }
.guide-faq details[open] summary::after { content: "–"; }
.guide-faq details p { margin: 10px 0 0; }

.guide-cta { text-align: center; padding: clamp(60px,9vw,110px) clamp(20px,5vw,40px); border-top: 1px solid #151515; }
.guide-cta h2 { margin: 0 0 14px; font-weight: 900; font-size: clamp(26px,4.5vw,40px); color: #fff; text-transform: uppercase; letter-spacing: -0.5px; }
.guide-cta p { margin: 0 auto 26px; max-width: 520px; font-size: 15px; line-height: 1.6; color: #bbb; }
.guide-cta .btn { display: inline-block; padding: 16px 34px; border-radius: 999px; background: #A4DC4A; color: #0A0A0A;
  font-weight: 900; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }

.guide-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.guide-related a { display: block; padding: 18px; border: 1px solid #1e1e1e; border-radius: 14px; background: #111; text-decoration: none; }
.guide-related .t { display: block; font-weight: 800; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #A4DC4A; margin-bottom: 6px; }
.guide-related .h { display: block; font-weight: 800; font-size: 16px; color: #fff; line-height: 1.3; }

/* Uebersicht /ratgeber und /guides: Kacheln mit kurzer Beschreibung */
.guide-index { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 0; }
.guide-index a { padding: 22px; transition: border-color .2s; }
.guide-index a:hover { border-color: #A4DC4A; }
.guide-index .h { font-size: 19px; }
.guide-index .d { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: #aaa; }