/* ratgeber.css
   Gemeinsames Stylesheet für alle Ratgeber-/Modell-Guide-Seiten.
   Vorher war dieser komplette Block als <style> in JEDER einzelnen HTML-Datei
   dupliziert (identisch bei allen 8 Modell-Seiten) - das hat unnötig zur
   "templated content"-Signatur beigetragen, die Google bei der Indexierung
   misstrauisch macht, und wurde bei jedem Seitenaufruf neu mitgeschickt statt
   einmal browserseitig gecacht zu werden.

   Einbindung in jeder Ratgeber-Seite (nach /style.css, damit die Kaskaden-
   Reihenfolge - und damit das Aussehen - exakt gleich bleibt):
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/ratgeber.css">
*/

  .article-hero { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, var(--blue-mid) 100%); padding: 108px 0 56px; color: white; }
  .article-breadcrumb { font-size: 13px; opacity: 0.85; margin-bottom: 18px; }
  .article-breadcrumb a { color: white; text-decoration: none; opacity: 0.85; }
  .article-breadcrumb a:hover { opacity: 1; text-decoration: underline; }
  .article-tag { display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 980px; padding: 5px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
  .article-hero h1 { font-size: clamp(26px,4.5vw,40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.25; max-width: 760px; }
  .article-hero .meta { font-size: 14px; opacity: 0.85; }

  .article-body { max-width: 760px; margin: 0 auto; padding: 56px 24px 24px; }
  .article-body h2 { font-size: 24px; font-weight: 700; color: var(--text); margin: 44px 0 16px; letter-spacing: -0.01em; }
  .article-body h2:first-child { margin-top: 0; }
  .article-body h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
  .article-body p { font-size: 16px; line-height: 1.75; color: var(--text2); margin-bottom: 16px; }
  .article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
  .article-body li { font-size: 16px; line-height: 1.7; color: var(--text2); margin-bottom: 8px; }
  .article-body strong { color: var(--text); }

  .intro-lead { font-size: 18px; line-height: 1.7; color: var(--text); font-weight: 500; margin-bottom: 28px; }

  .toc { background: var(--silver); border-radius: 14px; padding: 20px 24px; margin-bottom: 36px; }
  .toc h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 12px; }
  .toc ol { margin: 0; padding-left: 18px; }
  .toc li { font-size: 14px; margin-bottom: 6px; }
  .toc a { color: var(--blue-dark); text-decoration: none; font-weight: 500; }
  .toc a:hover { text-decoration: underline; }

  .info-box { border-radius: 14px; padding: 20px 24px; margin: 24px 0; border: 1px solid var(--silver-mid); }
  .info-box.warn { background: var(--amber-light); border-color: #F5D9A8; }
  .info-box.good { background: var(--green-light); border-color: #B8E0C8; }
  .info-box.risk { background: var(--red-light); border-color: #F3C2BC; }
  .info-box-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 8px; }
  .info-box p { margin-bottom: 0; font-size: 14.5px; }

  .engine-table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 14.5px; }
  .engine-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--silver-mid); }
  .engine-table td { padding: 12px; border-bottom: 1px solid var(--silver-mid); color: var(--text2); vertical-align: top; }
  .engine-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
  .rating-good { color: var(--green); font-weight: 700; }
  .rating-warn { color: var(--amber); font-weight: 700; }
  .rating-bad { color: var(--red); font-weight: 700; }

  .checklist-box { background: var(--silver); border-radius: 14px; padding: 24px 28px; margin: 28px 0; }
  .checklist-box h3 { margin-top: 0; }
  .checklist-box ul { list-style: none; padding-left: 0; }
  .checklist-box li { padding-left: 28px; position: relative; }
  .checklist-box li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

  .cta-box { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); border-radius: 16px; padding: 32px 28px; margin: 40px 0; text-align: center; color: white; }
  .cta-box h3 { color: white; font-size: 20px; margin-bottom: 8px; }
  .cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 18px; font-size: 15px; }
  .cta-box .btn { background: white; color: var(--blue-dark); }
  .cta-box .btn:hover { background: var(--silver); }

  .article-footer-nav { max-width: 760px; margin: 0 auto; padding: 0 24px 56px; }
  .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-dark); text-decoration: none; font-weight: 600; font-size: 14px; }
  .back-link:hover { text-decoration: underline; }
  .footer-logo-img { height: 36px; width: auto; display: block; }

  .related-box { background: var(--silver); border-radius: 14px; padding: 20px 24px; margin: 28px 0; }
  .related-box h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 12px; }
  .related-box a { display: block; color: var(--blue-dark); text-decoration: none; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
  .related-box a:hover { text-decoration: underline; }

  /* FOOTER (heller Footer-Stil, überschreibt den dunklen Standard aus style.css) */
  .footer { background: #ffffff !important; border-top: 1px solid #e8ecf0; }
  .footer-bottom { background: #f4f6f8 !important; border-top: 1px solid #e8ecf0; }
  .footer-bottom span { color: #6B7280 !important; }
  .footer-brand p { color: #6B7280 !important; }
  .footer-col h4 { color: #0097B2 !important; }
  .footer-col a { color: #374151 !important; }
  .footer-col a:hover { color: #0097B2 !important; }

  @media (max-width: 600px) {
    .article-body { padding: 36px 18px 16px; }
    .article-footer-nav { padding: 0 18px 40px; }
    .engine-table { font-size: 13px; }
    .engine-table th, .engine-table td { padding: 8px 6px; }
    .engine-table td:first-child { white-space: normal; min-width: 92px; }
  }