/* ============================================================ DJ Beat & Bite – Blog-Zusatzstyles Einbinden in blog.php: Nutzt die CSS-Variablen aus /styles.css (--surface, --line, --text, ...) ============================================================ */ /* ---- Hintergrund aller Blog-Seiten: dunkles Mitternachtsblau ---- Greift nur, weil gesetzt ist – der Rest der Website bleibt unverändert. Farbe bei Bedarf hier anpassen. */ body.blog-page { background: #0d1b2a; } /* ---- Inhaltsverzeichnis-Box (oben im Artikel) ---- */ .post-body nav[aria-label] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; margin: 0 0 30px; } .post-body nav[aria-label] > p { margin: 0 0 6px; } .post-body nav[aria-label] ul { margin: 6px 0 0 18px; } .post-body nav[aria-label] li { margin-bottom: 6px; } /* ---- Abschnitts-Kästchen (jeder H2-Block = eine Box) ---- Grundgerüst; die Farbe pro Abschnitt kommt aus der Rotation unten. Rot ist bewusst NICHT dabei – das bleibt den Kostenboxen vorbehalten. */ .post-body .post-section { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold-soft); border-radius: var(--radius); padding: 20px 26px; margin: 0 0 20px; } .post-body .post-section > h2:first-child, .post-body .post-section > h3:first-child { margin-top: 0; } /* Farb-Rotation der Abschnitte (7 Farben, wiederholt sich danach) */ .post-body .post-section:nth-of-type(7n+1) { border-left-color: #f5a524; background: linear-gradient(rgba(245,165,36,.06), rgba(245,165,36,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+2) { border-left-color: #30a46c; background: linear-gradient(rgba(48,164,108,.06), rgba(48,164,108,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+3) { border-left-color: #3e9dd6; background: linear-gradient(rgba(62,157,214,.06), rgba(62,157,214,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+4) { border-left-color: #8e6cd6; background: linear-gradient(rgba(142,108,214,.06), rgba(142,108,214,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+5) { border-left-color: #12a594; background: linear-gradient(rgba(18,165,148,.06), rgba(18,165,148,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+6) { border-left-color: #d67b3e; background: linear-gradient(rgba(214,123,62,.06), rgba(214,123,62,.06)), var(--surface); } .post-body .post-section:nth-of-type(7n+7) { border-left-color: #e0629b; background: linear-gradient(rgba(224,98,155,.06), rgba(224,98,155,.06)), var(--surface); } /* ---- Rote Warn-/Kostenbox (Nachteile, Extrakosten) ---- */ .post-body .cost-warning { background: rgba(229, 72, 77, .10); border: 1px solid rgba(229, 72, 77, .45); border-left: 4px solid #e5484d; border-radius: var(--radius); padding: 4px 18px; margin: 18px 0; } .post-body .cost-warning p { color: var(--text); margin: 14px 0; } .post-body .cost-warning strong { color: #ff7a7d; } /* ---- Grüne Vorteils-/Tippbox (positive Punkte, Tipps) ---- */ .post-body .success-note { background: rgba(48, 164, 108, .10); border: 1px solid rgba(48, 164, 108, .45); border-left: 4px solid #30a46c; border-radius: var(--radius); padding: 4px 18px; margin: 18px 0; } .post-body .success-note p { color: var(--text); margin: 14px 0; } .post-body .success-note strong { color: #5bd6a4; } /* ============================================================ Blog-Übersicht: jede Karte in einer anderen Farbe Farbe rotiert automatisch über 8 Einträge (nth-child). ============================================================ */ .blog-list .blog-card { position: relative; } /* farbiger "Rücken" links an jeder Karte */ .blog-list .blog-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2; } /* 1 */ .blog-list .blog-card:nth-child(8n+1)::before { background: #e5484d; } /* 2 */ .blog-list .blog-card:nth-child(8n+2)::before { background: #f5a524; } /* 3 */ .blog-list .blog-card:nth-child(8n+3)::before { background: #30a46c; } /* 4 */ .blog-list .blog-card:nth-child(8n+4)::before { background: #3e9dd6; } /* 5 */ .blog-list .blog-card:nth-child(8n+5)::before { background: #8e6cd6; } /* 6 */ .blog-list .blog-card:nth-child(8n+6)::before { background: #e0629b; } /* 7 */ .blog-list .blog-card:nth-child(8n+7)::before { background: #12a594; } /* 8 */ .blog-list .blog-card:nth-child(8n+8)::before { background: #d67b3e; } /* dezenter farbiger Rahmen im Ruhezustand (Hover bleibt Gold) */ .blog-list .blog-card:nth-child(8n+1) { border-color: rgba(229, 72, 77, .50); } .blog-list .blog-card:nth-child(8n+2) { border-color: rgba(245, 165, 36, .50); } .blog-list .blog-card:nth-child(8n+3) { border-color: rgba(48, 164, 108, .50); } .blog-list .blog-card:nth-child(8n+4) { border-color: rgba(62, 157, 214, .50); } .blog-list .blog-card:nth-child(8n+5) { border-color: rgba(142, 108, 214, .50); } .blog-list .blog-card:nth-child(8n+6) { border-color: rgba(224, 98, 155, .50); } .blog-list .blog-card:nth-child(8n+7) { border-color: rgba(18, 165, 148, .50); } .blog-list .blog-card:nth-child(8n+8) { border-color: rgba(214, 123, 62, .50); }