/* ========================================================================= Pollux Labs — Editorial-Theme Übersetzt aus dem Claude-Design-Projekt „Pollux Labs Designsystem": tokens/{colors,typography,spacing}.css + Komponenten (SiteHeader, ArticleCard, SectionHeader, Button, NewsletterForm, SiteFooter, Toc, CodeBlock, Callout, PartsList, Figure, Blockquote). ========================================================================= */ /* ---- Design-Tokens: Farben ------------------------------------------- */ :root { /* Neutrale Basis (warm getönt, nie reines Weiß/Schwarz) */ --bg: oklch(0.985 0.004 85); --bg-alt: oklch(0.962 0.006 85); --bg-inverse: oklch(0.235 0.012 240); --ink: oklch(0.24 0.012 260); --ink-2: oklch(0.44 0.012 260); --ink-3: oklch(0.58 0.012 260); --ink-inverse: oklch(0.96 0.006 85); --line: oklch(0.88 0.008 85); --line-strong: oklch(0.78 0.01 85); /* Signature-Akzent: Petrol */ --accent: oklch(0.5 0.1 205); --accent-hover: oklch(0.43 0.1 205); --accent-ink: oklch(0.99 0.005 205); --accent-soft: oklch(0.94 0.025 205); --accent-soft-ink: oklch(0.38 0.09 205); /* Kategorie-Farben */ --cat-arduino: oklch(0.52 0.1 165); --cat-esp: oklch(0.52 0.1 245); --cat-raspi: oklch(0.52 0.12 15); --cat-elektronik: oklch(0.52 0.1 75); --cat-ki: oklch(0.52 0.1 300); --cat-arduino-soft: oklch(0.95 0.025 165); --cat-esp-soft: oklch(0.95 0.025 245); --cat-raspi-soft: oklch(0.95 0.025 15); --cat-elektronik-soft: oklch(0.95 0.03 75); --cat-ki-soft: oklch(0.95 0.025 300); /* Semantik */ --note-warnung: oklch(0.55 0.13 50); --link: var(--accent); --focus-ring: oklch(0.5 0.1 205 / 0.45); /* ---- Typografie ---- */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --text-xs: 0.76rem; --text-sm: 0.88rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 1.875rem; --text-2xl: 2.375rem; --text-3xl: clamp(2.5rem, 5vw, 3.5rem); --leading-body: 1.7; --leading-tight: 1.15; --leading-snug: 1.35; --leading-code: 1.6; --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-display: 600; --tracking-label: 0.08em; --tracking-display: -0.015em; --measure: 68ch; /* ---- Raster, Formen, Motion ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1200px; --content-max: 720px; --gutter: clamp(20px, 4vw, 40px); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-1: 0 1px 2px oklch(0.24 0.012 260 / 0.06); --shadow-2: 0 4px 16px oklch(0.24 0.012 260 / 0.08); --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --transition-fast: 140ms var(--ease); --transition-base: 220ms var(--ease); } /* Editorial Dark Mode — aktivierbar über */ [data-theme="dark"] { --bg: oklch(0.21 0.012 250); --bg-alt: oklch(0.255 0.012 250); --bg-inverse: oklch(0.16 0.012 250); --ink: oklch(0.93 0.008 85); --ink-2: oklch(0.74 0.01 85); --ink-3: oklch(0.62 0.01 85); --ink-inverse: oklch(0.93 0.008 85); --line: oklch(0.33 0.012 250); --line-strong: oklch(0.42 0.012 250); --accent: oklch(0.72 0.09 205); --accent-hover: oklch(0.79 0.09 205); --accent-ink: oklch(0.18 0.03 205); --accent-soft: oklch(0.3 0.04 205); --accent-soft-ink: oklch(0.85 0.07 205); --focus-ring: oklch(0.72 0.09 205 / 0.5); } /* ---- Basis -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; word-wrap: normal !important; } .pl-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---- Buttons ------------------------------------------------------------ */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: 1; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .pl-btn--primary { background: var(--accent); color: var(--accent-ink); } .pl-btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); } .pl-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .pl-btn--secondary:hover { border-color: var(--ink); color: var(--ink); } .pl-btn--sm { font-size: var(--text-sm); padding: 9px 16px; } /* ---- Header (SiteHeader) ------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; /* unter der WP-Admin-Bar (z-index 99999) */ background: oklch(from var(--bg) l c h / 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); height: 68px; display: flex; align-items: center; gap: var(--space-6); } .pl-wordmark { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1; white-space: nowrap; text-decoration: none; flex: none; } .pl-wordmark:hover { color: var(--ink); } .pl-wordmark span { color: var(--accent); } /* Custom Logo: über den Wrapper begrenzen — manche Optimierungs-Plugins entfernen die .custom-logo-Klasse vom img-Tag. */ .custom-logo-link { flex: none; display: inline-flex; align-items: center; } .custom-logo-link img, .custom-logo { max-height: 48px; width: auto !important; height: auto; } .site-footer .custom-logo-link img, .site-footer .custom-logo { max-height: 36px; } .site-header__nav { display: flex; align-items: center; flex: 1; min-width: 0; } .pl-nav-list { display: flex; gap: var(--space-5); align-items: center; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .pl-nav-list a { font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color var(--transition-fast); white-space: nowrap; } .pl-nav-list a:hover { color: var(--accent); } .pl-nav-list .current-menu-item > a, .pl-nav-list .current_page_item > a, .pl-nav-list .current-cat > a { color: var(--accent); border-bottom-color: var(--accent); } /* Desktop-Dropdowns: Untermenüs standardmäßig ausblenden und beim Hover/Focus des Elternpunkts als Panel zeigen. Ohne diese Regeln fielen die sub-menu-Listen als statische Blockliste über die Seite (Header-Nav rendert die volle Menü-Tiefe). */ @media (min-width: 961px) { .site-header__nav .pl-nav-list { flex-wrap: nowrap; } .site-header__nav .menu-item-has-children { position: relative; } /* dezenter Caret hinter Elternpunkten */ .site-header__nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; } .site-header__nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: var(--space-2) 0; list-style: none; display: none; flex-direction: column; gap: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px oklch(0 0 0 / 0.08); z-index: 60; } /* verschachtelte Ebenen fliegen zur Seite auf */ .site-header__nav .sub-menu .sub-menu { top: calc(-1 * var(--space-2)); left: 100%; } .site-header__nav .menu-item-has-children:hover > .sub-menu, .site-header__nav .menu-item-has-children:focus-within > .sub-menu { display: flex; } .site-header__nav .sub-menu li { display: block; } .site-header__nav .sub-menu a { display: block; padding: 8px var(--space-4); white-space: nowrap; border-bottom: 0; color: var(--ink-2); } .site-header__nav .sub-menu a:hover { color: var(--accent); } /* Untermenü-Caret zeigt nach rechts (Flyout) */ .site-header__nav .sub-menu .menu-item-has-children > a::after { transform: translateY(-1px) rotate(-45deg); } } .site-header__actions { display: flex; align-items: center; gap: var(--space-4); flex: none; margin-left: auto; } .site-header__login { font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; color: var(--ink-2); transition: color var(--transition-fast); white-space: nowrap; } .site-header__login:hover { color: var(--accent); } .pl-search { position: relative; } .pl-search input[type="search"] { width: 150px; padding: 8px 12px 8px 32px; font-size: var(--text-sm); font-family: var(--font-body); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); transition: width var(--transition-base), border-color var(--transition-fast); appearance: none; } .pl-search input[type="search"]:focus { width: 200px; border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 1px; } .pl-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Mobile-Menü */ .site-header__toggle { display: none; width: 44px; height: 44px; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); padding: 0; } .site-header__toggle .icon-close { display: none; } .site-header__toggle[aria-expanded="true"] .icon-close { display: block; } .site-header__toggle[aria-expanded="true"] .icon-menu { display: none; } .pl-mobile-panel { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: var(--space-4) var(--gutter) var(--space-6); } .pl-mobile-panel.is-open { display: block; } .pl-mobile-panel .pl-nav-list { display: block; } .pl-mobile-panel .pl-nav-list a { display: block; padding: 14px 0; font-size: var(--text-md); font-family: var(--font-display); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); white-space: normal; } .pl-mobile-panel .pl-search { margin-top: var(--space-4); } .pl-mobile-panel .pl-search input[type="search"] { width: 100%; padding: 12px 14px 12px 36px; font-size: var(--text-base); } .pl-mobile-panel .pl-search input[type="search"]:focus { width: 100%; } /* Steady-Login-Button (Markup wird vom Steady-Widget-Script befüllt) */ .site-header__actions .steady-login-button { flex: none; } .pl-mobile-panel__login { padding: 14px 0; border-bottom: 1px solid var(--line); } .pl-mobile-panel__login .site-header__login { display: inline-block; font-size: var(--text-md); font-family: var(--font-display); font-weight: 600; color: var(--ink); } @media (max-width: 960px) { .site-header__inner { gap: var(--space-4); } .site-header__nav, .site-header__actions .pl-search, .site-header__actions .site-header__login, .site-header__actions .steady-login-button { display: none !important; } .site-header__toggle { display: grid; } } /* Sticky Header unter der eingeloggten WP-Admin-Bar positionieren */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* ---- Hero (Startseite) --------------------------------------------------- */ .pl-hero { padding: var(--space-8) 0; } .pl-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-7); align-items: center; } .pl-hero__kicker { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .pl-hero__title { margin: 0; font-size: var(--text-3xl); } .pl-hero__title a { color: var(--ink); text-decoration: none; transition: color var(--transition-fast); } .pl-hero__title a:hover { color: var(--accent); } .pl-hero__lead { margin: var(--space-4) 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-2); max-width: 48ch; } .pl-hero__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .pl-hero__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); } .pl-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .pl-hero { padding: var(--space-6) 0; } .pl-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); } .pl-hero__media { order: -1; } } /* ---- Bild-Platzhalter (solange kein Beitragsbild gesetzt ist) ------------ */ .pl-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--bg-alt) 0 14px, oklch(0.93 0.008 85) 14px 28px); } .pl-placeholder span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); background: var(--bg); padding: 4px 10px; border-radius: 4px; } /* ---- Kategorie-Pills ------------------------------------------------------ */ .pl-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-soft-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; white-space: nowrap; } a.pl-pill:hover { color: var(--accent); } .pl-pill--arduino { background: var(--cat-arduino-soft); color: var(--cat-arduino); } .pl-pill--esp { background: var(--cat-esp-soft); color: var(--cat-esp); } .pl-pill--raspi { background: var(--cat-raspi-soft); color: var(--cat-raspi); } .pl-pill--elektronik { background: var(--cat-elektronik-soft); color: var(--cat-elektronik); } .pl-pill--ki { background: var(--cat-ki-soft); color: var(--cat-ki); } a.pl-pill--arduino:hover { color: var(--cat-arduino); } a.pl-pill--esp:hover { color: var(--cat-esp); } a.pl-pill--raspi:hover { color: var(--cat-raspi); } a.pl-pill--elektronik:hover { color: var(--cat-elektronik); } a.pl-pill--ki:hover { color: var(--cat-ki); } /* ---- Sektions-Header (SectionHeader) -------------------------------------- */ .pl-section { margin-top: var(--space-9); } .pl-section:first-child { margin-top: 0; } .pl-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-6); } .pl-section-header__bar { width: 40px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: var(--space-3); } .pl-section--arduino .pl-section-header__bar { background: var(--cat-arduino); } .pl-section--esp .pl-section-header__bar { background: var(--cat-esp); } .pl-section--raspi .pl-section-header__bar { background: var(--cat-raspi); } .pl-section--elektronik .pl-section-header__bar { background: var(--cat-elektronik); } .pl-section--ki .pl-section-header__bar { background: var(--cat-ki); } .pl-section-header h2 { margin: 0; font-size: var(--text-xl); } .pl-section-header p { margin: var(--space-2) 0 0; font-size: var(--text-base); color: var(--ink-2); max-width: 52ch; } .pl-section-header__link { flex: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent); text-decoration: none; white-space: nowrap; padding-bottom: 2px; } .pl-section-header__link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } /* ---- Card-Grid + ArticleCard ---------------------------------------------- */ .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 900px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pl-grid { grid-template-columns: 1fr; } } .pl-card { display: block; text-decoration: none; color: var(--ink); } .pl-card__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-alt); } .pl-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--transition-base); } .pl-card:hover .pl-card__media img { transform: scale(1.03); } .pl-card__body { padding-top: var(--space-4); } .pl-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); } .pl-card__meta time, .pl-card__meta span { font-size: var(--text-xs); color: var(--ink-3); } .pl-card__title { margin: 0; font-size: var(--text-lg); transition: color var(--transition-fast); } .pl-card:hover .pl-card__title { color: var(--accent); } .pl-card__teaser { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-2); } .pl-card--lg .pl-card__media { aspect-ratio: 16 / 9; } .pl-card--lg .pl-card__title { font-size: var(--text-xl); } /* ---- Newsletter (NewsletterForm) ------------------------------------------- */ .pl-newsletter { background: var(--bg-inverse); color: var(--ink-inverse); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-7); } .pl-newsletter__inner { max-width: 620px; margin: 0 auto; text-align: center; } .pl-newsletter h2 { margin: 0; font-size: var(--text-2xl); color: var(--ink-inverse); } .pl-newsletter p { margin: var(--space-3) 0 var(--space-5); font-size: var(--text-base); line-height: var(--leading-snug); color: oklch(0.82 0.008 85); } .pl-newsletter form { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } .pl-newsletter input[type="email"], .pl-newsletter input[type="text"] { flex: 1 1 260px; max-width: 340px; padding: 12px 16px; font-size: var(--text-base); font-family: var(--font-body); border-radius: var(--radius-sm); border: 1px solid oklch(0.45 0.012 250); background: oklch(0.3 0.012 250); color: var(--ink-inverse); } .pl-newsletter input[type="email"]:focus, .pl-newsletter input[type="text"]:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 1px; } .pl-newsletter input::placeholder { color: oklch(0.62 0.01 250); } .pl-newsletter button[type="submit"], .pl-newsletter input[type="submit"] { padding: 12px 26px; font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-body); border: none; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: background var(--transition-fast); } .pl-newsletter button[type="submit"]:hover, .pl-newsletter input[type="submit"]:hover { background: var(--accent-hover); } .pl-newsletter label.pl-newsletter__consent { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: var(--space-4) auto 0; font-size: var(--text-sm); color: oklch(0.72 0.008 85); cursor: pointer; text-align: left; max-width: 480px; } .pl-newsletter input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); } .pl-newsletter a { color: var(--ink-inverse); } @media (max-width: 600px) { .pl-newsletter { padding: var(--space-6) var(--space-5); } .pl-newsletter h2 { font-size: var(--text-xl); } } /* ---- Footer (SiteFooter) ---------------------------------------------------- */ .site-footer { background: var(--bg-inverse); color: var(--ink-inverse); margin-top: var(--space-9); } .site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; } .site-footer .pl-wordmark { font-size: 20px; color: var(--ink-inverse); } .site-footer__claim { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: oklch(0.7 0.008 85); } .site-footer__nav ul { display: flex; gap: var(--space-5); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .site-footer__nav a { font-size: var(--text-sm); color: oklch(0.7 0.008 85); text-decoration: none; transition: color var(--transition-fast); } .site-footer__nav a:hover { color: var(--ink-inverse); text-decoration: underline; text-underline-offset: 3px; } /* ---- Artikelseite ------------------------------------------------------------ */ .pl-article-wrap { padding: var(--space-8) 0 var(--space-9); } .pl-article-header { max-width: var(--content-max); } .pl-article-header__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-4); } .pl-article-header__meta > span { font-size: var(--text-xs); color: var(--ink-3); } .pl-article-header h1 { margin: 0; font-size: var(--text-2xl); } .pl-article-header__lead { margin: var(--space-4) 0 0; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-2); } .pl-article-hero { margin: var(--space-6) 0 var(--space-7); } .pl-article-hero .pl-figure__media { aspect-ratio: 21 / 9; } .pl-article-layout { display: grid; grid-template-columns: minmax(0, var(--content-max)) 300px; gap: var(--space-8); align-items: start; } .pl-article-aside { position: sticky; top: 92px; } @media (max-width: 1024px) { .pl-article-layout { grid-template-columns: minmax(0, 1fr); } .pl-article-aside { position: static; order: -1; max-width: var(--content-max); width: 100%; } } /* ---- Inhaltsverzeichnis (Toc) -------------------------------------------------- */ .pl-toc { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; width: 100%; } .pl-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: transparent; border: none; cursor: pointer; font-family: var(--font-body); } .pl-toc__toggle span { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); } .pl-toc__toggle svg { transition: transform var(--transition-fast); } .pl-toc.is-open .pl-toc__toggle svg { transform: rotate(180deg); } .pl-toc ol { display: none; margin: 0; padding: 0 0 8px; list-style: none; border-top: 1px solid var(--line); } .pl-toc.is-open ol { display: block; } .pl-toc a { display: block; padding: 8px 16px 8px 14px; font-size: var(--text-sm); line-height: 1.4; text-decoration: none; color: var(--ink-2); font-weight: var(--weight-body); border-left: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .pl-toc li.is-level-3 a { padding-left: 30px; } .pl-toc a:hover { color: var(--accent); } .pl-toc a.is-active { color: var(--accent); font-weight: var(--weight-semibold); border-left-color: var(--accent); } /* ---- Fließtext (entry-content) --------------------------------------------------- */ .entry-content { font-size: var(--text-base); line-height: var(--leading-body); } .entry-content > * { max-width: var(--measure); } .entry-content > .alignwide, .entry-content > .alignfull, .entry-content > figure, .entry-content > .wp-block-image { max-width: none; } .entry-content p { margin: 0 0 var(--space-4); } .entry-content h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-4); scroll-margin-top: 90px; } .entry-content h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); scroll-margin-top: 90px; } .entry-content ul, .entry-content ol { margin: 0 0 var(--space-4); padding-left: 1.4em; } .entry-content li { margin-bottom: var(--space-2); } .entry-content a { font-weight: var(--weight-medium); } /* Affiliate-Kennzeichnung: rel="sponsored" bekommt automatisch ein * */ .entry-content a[rel~="sponsored"]::after { content: "*"; font-size: 0.7em; vertical-align: super; margin-left: 1px; color: var(--ink-3); } /* Bilder + Bildunterschriften */ .entry-content figure { margin: var(--space-5) 0; } .entry-content figure img { border-radius: var(--radius-md); } .entry-content figcaption, .pl-figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-3); line-height: 1.5; text-align: left; } .pl-figure { margin: 0; } .pl-figure__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-alt); } .pl-figure__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Blockquote — Editorial mit Akzentlinie oben */ .entry-content blockquote { margin: var(--space-6) 0; padding: var(--space-4) 0 0; border-top: 3px solid var(--accent); border-left: none; max-width: 52ch; font-family: var(--font-display); } .entry-content blockquote p { margin: 0; font-size: var(--text-md); font-style: italic; line-height: 1.5; color: var(--ink); } .entry-content blockquote cite, .entry-content blockquote footer { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-3); font-style: normal; } /* Code — Inline und Blöcke (Kopf + Kopieren-Button ergänzt theme.js) */ .entry-content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-alt); padding: 2px 6px; border-radius: var(--radius-sm); } .entry-content pre { margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-alt); overflow: hidden; } .entry-content pre code { display: block; padding: var(--space-4); overflow-x: auto; background: transparent; font-size: 14px; line-height: var(--leading-code); color: var(--ink); } .pl-codeblock { margin: var(--space-5) 0; } .pl-codeblock pre { margin: 0; border: none; border-radius: 0; } .pl-codeblock__wrap { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-alt); overflow: hidden; } .pl-codeblock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); } .pl-codeblock__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); } .pl-codeblock__copy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .pl-codeblock__copy:hover { color: var(--ink); background: var(--bg); } .pl-codeblock__copy.is-copied { color: var(--accent); } /* ---- Callouts (Tipp / Achtung / Hinweis) ---------------------------------------- */ .pl-callout { border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-5) 0; background: var(--accent-soft); color: var(--ink); } .pl-callout__head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); } .pl-callout__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .pl-callout__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-soft-ink); } .pl-callout__body { font-size: var(--text-sm); line-height: var(--leading-body); } .pl-callout__body p { margin: 0; } .pl-callout--warnung { background: oklch(0.95 0.03 50); } .pl-callout--warnung .pl-callout__dot { background: var(--note-warnung); } .pl-callout--warnung .pl-callout__label { color: oklch(0.42 0.11 50); } .pl-callout--hinweis { background: var(--bg-alt); } .pl-callout--hinweis .pl-callout__dot { background: var(--ink-2); } .pl-callout--hinweis .pl-callout__label { color: var(--ink-2); } /* ---- Bauteilliste (PartsList) ----------------------------------------------------- */ .pl-parts { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); background: var(--bg); margin: var(--space-5) 0; } .pl-parts h3, .pl-parts h2 { margin: 0; font-size: var(--text-lg); } .pl-parts ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); } .pl-parts li { display: flex; gap: 10px; align-items: baseline; font-size: var(--text-base); line-height: var(--leading-snug); margin: 0; } .pl-parts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); } .pl-parts__note { color: var(--ink-3); font-size: var(--text-sm); } .pl-parts__legend { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--ink-3); line-height: 1.5; } /* ---- Verwandte Beiträge / Archiv --------------------------------------------------- */ .pl-related { margin-top: var(--space-9); } .pl-archive { padding: var(--space-8) 0 0; } .pl-archive-header { margin-bottom: var(--space-6); } .pl-archive-header .pl-section-header__bar { margin-bottom: var(--space-3); } .pl-archive-header h1 { margin: 0; font-size: var(--text-2xl); } .pl-archive-header p { margin: var(--space-2) 0 0; font-size: var(--text-base); color: var(--ink-2); max-width: 60ch; } /* Pagination */ .pl-pagination { margin-top: var(--space-8); display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; } .pl-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); text-decoration: none; transition: all var(--transition-fast); } .pl-pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); } .pl-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ---- Statische Seiten ---------------------------------------------------------------- */ .pl-page { padding: var(--space-8) 0 0; } .pl-page .entry-content, .pl-page-header { max-width: var(--content-max); margin-left: auto; margin-right: auto; } .pl-page-header h1 { margin: 0 0 var(--space-6); font-size: var(--text-2xl); } /* ---- Kommentare ------------------------------------------------------------------------ */ .pl-comments { max-width: var(--content-max); margin-top: var(--space-8); } .pl-comments > h2 { font-size: var(--text-xl); margin: 0 0 var(--space-5); } .pl-comments ol.comment-list { margin: 0; padding: 0; list-style: none; } .pl-comments ol.comment-list ol { margin: var(--space-4) 0 0 var(--space-5); padding: 0; list-style: none; } .pl-comments .comment-body { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); } .pl-comments .comment-meta { margin-bottom: var(--space-2); } .pl-comments .comment-author { font-weight: var(--weight-semibold); font-size: var(--text-sm); } .pl-comments .comment-metadata { font-size: var(--text-xs); } .pl-comments .comment-metadata a { color: var(--ink-3); text-decoration: none; } .pl-comments .avatar { border-radius: 50%; margin-right: 8px; vertical-align: middle; } .pl-comments .reply { font-size: var(--text-xs); } .comment-form label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 14px; font-size: var(--text-base); font-family: var(--font-body); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); margin-bottom: var(--space-4); } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 1px; } .comment-form .submit { display: inline-flex; padding: 12px 22px; font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-body); background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); } .comment-form .submit:hover { background: var(--accent-hover); } /* ---- 404 / Suche ------------------------------------------------------------------------- */ .pl-404 { padding: var(--space-9) 0; text-align: center; } .pl-404 h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); } .pl-404 p { color: var(--ink-2); margin: 0 auto var(--space-6); max-width: 50ch; } .pl-404 .pl-search { display: inline-block; } .pl-404 .pl-search input[type="search"] { width: 280px; } /* ---- Landingpage-Komponenten (Template „Landingpage (volle Breite)") -------- */ .pl-landing { padding-bottom: var(--space-9); } .pl-landing .pl-section { margin-top: var(--space-9); } /* Zentrierter Landing-Hero */ .pl-landing-hero { padding: var(--space-9) 0 0; text-align: center; } .pl-landing-hero__inner { max-width: 760px; margin: 0 auto; } .pl-landing-hero .pl-hero__kicker { margin-bottom: var(--space-3); } .pl-landing-hero h1 { margin: 0; font-size: var(--text-3xl); } .pl-landing-hero__lead { margin: var(--space-4) auto var(--space-5); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-2); max-width: 54ch; } .pl-landing-hero .pl-hero__actions { justify-content: center; } .pl-landing-hero__stat { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--ink-3); } /* Checkliste mit Akzent-Häkchen */ .pl-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); } .pl-checklist li { position: relative; padding-left: 1.6em; font-size: var(--text-base); line-height: var(--leading-snug); } .pl-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: var(--weight-semibold); } @media (min-width: 700px) { .pl-checklist--2col { grid-template-columns: 1fr 1fr; } } /* Statische Cards (Landing: Projekte/Kurse ohne WP-Loop) */ .pl-static-card { display: block; text-decoration: none; color: var(--ink); } .pl-static-card .pl-figure__media { aspect-ratio: 3 / 2; } .pl-static-card h3 { margin: var(--space-3) 0 0; font-size: var(--text-lg); transition: color var(--transition-fast); } a.pl-static-card:hover h3 { color: var(--accent); } .pl-static-card p { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-2); } .pl-static-card .pl-pill { margin-bottom: var(--space-2); } /* Premium-/Mitglieder-Badge auf Karten-Bild (oben links) */ .pl-card-badge { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.5; } .pl-card-badge svg { width: 12px; height: 12px; fill: currentColor; } /* Testphasen-Timeline */ .pl-timeline { display: grid; gap: var(--space-5); position: relative; max-width: 640px; } .pl-timeline__step { display: flex; gap: var(--space-4); align-items: flex-start; } .pl-timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 5px; box-shadow: 0 0 0 4px var(--accent-soft); } .pl-timeline__step h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); } .pl-timeline__step p { margin: 0; font-size: var(--text-base); color: var(--ink-2); max-width: 56ch; } .pl-timeline__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); } /* Mitgliedschafts-/Preis-Karten */ .pl-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: stretch; } @media (max-width: 800px) { .pl-plans { grid-template-columns: 1fr; } } .pl-plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--bg); display: flex; flex-direction: column; gap: var(--space-4); } .pl-plan--featured { border-color: var(--accent); box-shadow: var(--shadow-2); } .pl-plan__badge { align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-soft-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; } .pl-plan h3 { margin: 0; font-size: var(--text-xl); } .pl-plan p { margin: 0; font-size: var(--text-base); color: var(--ink-2); } .pl-plan .pl-checklist { font-size: var(--text-sm); } .pl-plan .pl-btn { margin-top: auto; justify-content: center; } .pl-plan__note { font-size: var(--text-xs); color: var(--ink-3); } /* Zitate / Testimonials */ .pl-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 900px) { .pl-quotes { grid-template-columns: 1fr; } } .pl-quote { margin: 0; padding-top: var(--space-4); border-top: 3px solid var(--accent); } .pl-quote p { margin: 0; font-family: var(--font-display); font-size: var(--text-md); font-style: italic; line-height: 1.5; } .pl-quote cite { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-3); font-style: normal; } /* Dunkles Panel (Werbefrei-Block, Abschluss-CTA) */ .pl-panel-inverse { background: var(--bg-inverse); color: var(--ink-inverse); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-7); text-align: center; } .pl-panel-inverse h2 { margin: 0; color: var(--ink-inverse); font-size: var(--text-2xl); } .pl-panel-inverse p { margin: var(--space-3) auto var(--space-5); max-width: 60ch; color: oklch(0.82 0.008 85); font-size: var(--text-base); line-height: var(--leading-body); } .pl-panel-inverse p:last-child { margin-bottom: 0; } .pl-panel-inverse .pl-hero__actions { justify-content: center; } .pl-panel-inverse .pl-btn--secondary { color: var(--ink-inverse); border-color: oklch(0.45 0.012 250); } .pl-panel-inverse .pl-btn--secondary:hover { border-color: var(--ink-inverse); color: var(--ink-inverse); } @media (max-width: 600px) { .pl-panel-inverse { padding: var(--space-6) var(--space-5); } } /* FAQ-Accordion */ .pl-faq { display: grid; gap: 0; max-width: var(--content-max); } .pl-faq details { border-bottom: 1px solid var(--line); } .pl-faq details:first-child { border-top: 1px solid var(--line); } .pl-faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); line-height: var(--leading-tight); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .pl-faq summary::-webkit-details-marker { display: none; } .pl-faq summary::after { content: "+"; font-family: var(--font-body); font-size: var(--text-xl); font-weight: 300; color: var(--accent); flex: none; transition: transform var(--transition-fast); line-height: 1; } .pl-faq details[open] summary::after { transform: rotate(45deg); } .pl-faq summary:hover { color: var(--accent); } .pl-faq details > div { padding: 0 0 var(--space-5); max-width: var(--measure); } .pl-faq details p { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); } .pl-faq details p:last-child { margin-bottom: 0; } .pl-faq details ul { margin: 0 0 var(--space-3); padding-left: 1.4em; color: var(--ink-2); } /* Zweispaltiges Media+Text-Layout (Community, Gründer) */ .pl-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; } @media (max-width: 800px) { .pl-split { grid-template-columns: 1fr; } } .pl-split h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); } .pl-split p { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); max-width: 56ch; } /* ---- WP-Kern-Kompatibilität ----------------------------------------------------------------- */ .wp-block-image img { border-radius: var(--radius-md); } .alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; } .alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .sticky { /* Marker-Klasse für Sticky-Posts */ } .bypostauthor { /* Marker-Klasse für Autor-Kommentare */ } /* Ruhigere Bewegung, wenn gewünscht */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ==== Wiederhergestellte serverseitige Regeln (Wortmarke/Fonts/Artikel/Kit), 2026-07-06 ==== */ @font-face { font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-v22-latin.woff2") format("woff2"); } :root { --font-logo: "Pacifico", cursive; } /* Wortmarke = Pacifico, einfarbig (--ink); Kerning des letzten „s" */ .pl-wordmark { font-family: var(--font-logo); font-size: 28px; font-weight: 400; letter-spacing: 0; } .pl-wordmark span { color: inherit; } .pl-wordmark__s { margin-left: -0.11em; } .site-footer .pl-wordmark span { color: var(--ink-inverse); } /* Navbar-Baseline an die tiefer sitzende Pacifico-Logo-Baseline anpassen */ .site-header__nav { margin-left: var(--space-5); position: relative; top: 3px; } /* Elementor-Kit erzwang Roboto auf — Basis-Body-Font zurückholen */ html body.wp-theme-polluxlabs { font-family: var(--font-body); } /* Artikelseite: Hero-Breite, Abstände, Aside-Sticky, Gutter-Fix, Mobile */ .pl-figure.pl-article-hero { max-width: calc(var(--content-max) + var(--space-8) + 300px); } .pl-article-hero { margin: var(--space-6) 0 var(--space-8); } .pl-article-wrap { padding-left: var(--gutter); padding-right: var(--gutter); } .pl-article-aside { top: 108px; margin-top: 6px; } @media (max-width: 600px) { .pl-article-hero .pl-figure__media { aspect-ratio: 3 / 2; } .pl-article-header h1 { font-size: var(--text-xl); } } /* Modifier: Section-Header ohne Trennlinie + Timeline zweispaltig (Mitgliedschaftsseite) */ .pl-section-header--plain { border-bottom: none; padding-bottom: 0; } .pl-timeline--columns { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); max-width: none; } @media (max-width: 640px) { .pl-timeline--columns { grid-template-columns: 1fr; } } /* Steady-Checkout-Abstand zum Lehrer-Hinweis reduzieren (das eingespritzte Steady-iframe hat ~60px Leerraum am Boden) */ #memberships #insert_steady_checkout_here { display: none !important; } #memberships .pl-plan__note { margin-top: -36px !important; } /* Mehr Luft ueber der Mitgliedschafts-Sektion, damit sie nicht an den Projektkacheln klebt (Standard .pl-section = 96px) */ #memberships { margin-top: 160px; } /* ==== Landing „Vom Anfänger zum Maker“ (Buch-Seite, Page 19847) ============= */ /* Hero-Media als Buchcover (Portrait, ohne Crop) */ .pl-hero__media--book { aspect-ratio: auto; background: transparent; border-radius: 0; overflow: visible; } .pl-hero__media--book img { position: static; inset: auto; width: auto; height: auto; max-width: 100%; max-height: 480px; margin: 0 auto; display: block; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-2); } /* Bewertungs-/Meta-Zeile */ .pl-book-meta { margin: var(--space-4) 0 var(--space-5); font-size: var(--text-sm); color: var(--ink-2); } .pl-book-meta strong { color: var(--ink); } .pl-stars { color: var(--accent); letter-spacing: 2px; margin-right: 6px; } /* Kaufkarten */ .pl-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 680px; margin: 0 auto; } @media (max-width: 620px) { .pl-pricing { grid-template-columns: 1fr; } } .pl-price-card { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-1); } .pl-price-card__badge { position: absolute; top: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap; } .pl-price-card h3 { margin: 0; font-size: var(--text-lg); } .pl-price-card__sub { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--ink-3); } .pl-price-card__price { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); color: var(--ink); line-height: 1.1; } .pl-price-card__vat { margin: var(--space-1) 0 var(--space-5); font-size: var(--text-xs); color: var(--ink-3); } .pl-price-card__actions { margin-top: auto; display: grid; gap: var(--space-3); } .pl-price-card__actions .pl-btn { width: 100%; } .pl-pricing__note { margin: var(--space-6) auto 0; max-width: 54ch; text-align: center; font-size: var(--text-sm); color: var(--ink-3); } /* Kapitel-Stapel (alternierende Bild/Text-Reihen) */ .pl-book-chapters { display: grid; gap: var(--space-9); } @media (max-width: 800px) { .pl-book-chapters { gap: var(--space-8); } } /* Code-Block auf der Landing (theme.js enhanced nur .entry-content) */ .pl-codeblock { margin: 0; width: 100%; } .pl-codeblock pre code { display: block; padding: var(--space-4); overflow-x: auto; background: transparent; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 14px; line-height: var(--leading-code); color: var(--ink); } /* Copy-Anything-Button im Code-Block ans Petrol-Design anpassen (Buch-Landing) */ .pl-codeblock .ctc-copy-btn { background: var(--accent) !important; color: var(--accent-ink) !important; border: 0 !important; border-radius: var(--radius-sm) !important; font-family: var(--font-body) !important; font-weight: var(--weight-semibold) !important; font-size: var(--text-xs) !important; box-shadow: none !important; } .pl-codeblock .ctc-copy-btn:hover { background: var(--accent-hover) !important; } .pl-codeblock .ctc-copy-btn__icon svg { fill: currentColor; }