/* ============================================================ SD-Link — Neuigkeiten (Übersicht + Einzelansicht). Portiert aus design_handoff_neuigkeiten/code/community.css (Abschnitt „NEUIGKEITEN"). Nur Marken-Tokens aus sdlink-tokens.css. Zwei Kontexte (Enqueue-Guard in functions.php): · .sd-news-page — Übersicht (Shortcode [sd_neuigkeiten]). · .sd-news-single — echter Single-Beitrag, dem das Detaildesign übergestülpt wird (Storefront entry-header/-content). Geteilte Primitives (.sd-breadcrumb, .sd-chip, .sd-back-link) hier lokal, wie bei den Content-/Galerie-Seiten. ============================================================ */ .sd-news-page { max-width: 1180px; margin: 0 auto; padding: 8px 24px 24px; } /* ===== Breadcrumb (Übersicht + Einzelansicht) ============= */ .sd-news-page .sd-breadcrumb, .sd-news-single .sd-breadcrumb { padding: 18px 0 0; font-size: 13px; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sd-news-page .sd-breadcrumb a, .sd-news-single .sd-breadcrumb a { color: var(--fg-2); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .sd-news-page .sd-breadcrumb a:hover, .sd-news-single .sd-breadcrumb a:hover { color: var(--sd-navy-600); } .sd-news-page .sd-breadcrumb .sep, .sd-news-single .sd-breadcrumb .sep { color: var(--sd-line); display: inline-flex; } /* ===== Intro ============================================== */ .sd-news-intro { margin-top: 14px; } .sd-news-intro .eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-amber-600); margin: 0; display: inline-flex; align-items: center; gap: 7px; } .sd-news-intro h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.01em; color: var(--fg-brand); margin: 8px 0 6px; } .sd-news-intro p { margin: 0; color: var(--fg-2); font-size: 16px; max-width: 64ch; } /* ===== Filter-Chips ======================================= */ .sd-news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; } .sd-chip { appearance: none; border: 1px solid var(--sd-line); background: var(--sd-paper); cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--fg-2); padding: 7px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; transition: all var(--dur-fast) var(--ease-out); } .sd-chip:hover { border-color: var(--sd-navy-300); color: var(--fg-1); } .sd-chip.is-active { background: var(--sd-navy-700); border-color: var(--sd-navy-700); color: #fff; } .sd-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sd-chip .n { font-family: var(--font-mono); font-size: 11px; opacity: .7; } /* ===== Karten-Grid ======================================== */ .sd-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; } .sd-news-card { display: flex; flex-direction: column; text-align: left; text-decoration: none; color: inherit; cursor: pointer; background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; border: 0; padding: 0; transition: box-shadow var(--dur-base) var(--ease-out); } .sd-news-card:hover { box-shadow: var(--shadow-2); } .sd-news-card:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-2); } .sd-news-card .thumb { display: block; aspect-ratio: 16 / 9; background: var(--sd-navy-100); overflow: hidden; } .sd-news-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-news-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .sd-news-card .meta { display: flex; align-items: center; gap: 10px; } .sd-news-card .date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); } .sd-news-card .h3 { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--fg-brand); margin: 0; text-wrap: pretty; } .sd-news-card .excerpt { display: block; font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; } .sd-news-card .read { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--sd-navy-600); } .sd-news-card:hover .read { color: var(--sd-amber-600); } /* Filter: gefilterte Karten ausblenden. Nötig, weil das HTML-[hidden]-Attribut (gesetzt server- wie clientseitig) sonst von .sd-news-card{display:flex} überschrieben würde — Autoren-Regel schlägt UA-[hidden]{display:none}. */ .sd-news-card[hidden] { display: none; } /* ===== Kind-Badge (beide Kontexte) ======================== */ .sd-kind { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; } .sd-kind--modell { background: var(--sd-amber-100); color: var(--sd-amber-700); } .sd-kind--kompat { background: var(--sd-sky-100); color: var(--sd-sky-700); } .sd-kind--firmware { background: var(--sd-navy-100); color: var(--sd-navy-600); } .sd-kind--hinweis { background: var(--sd-warning-bg); color: var(--sd-warning); } /* =========================================================== EINZELANSICHT — Handoff-Detaildesign über dem echten Beitrag. Greift auf Storefronts
. Inhalt (.entry-content) bleibt inhaltlich unverändert, nur gestylt. =========================================================== */ .sd-news-single { max-width: 760px; margin: 0 auto; padding: 0 24px 32px; } /* Storefront-Standard-Rahmen/-Abstände im Lesekontext neutralisieren */ .sd-news-single .entry-header { margin: 0 0 22px; padding: 0; border: 0; } /* Back-Link */ .sd-news-single .sd-back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--sd-navy-600); text-decoration: none; cursor: pointer; margin: 6px 0 18px; } .sd-news-single .sd-back-link:hover { color: var(--sd-amber-600); } /* Meta-Zeile (Badge + Datum) über dem Titel */ .sd-news-single .sd-article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .sd-news-single .sd-article-meta .date { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); } /* Titel */ .sd-news-single .entry-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-brand); margin: 0; text-wrap: balance; } .sd-news-single .entry-title a { color: inherit; text-decoration: none; } /* Hero = Beitragsbild (erstes Bild in .entry-content), 16:9-Crop */ .sd-news-single .entry-content > img.wp-post-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin: 0 0 26px; background: var(--sd-navy-100); } /* Lese-Typografie — gilt für den unveränderten Beitragsinhalt */ .sd-news-single .entry-content { font-size: 17px; line-height: 1.7; color: var(--fg-1); } .sd-news-single .entry-content p { margin: 0 0 18px; text-wrap: pretty; } .sd-news-single .entry-content h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--fg-brand); margin: 30px 0 12px; line-height: 1.2; } .sd-news-single .entry-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--fg-brand); margin: 28px 0 12px; line-height: 1.25; } .sd-news-single .entry-content h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg-brand); margin: 24px 0 10px; } .sd-news-single .entry-content a { color: var(--sd-navy-600); text-decoration: underline; text-underline-offset: 2px; } .sd-news-single .entry-content a:hover { color: var(--sd-amber-600); } .sd-news-single .entry-content ul, .sd-news-single .entry-content ol { margin: 0 0 18px; padding-left: 1.4em; } .sd-news-single .entry-content li { margin: 0 0 6px; } .sd-news-single .entry-content img:not(.wp-post-image) { max-width: 100%; height: auto; border-radius: var(--r-md); } .sd-news-single .entry-content figure { margin: 24px 0; } .sd-news-single .entry-content figure img { border-radius: var(--r-lg); } /* Eingebettete Medien (YouTube etc.) auf Lesebreite, 16:9 */ .sd-news-single .entry-content .wp-block-embed__wrapper, .sd-news-single .entry-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper { position: relative; } .sd-news-single .entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper iframe { width: 100%; } /* ===== Eingebetteter WooCommerce-Produktblock → Marken-Produktkarte ======= Auf dem Single-Post lädt sdlink-shop.css nicht (kein is_woocommerce) und die Brand-Regeln dort sind body.single-product-gescoped. Darum hier die echte Produktkarte für den eingebetteten Block nachbilden: weiße Karte, richtiger Titel/Preis, Marken-Button (navy-700 + Warenkorb-Icon). Inhalt bleibt der echte Block. */ .sd-news-single .entry-content .wp-block-woocommerce-single-product:empty { display: none; } .sd-news-single .entry-content .wp-block-woocommerce-single-product { margin: 28px 0; padding: 22px 24px; border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--sd-line); box-shadow: var(--shadow-1); } .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-columns { gap: 24px; align-items: center; flex-wrap: wrap; } .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-column { min-width: 240px; } /* Produkt-Meta (SKU/Kategorien/Tags): nicht in eine no-wrap-Zeile quetschen (sonst senkrechte Einzelbuchstaben auf der schmalen Lesebreite) */ .sd-news-single .entry-content .wp-block-woocommerce-product-meta .wp-block-group { flex-wrap: wrap !important; gap: 4px 16px; } .sd-news-single .entry-content .wp-block-woocommerce-product-meta { font-size: 13px; color: var(--fg-3); margin-top: 14px; } .sd-news-single .entry-content .wp-block-woocommerce-product-meta a { color: var(--sd-navy-600); } .sd-news-single .entry-content .wp-block-woocommerce-product-meta a:hover { color: var(--sd-amber-600); } /* Titel (ist ein Link) → Produkt-Heading statt unterstrichener Textlink */ .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-post-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 0 8px; } .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-post-title a { color: var(--fg-brand); text-decoration: none; } .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-post-title a:hover { color: var(--sd-amber-600); } /* Preis → Marken-Mono */ .sd-news-single .entry-content .wp-block-woocommerce-single-product .wc-block-components-product-price, .sd-news-single .entry-content .wp-block-woocommerce-single-product .woocommerce-Price-amount { font-family: var(--font-mono); font-weight: 600; font-size: 26px; color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-woocommerce-product-price { margin: 2px 0 14px; } /* Kurzbeschreibung */ .sd-news-single .entry-content .wp-block-woocommerce-single-product .wp-block-woocommerce-product-summary { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0 0 16px; } /* Galerie-Bilder abrunden */ .sd-news-single .entry-content .wp-block-woocommerce-single-product .wc-block-components-product-image img, .sd-news-single .entry-content .wp-block-woocommerce-single-product .wc-block-product-gallery-large-image img { border-radius: var(--r-md); } /* Mengenfeld + Add-to-Cart-Zeile */ .sd-news-single .entry-content .wp-block-woocommerce-single-product form.cart, .sd-news-single .entry-content .wp-block-woocommerce-single-product .wc-block-add-to-cart-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; } .sd-news-single .entry-content .wp-block-woocommerce-single-product .quantity input.qty, .sd-news-single .entry-content .wp-block-woocommerce-single-product .wc-block-add-to-cart-form input[type="number"] { height: 52px; width: 76px; text-align: center; border: 1px solid var(--sd-line); border-radius: var(--r-md); background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-mono); } /* Marken-Button (wie auf der echten Produktseite: navy-700 + Warenkorb-Icon) */ .sd-news-single .entry-content .wp-block-woocommerce-single-product .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 200px; height: 52px; padding: 0 26px; background: var(--sd-amber-600) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-md) !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 16px !important; box-shadow: var(--shadow-1); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .sd-news-single .entry-content .wp-block-woocommerce-single-product .single_add_to_cart_button:hover { background: var(--sd-amber-500) !important; box-shadow: var(--shadow-2); } .sd-news-single .entry-content .wp-block-woocommerce-single-product .single_add_to_cart_button::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Beitrags-Navigation + Kommentarbereich auf Markenfarben (statt Default-Lila) */ .sd-news-single .post-navigation, .sd-news-single .comments-area { margin-top: 36px; } .sd-news-single .post-navigation .nav-links a { color: var(--sd-navy-600); text-decoration: none; font-weight: 600; } .sd-news-single .post-navigation .nav-links a:hover { color: var(--sd-amber-600); } .sd-news-single .comments-area .comment-reply-title, .sd-news-single .comments-area .comments-title { font-family: var(--font-display); font-weight: 700; color: var(--fg-brand); } .sd-news-single .comments-area .form-submit input[type="submit"], .sd-news-single .comments-area .form-submit .submit { background: var(--sd-amber-600) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-md) !important; font-family: var(--font-body) !important; font-weight: 700 !important; padding: 12px 24px !important; box-shadow: var(--shadow-1); transition: background var(--dur-fast) var(--ease-out); } .sd-news-single .comments-area .form-submit input[type="submit"]:hover, .sd-news-single .comments-area .form-submit .submit:hover { background: var(--sd-amber-500) !important; } /* ===== Alt-CI-Farben im Beitragsinhalt aufs neue Konzept mappen ========== Echte Beiträge tragen teils Inline-Styles aus dem alten Corporate Design (Marken-Rot #dd252b, graue #f7f7f7-Boxen, Preset-Border). Inhalt bleibt unverändert — nur die Farben werden gescoped auf Navy/Amber/Sky gezogen (Inline-Styles erfordern !important). Annahme: #dd252b wird nur als Hintergrund verwendet (per Bestand geprüft), nicht als Textfarbe. */ /* Marken-Rot (Banner-Gruppen + Buttons) → Amber */ .sd-news-single .entry-content [style*="dd252b" i] { background-color: var(--sd-amber-600) !important; border-color: var(--sd-amber-600) !important; } .sd-news-single .entry-content a[style*="dd252b" i]:hover { background-color: var(--sd-amber-500) !important; } /* Generische WP-Rot/Orange-Presets (falls in weiteren Beiträgen) → Amber */ .sd-news-single .entry-content .has-vivid-red-color, .sd-news-single .entry-content .has-luminous-vivid-amber-color, .sd-news-single .entry-content .has-luminous-vivid-orange-color { color: var(--sd-amber-600) !important; } .sd-news-single .entry-content .has-vivid-red-background-color, .sd-news-single .entry-content .has-luminous-vivid-amber-background-color, .sd-news-single .entry-content .has-luminous-vivid-orange-background-color { background-color: var(--sd-amber-600) !important; } /* Graue Alt-Boxen → Navy-Sunken; Preset-Border → Marken-Linie */ .sd-news-single .entry-content .wp-block-group[style*="f7f7f7" i] { background-color: var(--sd-navy-050) !important; } .sd-news-single .entry-content .has-cyan-bluish-gray-border-color { border-color: var(--sd-line) !important; } /* Button-Politur (Form/Hover) — Buttonfarbe bleibt (weiße Kontrast-Buttons auf der Amber-Fläche behalten ihre helle Füllung) */ .sd-news-single .entry-content .wp-block-button__link { border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; box-shadow: var(--shadow-1); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .sd-news-single .entry-content .wp-block-button__link:hover { box-shadow: var(--shadow-2); } /* ===== Responsive ========================================= */ @media (max-width: 980px) { .sd-news-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .sd-news-grid { grid-template-columns: 1fr; } } /* ===== Motion-Reduktion =================================== */ @media (prefers-reduced-motion: reduce) { .sd-news-card, .sd-chip { transition: none; } }