/* ================================================
   Leisure-Beads Ratgeber-CSS
   Wird nur auf CMS-Seiten geladen (header.tpl)
   ================================================ */

/* ── Ratgeber Übersicht: Hero ── */
.rg-hero { background: linear-gradient(135deg, #fbf1fa 0%, #f9dcf1 100%); border-radius: 10px; padding: 2rem 2rem 1.5rem; margin-bottom: 2rem; }
.rg-hero h1 { font-size: 26px; font-weight: 700; color: #6b1c43; margin-bottom: .5rem; }
.rg-hero p { font-size: 15px; color: #555; margin: 0; }

/* ── Abschnittstitel ── */
.rg-section-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 2.5rem 0 .5rem; border-bottom: 2px solid #f9dcf1; padding-bottom: .4rem; }
.rg-section-sub { font-size: 13px; color: #888; margin-bottom: 1.2rem; }

/* ── Ratgeber Inhalt: Überschriften ── */
.ratgeber-wrap h2 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 2.5rem 0 .75rem; border-bottom: 2px solid #f9dcf1; padding-bottom: .4rem; }
.ratgeber-wrap h3 { font-size: 16px; font-weight: 700; color: #6b1c43; margin: 1.5rem 0 .4rem; }
.rg-intro { font-size: 16px; color: #555; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; }

/* ── Kacheln: Grid ── */
.rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rg-tile { border: 1px solid rgba(251,241,250,0.83); border-radius: 8px; padding: 1.1rem 1.2rem; background: rgba(251,241,250,0.58); display: block; transition: box-shadow .15s; }
.rg-tile:hover { box-shadow: 0 2px 12px rgba(107,28,67,0.10); border-color: #df37d1; text-decoration: none; }
.rg-tile-title { font-size: 15px; font-weight: 700; color: #6b1c43; margin-bottom: .3rem; }
.rg-tile-title a { color: #6b1c43; text-decoration: none; }
.rg-tile-title a:hover { text-decoration: underline; }
.rg-tile-desc { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: .5rem; }
.rg-tile-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.badge-live { background: #d4edda; color: #155724; }
.badge-soon { background: #f9dcf1; color: #6b1c43; }
.rg-tile-coming { opacity: .65; cursor: default; }
.rg-tile-coming:hover { box-shadow: none; border-color: rgba(251,241,250,0.83); }

/* ── Kacheln: Karten (Ratgeber-Inhalt) ── */
.rg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.rg-card { border: 1px solid rgba(251,241,250,0.83); border-radius: 8px; padding: 1.1rem 1.2rem; background: rgba(251,241,250,0.58); }
.rg-card-title { font-size: 15px; font-weight: 700; color: #6b1c43; margin-bottom: .4rem; }
.rg-card-text { font-size: 13px; color: #555; margin-bottom: .6rem; line-height: 1.6; }
.rg-card-link { display: inline-block; font-size: 13px; font-weight: 600; color: #6b1c43; text-decoration: none; border: 1px solid #df37d1; border-radius: 4px; padding: 4px 10px; }
.rg-card-link:hover { background: #6b1c43; color: #fff; }
.rg-card-tag { display: inline-block; font-size: 11px; background: #f9dcf1; color: #6b1c43; border-radius: 20px; padding: 2px 8px; margin-bottom: 6px; }

/* ── Saisonale Kacheln ── */
.rg-seasonal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rg-season-tile { border-radius: 8px; padding: 1.1rem 1.2rem; text-decoration: none; display: block; }
.rg-season-tile:hover { opacity: .85; text-decoration: none; }
.rg-season-tile .rg-tile-title { color: #fff; }
.rg-season-tile .rg-tile-desc { color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.5; margin-bottom: .5rem; }
.s-weihnachten { background: linear-gradient(135deg, #8b1a1a, #c0392b); }
.s-ostern { background: linear-gradient(135deg, #4a7c3f, #7dba6f); }
.s-valentinstag { background: linear-gradient(135deg, #6b1c43, #df37d1); }
.s-muttertag { background: linear-gradient(135deg, #c0712b, #e8a44a); }
.s-sommer { background: linear-gradient(135deg, #1a6b8b, #37b8df); }

/* ── Tabelle ── */
.rg-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 14px; }
.rg-table th { background: #6b1c43; color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; }
.rg-table td { padding: 9px 12px; border-bottom: 1px solid #f9dcf1; vertical-align: top; }
.rg-table tr:nth-child(even) td { background: rgba(246,220,242,0.41); }
.rg-table tr:hover td { background: rgba(241,204,237,0.58); }
.rg-table td:first-child { font-weight: 600; color: #333; }
.rg-table a { color: #6b1c43; text-decoration: none; border-bottom: 1px solid #df37d1; }
.rg-table a:hover { opacity: .75; }

/* ── FAQ ── */
.rg-faq-item { border-bottom: 1px solid #f9dcf1; padding: 1rem 0; }
.rg-faq-q { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: .4rem; }
.rg-faq-q::before { content: "▸ "; color: #6b1c43; }
.rg-faq-a { font-size: 14px; color: #555; line-height: 1.7; }

/* ── Hinweis-Box ── */
.rg-hint { background: #fbf1fa; border-left: 4px solid #df37d1; border-radius: 0 6px 6px 0; padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: 14px; color: #5a3e28; }
.rg-hint a { color: #6b1c43; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .rg-hero { padding: 1.2rem 1rem 1rem; }
  .rg-hero h1 { font-size: 21px; }
  .rg-table { font-size: 12px; }
  .rg-table td, .rg-table th { padding: 7px 6px; }
  .rg-table td:nth-child(3) { display: none; }
  .rg-table th:nth-child(3) { display: none; }
}