/* Theme Name: WECHSELPUNKT Blog Theme URI: https://wechselpunkt.com Author: Miguel Baptista Author URI: https://wechselpunkt.com Description: Schlankes Blog-Theme für blog.wechselpunkt.com. Bringt eine eigene Kopie von Farben, Typografie und Layout-Regeln der Hauptseite mit (css/, js/, assets/ in diesem Theme-Ordner) — hier stehen nur die Regeln, die speziell für Artikel-Übersicht und Artikel-Ansicht dazukommen. Version: 1.0.0 Text Domain: wechselpunkt-blog */ /* Absicherung: Elementor (als Plugin auf dieser Installation vorhanden, wird von diesem Theme aber nicht genutzt) erzwingt über body.post-template-* - Klassen teils eine schmale, zentrierte Lesebreite auf — das reißt unser eigentlich volle-Breite-Layout (.page/.page-content) aus der Bahn, sobald einem Beitrag versehentlich eine Elementor-Vorlage zugewiesen ist (Dokument → Vorlage im Editor). Diese Regel läuft als letztes CSS und stellt body unabhängig von jeder Plugin-Klasse zuverlässig zurück. */ body{max-width:none!important;width:auto!important;margin:0!important} /* ---------- Blog-Hero (Übersichtsseite) ---------- Ohne Kopfzeilenbild (Design → Anpassen → Kopfzeilenbild) bleibt der Hintergrund schlicht Schwarz. Ist eines gesetzt, übernimmt index.php es per Inline-Style als background-image — der abdunkelnde Verlauf hier sorgt dafür, dass der weiße Text unabhängig vom Bildinhalt lesbar bleibt (gleiches Prinzip wie beim Footer-Hintergrund in site.css). */ .blog-hero{position:relative;overflow:hidden;background-color:var(--wp-black);background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--wp-white);padding:clamp(56px,9vw,120px) clamp(20px,5.5vw,80px) clamp(40px,6vw,64px)} .blog-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%)} .blog-hero h1,.blog-hero p{position:relative;z-index:1} .blog-hero h1{margin:0 0 16px;text-transform:uppercase;color:var(--wp-white)} .blog-hero p{margin:0;max-width:60ch;color:var(--wp-white)} /* ---------- Artikel-Übersicht (Grid aus Karten) ---------- Jede Karte ist jetzt ein "richtiger" Kasten mit Rahmen/Schatten statt loser Text+Bild-Elemente — auch Artikel ohne Beitragsbild bekommen einen einheitlichen Platzhalter-Block, damit das Grid nicht unregelmäßig aussieht, wenn nur manche Artikel ein Bild haben. */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px;padding:clamp(40px,6vw,64px) clamp(20px,5.5vw,80px)} .blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--wp-white);border:1px solid var(--wp-black);overflow:hidden;transition:transform 220ms ease,box-shadow 220ms ease} .blog-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)} .blog-card-thumb,.blog-card-thumb-placeholder{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:filter 280ms ease,transform 280ms ease} .blog-card-thumb-placeholder{background:var(--wp-black)} /* Gelber Titel im Hover ist auf Weiß kaum lesbar (Gelb ist bewusst nur für Punkt/Buttons reserviert) — Hover-Feedback läuft stattdessen rein über das Bild (leichtes Weichzeichnen + Zoom), der Titel bleibt unverändert schwarz. */ .blog-card:hover .blog-card-thumb,.blog-card:hover .blog-card-thumb-placeholder{filter:blur(2px) brightness(.85);transform:scale(1.04)} .blog-card-body{display:flex;flex-direction:column;gap:12px;padding:20px 24px 28px} .blog-card-meta{margin:0;font-size:13px;color:var(--wp-gray-80,#333)} .blog-card h2{margin:0;font-size:22px;line-height:120%;color:var(--wp-black)} .blog-card p{margin:0;font-size:14px;line-height:150%;color:var(--wp-black)} .blog-empty{padding:clamp(40px,6vw,64px) clamp(20px,5.5vw,80px);font-size:16px} /* ---------- Pagination ---------- */ .blog-pagination{display:flex;gap:12px;flex-wrap:wrap;padding:0 clamp(20px,5.5vw,80px) clamp(56px,8vw,96px)} .blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:8px;border:1px solid rgba(0,0,0,.15);text-decoration:none;color:var(--wp-black);font-size:14px} .blog-pagination .current{background:var(--wp-black);color:var(--wp-white);border-color:var(--wp-black)} .blog-pagination a:hover{border-color:var(--wp-black)} /* ---------- Einzelner Artikel ---------- */ .single-post{max-width:880px;margin:0 auto;padding:clamp(56px,8vw,96px) clamp(20px,5.5vw,80px) clamp(64px,9vw,120px)} .single-post .post-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:32px;font-size:14px;color:var(--wp-black);text-decoration:none} .single-post .post-back:hover{color:var(--wp-accent)} .single-post h1{margin:0 0 16px;text-transform:uppercase} .single-post .post-meta{margin:0 0 32px;font-size:13px;color:var(--wp-gray-80,#333)} .single-post .post-thumb{width:100%;margin-bottom:40px;display:block} .post-content{font-size:16px;line-height:170%;color:var(--wp-black)} .post-content p{margin:0 0 24px} .post-content h2{margin:48px 0 16px;text-transform:uppercase} .post-content h3{margin:32px 0 12px} .post-content ul,.post-content ol{margin:0 0 24px;padding-left:20px} .post-content li{margin-bottom:8px} .post-content img{max-width:100%;height:auto;margin:32px 0} .post-content a{color:var(--wp-black);text-decoration:underline} .post-content a:hover{color:var(--wp-accent)} .post-content blockquote{margin:32px 0;padding-left:20px;border-left:3px solid var(--wp-accent);font-style:italic} @media (max-width:640px){ .single-post{padding-top:40px} }