/* Modern layer for Twenty Twenty: tokens, system fonts, dark mode, E-E-A-T components. */ /* Inter is self-hosted (Latin subset, ~38 KB, see style.css @font-face "Inter var"): no third-party requests. The metric-matched fallback keeps layout shift near zero while the font loads. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } :root { --tt-font: "Inter var", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tt-bg: #fafaf7; --tt-fg: #14181c; --tt-muted: #5f6b66; --tt-accent: #0b6b57; --tt-accent-soft: #d9f3e8; --tt-lime: #c6f432; --tt-surface: #fff; --tt-border: #e4e6df; --tt-radius: 14px; } /* theme: dark */ :root[data-theme="dark"] { --tt-bg: #0e1214; --tt-fg: #e9ede9; --tt-muted: #94a39c; --tt-accent: #5eead4; --tt-accent-soft: #12332c; --tt-surface: #161c1f; --tt-border: #263034; } html { scroll-behavior: smooth; } body, .entry-content, input, textarea, button { font-family: var(--tt-font); } body { background: var(--tt-bg); color: var(--tt-fg); line-height: 1.65; font-feature-settings: "kern", "calt"; -webkit-font-smoothing: antialiased; } .entry-content, .widget, .footer-widgets, .site-description, .author-bio, .comment-body, .wp-block-quote, blockquote, .post-meta, .primary-menu, .modal-menu, .footer-menu { font-family: var(--tt-font); } h1, h2, h3, h4, .entry-title, .site-title { font-family: var(--tt-font); letter-spacing: -0.01em; } .entry-content a { color: var(--tt-accent); text-underline-offset: 2px; } .entry-content img, .wp-block-image img { border-radius: var(--tt-radius); height: auto; } .entry-content table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; } .entry-content th, .entry-content td { border: 1px solid var(--tt-border); padding: .5em .75em; } :focus-visible { outline: 3px solid var(--tt-accent); outline-offset: 2px; } /* Affiliate links: asterisk marker */ a.affiliate-link:not(:has(img))::after { content: "*"; margin-left: 1px; font-weight: 700; } .affiliate-note { color: var(--tt-muted); font-size: 1.3rem; text-align: center; max-width: 72rem; margin: 0 auto; padding: 2rem 2rem 3rem; background: var(--tt-bg); } /* Language switcher */ .lang-switch { text-align: right; padding: .5rem 1rem; font-size: .85rem; } .lang-switch a { text-decoration: none; padding: .15rem .5rem; border: 1px solid var(--tt-border); border-radius: 999px; } /* Surfaces: Twenty Twenty nests many wrappers that carry their own background. Keep exactly one page background and one card surface; everything else is transparent. */ .section-inner, .post-inner, .entry-header, .entry-content, .post-meta-wrapper, .widget, .footer-widgets, .footer-top, .menu-top, .menu-bottom, .menu-wrapper, .menu-modal-inner, .modal-inner, .search-modal-inner, .singular .entry-header, .cover-header { background-color: transparent; } .menu-modal, .search-modal, .cover-modal { background: var(--tt-bg); } .border-color-accent, .modal-menu li, .modal-menu > li > .ancestor-wrapper, .modal-menu ul, .mobile-menu li, .footer-nav-widgets-wrapper, #site-footer, .header-inner, .primary-menu ul li { border-color: var(--tt-border); } .menu-modal .modal-menu a, .menu-modal .toggle, .close-nav-toggle, .search-modal .search-field { color: var(--tt-fg); } .menu-modal .modal-menu a { font-weight: 700; } .sub-menu-toggle::before { background: var(--tt-border); } .close-nav-toggle { background: transparent; } .footer-nav-widgets-wrapper { background: var(--tt-surface); } .footer-menu a, .footer-widgets a, .footer-widgets h2, .footer-widgets .widget-title { color: var(--tt-fg); } .footer-widgets a { font-weight: 500; } .footer-widgets .widget-title { font-size: 1.8rem; letter-spacing: -.01em; } .footer-widgets .widget { margin-top: 3rem; } .widget li { border-color: var(--tt-border); } .powered-by-wordpress { display: none; } #site-footer .footer-credits, #site-footer .to-the-top { color: var(--tt-muted); background: transparent; } .more-link { font-size: 1.4rem; padding: .8rem 2rem; text-transform: none; letter-spacing: 0; } .edit-link, .post-meta .edit-link { opacity: .7; } /* theme: dark */ :root[data-theme="dark"], :root[data-theme="dark"] body, :root[data-theme="dark"] body.custom-background, :root[data-theme="dark"] #site-content { background-color: var(--tt-bg) !important; color: var(--tt-fg); } :root[data-theme="dark"] .entry-content, :root[data-theme="dark"] .entry-content p, :root[data-theme="dark"] .entry-content li, :root[data-theme="dark"] .entry-content td, :root[data-theme="dark"] .entry-content th, :root[data-theme="dark"] .entry-title, :root[data-theme="dark"] .entry-title a, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] .author-bio, :root[data-theme="dark"] .author-description, :root[data-theme="dark"] .author-title, :root[data-theme="dark"] .author-title span, :root[data-theme="dark"] .site-title a, :root[data-theme="dark"] .site-description, :root[data-theme="dark"] .primary-menu a, :root[data-theme="dark"] .footer-menu a, :root[data-theme="dark"] .post-meta, :root[data-theme="dark"] .post-meta a, :root[data-theme="dark"] .post-meta li, :root[data-theme="dark"] .comment-body, :root[data-theme="dark"] .comment-author, :root[data-theme="dark"] blockquote, :root[data-theme="dark"] cite, :root[data-theme="dark"] figcaption { color: var(--tt-fg) !important; } :root[data-theme="dark"] a, :root[data-theme="dark"] .entry-content a { color: var(--tt-accent); } :root[data-theme="dark"] .post-meta, :root[data-theme="dark"] .post-meta a, :root[data-theme="dark"] .site-description, :root[data-theme="dark"] figcaption, :root[data-theme="dark"] .wp-caption-text { color: var(--tt-muted) !important; } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--tt-surface); color: var(--tt-fg); border-color: var(--tt-border); } /* ---- Longevity look: calm surfaces, one accent, lime highlight, big type ---- */ body.custom-background { background-color: var(--tt-bg); color: var(--tt-fg); } a, .color-accent, .has-accent-color, .primary-menu .current_page_item > a, .primary-menu .current-menu-item > a { color: var(--tt-accent); } .bg-accent, .has-accent-background-color, .button, .faux-button, .wp-block-button__link, .comment-reply-link, input[type="submit"], .post-password-form input[type="submit"] { background-color: var(--tt-accent); color: #fff; border-radius: 999px; } .button:hover, .faux-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { background-color: var(--tt-fg); color: var(--tt-bg); } ::selection { background: var(--tt-lime); color: #14181c; } #site-header { background: color-mix(in srgb, var(--tt-bg) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--tt-border); } .admin-bar #site-header { top: 32px; } .header-inner { padding: 1.4rem 0; } .site-title { font-weight: 800; letter-spacing: -.03em; text-transform: none; } .site-title a { color: var(--tt-fg); } .site-title a::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .3em; background: var(--tt-lime); border-radius: 50%; } .site-description { color: var(--tt-muted); } .primary-menu a { font-weight: 600; } .entry-title, .entry-header h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; } .singular .entry-header { padding: 5rem 0 3rem; border-bottom: 0; } .entry-categories a, .entry-categories-inner a, .post-meta a.cat { } .entry-categories-inner a { background: var(--tt-accent-soft); color: var(--tt-accent); border: 0; border-radius: 999px; padding: .3rem .9rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; } .post-meta { color: var(--tt-muted); } .entry-content { line-height: 1.75; } .entry-content > h2 { margin-top: 3.2em; letter-spacing: -.02em; } .entry-content > h2::before { content: ""; display: block; width: 2.4rem; height: .4rem; background: var(--tt-lime); border-radius: 999px; margin-bottom: 1rem; } .entry-content blockquote { border-left: 4px solid var(--tt-lime); background: var(--tt-surface); border-radius: 0 var(--tt-radius) var(--tt-radius) 0; padding: 1rem 1.5rem; font-style: normal; } .entry-content img, .wp-block-image img, .featured-media img { border-radius: var(--tt-radius); } .entry-content table { background: var(--tt-surface); border-radius: var(--tt-radius); } .entry-content th { background: var(--tt-accent-soft); text-align: left; } .singular .featured-media::before { background: var(--tt-bg); } /* Archive / home: post cards (image on top, text left-aligned underneath) */ .blog article.post, .archive article.post, .search article.post { display: flex; flex-direction: column; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); max-width: 72rem; margin: 0 auto 3rem; padding: 0 0 2.4rem; overflow: hidden; transition: transform .2s, box-shadow .2s; } .blog article.post:hover, .archive article.post:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.08); } .blog article.post .featured-media, .archive article.post .featured-media { order: -1; margin: 0; } .blog article.post .featured-media-inner, .archive article.post .featured-media-inner { position: static; width: 100%; left: auto; } .blog article.post .featured-media::before, .archive article.post .featured-media::before { display: none; } .blog article.post .featured-media img, .archive article.post .featured-media img { border-radius: 0; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .blog .entry-header, .archive .entry-header { padding: 2rem 2.4rem 0; text-align: left; } .blog .entry-header-inner, .archive .entry-header-inner { width: 100%; max-width: none; padding: 0; margin: 0; } .blog .entry-categories-inner, .archive .entry-categories-inner { justify-content: flex-start; margin: 0 0 1rem -.4rem; } .blog .entry-title, .archive .entry-title { font-size: clamp(2.2rem, 3.2vw, 3rem); margin: 0 0 .8rem; } .blog .entry-title a, .archive .entry-title a { text-decoration: none; } .blog .post-meta-wrapper, .archive .post-meta-wrapper { margin: 0; padding: 0; } .blog .post-meta, .archive .post-meta { justify-content: flex-start; font-size: 1.3rem; margin: 0; } .blog .post-meta li, .archive .post-meta li { margin: 0 1.6rem .4rem 0; } .blog .post-meta .meta-icon, .archive .post-meta .meta-icon { margin-right: .5rem; } .blog .post-inner, .archive .post-inner { padding: 0; margin: 0; } .blog .post-inner.thin, .archive .post-inner.thin { max-width: none; } .blog .entry-content, .archive .entry-content { padding: 1.2rem 2.4rem 0; margin: 0; font-size: 1em; max-width: none; } .blog .entry-content > *, .archive .entry-content > * { max-width: none; } .blog .entry-content > h2::before, .archive .entry-content > h2::before { display: none; } .blog .entry-content .more-link, .archive .entry-content .more-link { display: inline-block; margin-top: .6rem; } .blog .section-inner:not(.header-inner):not(.footer-inner), .archive .section-inner:not(.header-inner):not(.footer-inner) { width: 100%; max-width: none; padding: 0 2.4rem; } .blog hr, .archive hr { display: none; } /* Author bio from the theme template */ .author-bio { background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); padding: 2.4rem; margin-top: 4rem; } .author-bio .avatar { border-radius: 50%; } .author-bio .author-title span:first-child { text-transform: uppercase; letter-spacing: .08em; font-size: 1.2rem; color: var(--tt-muted); } /* Footer */ .footer-nav-widgets-wrapper, #site-footer { background: var(--tt-surface); border-top: 1px solid var(--tt-border); } /* theme: dark */ :root[data-theme="dark"] .bg-accent, :root[data-theme="dark"] .has-accent-background-color, :root[data-theme="dark"] .button, :root[data-theme="dark"] .faux-button, :root[data-theme="dark"] .wp-block-button__link, :root[data-theme="dark"] input[type="submit"] { color: #06201b; } :root[data-theme="dark"] .blog article.post:hover, :root[data-theme="dark"] .archive article.post:hover { box-shadow: 0 14px 34px rgba(0,0,0,.5); } /* Buybox (wpcmsdev shortcodes in the post content): product card with price row and CTA */ .entry-content .buybox, .entry-content .wpcmsdev-alert { background: var(--tt-surface); color: var(--tt-fg); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); padding: 0; margin: 2.4rem auto; max-width: 60rem; width: 100%; float: none; overflow: hidden; } .buybox .alert-content { padding: 2rem 2.4rem 0; color: var(--tt-fg); } .buybox .alert-content p { margin: 0 0 1rem; color: var(--tt-fg); font-size: 1.05em; } .buybox .alert-content p > a > img { display: block; margin: 1.2rem auto; border-radius: 10px; background: #fff; padding: 1rem; max-height: 28rem; width: auto; max-width: 100%; } .buybox table.pricetable { display: block; border: 0; margin: 1.6rem -2.4rem 0; width: calc(100% + 4.8rem); background: transparent; border-radius: 0; } .buybox table.pricetable tbody { display: block; } .buybox table.pricetable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding: 1.4rem 2.4rem; background: var(--tt-accent-soft); border-top: 1px solid var(--tt-border); } .buybox table.pricetable td { display: block; border: 0; padding: 0; background: transparent; color: var(--tt-fg); font-weight: 600; } .buybox table.pricetable td:first-child { flex: 0 0 11rem; } .buybox table.pricetable td:nth-child(2) { flex: 1 1 auto; font-size: 1.5rem; } .buybox table.pricetable td.alignRight { margin-left: auto; } .buybox .shopimage { display: block; max-height: 4.4rem; width: auto; background: #fff; border-radius: 8px; padding: .4rem .8rem; margin: 0; } .buybox .wpcmsdev-button, .entry-content .wpcmsdev-button { display: inline-block; background: var(--tt-accent); color: #fff !important; border: 0; border-radius: 999px; padding: 1rem 2.2rem; font-weight: 700; font-size: 1.5rem; text-decoration: none; text-shadow: none; box-shadow: none; white-space: nowrap; } .buybox .wpcmsdev-button:hover { background: var(--tt-fg); color: var(--tt-bg) !important; } /* theme: dark */ :root[data-theme="dark"] .buybox .wpcmsdev-button, :root[data-theme="dark"] .entry-content .wpcmsdev-button { color: #06201b !important; } :root[data-theme="dark"] .buybox .wpcmsdev-button:hover { color: var(--tt-bg) !important; } @media (max-width: 520px) { .buybox table.pricetable td.alignRight { margin-left: 0; width: 100%; } .buybox .wpcmsdev-button { display: block; text-align: center; } } /* Calculators (BMI, biological age, pace/watt, ...): follow the theme tokens in light and dark mode. The tool markup carries its own light-only colours (some inline), hence the !important. */ #ageForm, #bmiCalculator form, #paceCalculator form, .calculate form, .calculate { background: var(--tt-surface) !important; color: var(--tt-fg) !important; border-color: var(--tt-border) !important; border-radius: var(--tt-radius) !important; } .calculate { border: 1px solid var(--tt-border) !important; padding: 1.6rem !important; } #ageForm { padding: 2.4rem; border: 1px solid var(--tt-border); max-width: 60rem; margin: 0 auto 2rem; } .calculate form { border: 0 !important; } #ageForm label, .calculate label, .calculate .description, #viewHeight, #viewWeight, #viewAge, #viewWattToPace { color: var(--tt-fg) !important; font-weight: 600; } #ageForm label { display: block; margin: 1.4rem 0 .5rem; } #ageForm input:not([type=range]), #ageForm select, .calculate input:not([type=range]):not([type=checkbox]):not([type=radio]), .calculate select { width: 100%; background: var(--tt-bg) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: 10px !important; padding: .9rem 1.2rem; font: inherit; box-shadow: none; } .calculate input.smallTimeInput { width: 7rem !important; text-align: center; display: inline-block; } #ageForm input::placeholder, .calculate input::placeholder { color: var(--tt-muted); opacity: 1; } #ageForm input:focus, #ageForm select:focus, .calculate input:focus { outline: 3px solid var(--tt-accent); outline-offset: 1px; } input[type=range] { accent-color: var(--tt-accent); } #ageForm input[type=range] { width: 100%; padding: 0; } #ageForm button, .calculate button { margin-top: 2rem; background: var(--tt-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 1.1rem 2.6rem; font: inherit; font-weight: 700; cursor: pointer; } #ageForm button:hover, .calculate button:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; } #result, #bmiResult, #paceOrWattResult { background: var(--tt-accent-soft) !important; color: var(--tt-fg) !important; border-radius: 10px; padding: 1.2rem 1.6rem; margin-top: 1.6rem; } #result:empty { display: none; } #bmiCalculator .genderIcon { border-color: var(--tt-border); background-color: var(--tt-bg) !important; fill: var(--tt-fg); } #bmiCalculator input:checked + .genderIcon { background-color: var(--tt-accent) !important; fill: #fff; } #bmiCalculator .scale .label { color: var(--tt-fg); } .slider { background-color: var(--tt-border); } /* theme: dark */ :root[data-theme="dark"] #ageForm button, :root[data-theme="dark"] .calculate button { color: #06201b !important; } :root[data-theme="dark"] #ageForm button:hover, :root[data-theme="dark"] .calculate button:hover { color: var(--tt-bg) !important; } :root[data-theme="dark"] #bmiCalculator input:checked + .genderIcon { fill: #06201b; } /* Category/tag archive header and thin accent lines: no customizer blue, use theme tokens */ .archive-header, .header-footer-group { background-color: var(--tt-bg) !important; color: var(--tt-fg); } .archive-header { padding: 4rem 0 3rem; border-bottom: 1px solid var(--tt-border); } .archive-header .archive-title, .archive-header h1, .archive-header .archive-subtitle, .archive-header p { color: var(--tt-fg) !important; text-align: left; } .archive-header .archive-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 800; letter-spacing: -.035em; } .archive-header .archive-subtitle { font-size: 1.1em; color: var(--tt-muted) !important; max-width: 68rem; } .archive-header .archive-title .color-accent { color: var(--tt-accent) !important; } .toggle-wrapper::before, .header-titles-wrapper::before, .nav-toggle.search-toggle::before { background: var(--tt-border) !important; } .border-color-accent, .border-color-accent-hover, .primary-menu ul, .footer-top, .footer-top.has-footer-menu, .footer-nav-widgets-wrapper, .footer-top-visible .footer-nav-widgets-wrapper, #site-footer, #site-header, .header-inner, .menu-modal .modal-menu li, .modal-menu > li > .ancestor-wrapper, .modal-menu ul { border-color: var(--tt-border) !important; } .footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer .footer-nav-widgets-wrapper { border-top-color: var(--tt-border) !important; } .reset-list-style hr, hr, .entry-content hr:not(.has-background) { background: var(--tt-border) !important; color: var(--tt-border); border-color: var(--tt-border) !important; } .footer-top, .footer-menu li { border-bottom-color: var(--tt-border) !important; } /* FAQ accordion (FAQ schema plugin) */ .entry-content .wp-faq-schema-wrap { margin: 3rem auto; width: 100%; max-width: 58rem; } .wp-faq-schema-wrap > h2 { margin-bottom: 1.6rem; } .wp-faq-schema-items h3 { margin: 0 0 -1px; padding: 1.4rem 1.8rem; font-size: 1.7rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); cursor: pointer; position: relative; padding-right: 4.8rem !important; display: block !important; } .wp-faq-schema-items h3::after { content: "+"; position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%); font-size: 2.2rem; line-height: 1; color: var(--tt-accent); } .wp-faq-schema-items h3.active::after, .wp-faq-schema-items h3[aria-expanded="true"]::after, .wp-faq-schema-items h3.open::after { content: "–"; } .wp-faq-schema-items h3 + .faq-item, .wp-faq-schema-items .faq-item { background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); border-top: 0; border-radius: 0 0 var(--tt-radius) var(--tt-radius); padding: 1.2rem 1.8rem 1.6rem; margin: 0 0 1.2rem; font-size: 1.05em; } .wp-faq-schema-items .faq-item p { color: var(--tt-fg) !important; margin: 0 0 1em; } .wp-faq-schema-items .faq-item a { color: var(--tt-accent); } /* All calculators/tools: the tool pages ship their own light-only CSS (cards, white inline backgrounds, blue buttons). Normalise them to the theme tokens so they work in light and dark mode. */ .entry-content [style*="background: #fff"], .entry-content [style*="background:#fff"] { background: var(--tt-surface) !important; color: var(--tt-fg) !important; border-radius: var(--tt-radius); } .entry-content [style*="border: 1px solid #000"] { border-color: var(--tt-border) !important; border-radius: var(--tt-radius); } .entry-content .card, .entry-content main.card, .entry-content .container .card { background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); border-radius: var(--tt-radius) !important; box-shadow: none !important; max-width: 72rem; margin-left: auto; margin-right: auto; } .entry-content main.card, .entry-content main.card :is(div, p, span, label, strong, h2, h3, h4) { color: var(--tt-fg) !important; } .entry-content main.card div:not(.range) { background-color: transparent !important; } .entry-content main.card :is(.lead, .muted, small, .hint, .note) { color: var(--tt-muted) !important; } .entry-content main.card :is(.result, [id*="result" i], [class*="result" i]), .entry-content .container .history-item { background: var(--tt-accent-soft) !important; border: 1px solid var(--tt-border) !important; border-radius: 10px; color: var(--tt-fg) !important; } .entry-content .container .history-item { border-left: 5px solid var(--tt-accent) !important; } .entry-content .kcal-big { color: var(--tt-accent) !important; } .entry-content .total-card { background: var(--tt-accent-soft) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); } .entry-content .total-card :is(h3, div, p) { color: var(--tt-fg) !important; } /* Inputs everywhere in tools */ .entry-content :is(main.card, .container, #paceCalculator, .calculate, #ageForm) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]), select, textarea) { background: var(--tt-bg) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: 10px !important; padding: .9rem 1.2rem; font: inherit; box-shadow: none; color-scheme: light dark; } .entry-content :is(main.card, .container, #paceCalculator, .calculate) input::placeholder { color: var(--tt-muted) !important; opacity: 1; } .entry-content :is(main.card, .container, #paceCalculator, .calculate) :is(input, select):focus { outline: 3px solid var(--tt-accent); outline-offset: 1px; } .entry-content :is(main.card, .container, #paceCalculator, .calculate) input[type=range] { accent-color: var(--tt-accent); background: transparent !important; } /* Tool buttons: one accent pill style */ .entry-content :is(main.card, .container, #paceCalculator, .calculate) button, .entry-content .btn { background: var(--tt-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: .9rem 1.8rem; font: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; width: auto; } .entry-content button.small { padding: .7rem 1.3rem; } .entry-content .btn-export { background: var(--tt-fg) !important; color: var(--tt-bg) !important; } .entry-content .btn-delete { background: #c0392b !important; color: #fff !important; } .entry-content :is(main.card, .container, #paceCalculator, .calculate) button:hover { filter: brightness(1.1); } /* Rowing speed calculator */ #paceCalculator form { background: var(--tt-surface) !important; border: 1px solid var(--tt-border) !important; border-radius: var(--tt-radius) !important; } #paceCalculator fieldset { border: 1px solid var(--tt-border) !important; border-radius: 10px; padding: 1.2rem 1.6rem 1.6rem; margin: 1.6rem 0; } #paceCalculator legend { color: var(--tt-fg) !important; padding: 0 .8rem; font-weight: 700; } #paceCalculator .buttonLabel .icon { background: var(--tt-bg) !important; border: 1px solid var(--tt-border); color: var(--tt-fg) !important; } #paceCalculator .buttonLabel .icon svg, #paceCalculator .buttonLabel .icon path { stroke: currentColor; } #paceCalculator .buttonLabel input:checked + .icon { background: var(--tt-accent) !important; border-color: var(--tt-accent); color: #fff !important; } #paceCalculator #paceCalculatorResult { background: var(--tt-accent-soft) !important; color: var(--tt-fg) !important; border-radius: 10px; } #paceCalculator #paceCalculatorResult * { color: var(--tt-fg) !important; } #paceCalculator, #paceCalculator p, #paceCalculator label, #paceCalculator span { color: var(--tt-fg); } /* Tables inside calculators (ideal weight, max pulse, 1RM, ...) */ .entry-content .calculate table, .entry-content .calculate td, .entry-content .calculate th { background: transparent !important; color: var(--tt-fg) !important; border-color: var(--tt-border) !important; } /* theme: dark */ :root[data-theme="dark"] .entry-content :is(main.card, .container, #paceCalculator, .calculate) button, :root[data-theme="dark"] .entry-content .btn:not(.btn-export) { color: #06201b !important; } :root[data-theme="dark"] #paceCalculator .buttonLabel input:checked + .icon { color: #06201b !important; } :root[data-theme="dark"] .entry-content .btn-delete { color: #fff !important; } /* ================= Modern layer v2: editorial grid, stretched links, reading progress ================= */ :root { --tt-ease: cubic-bezier(.2,.7,.2,1); } html { -webkit-text-size-adjust: 100%; } a { text-decoration-thickness: .08em; text-underline-offset: .22em; transition: color .15s, background-size .2s; } .entry-content a:hover { text-decoration-color: var(--tt-lime); text-decoration-thickness: .2em; } /* Reading progress bar (assets/js/modern.js); the old plugin bar and GIF snippet are hidden */ .readingProgressbar, .gif-toggle-wrapper { display: none !important; } .gr-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; pointer-events: none; background: linear-gradient(90deg, var(--tt-accent), var(--tt-lime)); transform-origin: 0 50%; transform: scaleX(0); } .admin-bar .gr-progress { top: 32px; } /* GIF toggle */ .gr-gif-toggle { margin: 1.6rem 0 0; text-align: center; } .gr-gif-toggle label { display: inline-flex; align-items: center; gap: .9rem; cursor: pointer; font-size: 1.4rem; font-weight: 600; color: var(--tt-muted); user-select: none; } .gr-gif-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .gr-gif-toggle__track { position: relative; width: 4.2rem; height: 2.4rem; border-radius: 999px; background: var(--tt-border); border: 1px solid var(--tt-border); transition: background .2s var(--tt-ease, ease); flex: none; } .gr-gif-toggle__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tt-fg); transition: transform .2s var(--tt-ease, ease), background .2s; } .gr-gif-toggle__input:checked + .gr-gif-toggle__track { background: var(--tt-accent); border-color: var(--tt-accent); } .gr-gif-toggle__input:checked + .gr-gif-toggle__track::after { transform: translateX(1.8rem); background: var(--tt-surface); } .gr-gif-toggle__input:focus-visible + .gr-gif-toggle__track { outline: 3px solid var(--tt-accent); outline-offset: 2px; } .gr-gif-toggle:hover .gr-gif-toggle__label { color: var(--tt-fg); } /* Home / archives: editorial card grid, first post is a wide feature */ .blog #site-content, .archive #site-content, .search #site-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); gap: 2.4rem; max-width: 124rem; margin: 0 auto; padding: 3rem 2rem 5rem; } .blog #site-content > :not(article), .archive #site-content > :not(article), .search #site-content > :not(article) { grid-column: 1 / -1; } .blog #site-content > article.post, .archive #site-content > article.post, .search #site-content > article.post { position: relative; max-width: none; margin: 0; height: 100%; padding-bottom: 0; } .blog .entry-title a::after, .archive .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .blog article.post .entry-content, .archive article.post .entry-content { max-height: 11.5rem; overflow: hidden; font-size: 1.5rem; color: var(--tt-muted); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } .blog article.post .entry-content *, .archive article.post .entry-content * { color: var(--tt-muted) !important; } .blog article.post .more-link, .archive article.post .more-link, .blog article.post .post-meta .post-comment-link { display: none; } .blog article.post > .section-inner { display: none; } .blog article.post .featured-media img, .archive article.post .featured-media img { transition: transform .5s var(--tt-ease); } .blog article.post:hover .featured-media img, .archive article.post:hover .featured-media img { transform: scale(1.04); } .blog article.post .featured-media, .archive article.post .featured-media { overflow: hidden; } @media (min-width: 900px) { .blog #site-content > article.post:first-of-type, .archive #site-content > article.post:first-of-type { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .blog article.post:first-of-type .featured-media, .archive article.post:first-of-type .featured-media { flex: 0 0 58%; order: 0; } .blog article.post:first-of-type .featured-media img, .archive article.post:first-of-type .featured-media img { height: 100%; aspect-ratio: auto; min-height: 34rem; } .blog article.post:first-of-type > .entry-header, .archive article.post:first-of-type > .entry-header { padding-top: 3.2rem; } .blog article.post:first-of-type .entry-title, .archive article.post:first-of-type .entry-title { font-size: clamp(3rem, 3.6vw, 4.4rem); } .blog article.post:first-of-type .post-inner, .archive article.post:first-of-type .post-inner { display: none; } .blog article.post:first-of-type, .archive article.post:first-of-type { display: grid; grid-template-columns: 58% 1fr; } .blog article.post:first-of-type .featured-media, .archive article.post:first-of-type .featured-media { grid-row: 1; grid-column: 1; } .blog article.post:first-of-type > .entry-header, .archive article.post:first-of-type > .entry-header { grid-row: 1; grid-column: 2; align-self: center; padding: 3.2rem; } } .pagination-single, .posts-pagination { grid-column: 1 / -1; } .posts-pagination a, .posts-pagination span { border-radius: 999px; } /* Single post: comfortable measure, table of contents as a calm card */ .singular .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { max-width: 66rem; } #toc_container { background: var(--tt-surface) !important; border: 1px solid var(--tt-border) !important; border-radius: var(--tt-radius); padding: 1.8rem 2.2rem !important; width: auto !important; max-width: 66rem; font-size: inherit; line-height: 1.5; margin: 0 auto 2rem; } #toc_container .toc_title { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .65em; color: var(--tt-muted); text-align: left; margin: 0 0 .8rem; } #toc_container ul, #toc_container li { list-style: none; margin: 0; padding: 0; } #toc_container ul ul { margin-left: 1.2rem; } #toc_container li { margin: .25rem 0; } #toc_container a { display: block; color: var(--tt-fg); text-decoration: none; padding: .2rem 0 .2rem 1rem; border-left: 3px solid transparent; } #toc_container a:hover { color: var(--tt-accent); } #toc_container a.is-active { color: var(--tt-accent); font-weight: 700; border-left-color: var(--tt-lime); } .entry-content [id] { scroll-margin-top: 9rem; } /* TOC im Textfluss (nicht angedockt): gleiche Breite und linke Kante wie der Text, mehr Luft nach unten, ruhiger Akzent. Die Selektoren mit #site-content schlagen die alten Regeln in style.css (width calc(100% - 4rem), Linie an .toc_list). */ #site-content div#toc_container:not(.is-docked) { box-sizing: border-box; width: 100% !important; max-width: 66rem; margin: 0 auto; padding: 2.2rem 2.8rem 2rem !important; border: 1px solid var(--tt-border) !important; border-left: 4px solid var(--tt-lime) !important; border-radius: var(--tt-radius); background: var(--tt-surface) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; } #toc_container:not(.is-docked) p.toc_title { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; font-size: 1.3rem; letter-spacing: .12em; color: var(--tt-muted); } #toc_container:not(.is-docked) p.toc_title::before { content: ""; width: 1.8rem; height: 2px; border-radius: 2px; background: var(--tt-lime); } #toc_container:not(.is-docked) .toc_list { margin: 0; padding: 0; border: 0; } #toc_container:not(.is-docked) .toc_list > li { margin: 0; padding: .5rem 0; border-top: 1px solid var(--tt-border); } #toc_container:not(.is-docked) .toc_list > li:first-child { border-top: 0; padding-top: 0; } #toc_container:not(.is-docked) .toc_list > li:last-child { padding-bottom: 0; } #toc_container:not(.is-docked) a { padding: .3rem 0; border-left: 0; font-size: 1.7rem; line-height: 1.4; transition: color .15s, transform .15s; } #toc_container:not(.is-docked) a:hover { color: var(--tt-accent); transform: translateX(.3rem); } #toc_container:not(.is-docked) ul ul { margin: .2rem 0 .2rem 1.6rem; } #toc_container:not(.is-docked) ul ul a { font-size: 1.5rem; color: var(--tt-muted); } #toc_container:not(.is-docked) ul ul a:hover { color: var(--tt-accent); } @media (max-width: 600px) { #site-content div#toc_container:not(.is-docked) { padding: 1.8rem 2rem 1.6rem !important; } } .entry-content > .toc-holder { max-width: 66rem; margin: 3.2rem auto 4.8rem; } /* Der Abstand liegt am Platzhalter, nicht am TOC: so ändert sich die Dokumenthöhe beim Andocken nicht (kein Sprung). Die folgende Überschrift bringt ihren eigenen großen Abstand (3.2em) nicht noch einmal mit. */ .entry-content > .toc-holder + h2, .entry-content > .toc-holder + h3 { margin-top: 0; } @media (max-width: 600px) { .entry-content > .toc-holder { margin: 2.4rem auto 3.6rem; } } /* Wide screens: the TOC follows the reader in the left gutter */ @media (min-width: 1380px) { .toc-holder div#toc_container.is-docked.is-docked { display: block; box-sizing: border-box; position: fixed; top: 9rem; left: calc(50% - 33rem - 32rem); width: 29rem !important; min-width: 0 !important; max-width: 29rem !important; max-height: calc(100vh - 12rem); overflow-y: auto; font-size: 1.5rem; padding: 1.4rem 1.6rem !important; margin: 0; scrollbar-width: thin; z-index: 20; transition: opacity .2s; } .toc-holder div#toc_container.is-docked.is-covered { opacity: 0; pointer-events: none; } } /* Footer: calm grid */ .footer-widgets-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 3rem 5rem; margin: 0; } .footer-widgets-wrapper > .footer-widgets { width: 100% !important; max-width: none; margin: 0; padding: 0; } #site-footer .footer-credits { font-size: 1.3rem; } /* Fixes for the card grid: Twenty Twenty's .section-inner adds side margins/padding and 100vw widths */ html, body { overflow-x: clip; } .blog article.post .featured-media, .archive article.post .featured-media, .search article.post .featured-media { margin: 0 !important; padding: 0; } .blog article.post .featured-media-inner, .archive article.post .featured-media-inner, .search article.post .featured-media-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; left: auto !important; position: static !important; } .blog article.post figure, .archive article.post figure { margin: 0; } .blog article.post .entry-header-inner, .archive article.post .entry-header-inner { width: 100% !important; max-width: none !important; margin: 0 !important; } .blog article.post .entry-header, .archive article.post .entry-header { margin: 0; } .blog article.post .post-inner, .archive article.post .post-inner { width: 100%; } @media (min-width: 900px) { .blog article.post:first-of-type .featured-media img, .archive article.post:first-of-type .featured-media img { min-height: 36rem; height: 100%; } } /* Feature card: image fills its whole column edge to edge */ @media (min-width: 900px) { .blog article.post:first-of-type .featured-media, .archive article.post:first-of-type .featured-media { position: relative; min-height: 38rem; align-self: stretch; } .blog article.post:first-of-type .featured-media-inner, .archive article.post:first-of-type .featured-media-inner { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; } .blog article.post:first-of-type .featured-media img, .archive article.post:first-of-type .featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; } } /* Twenty Twenty pads the first post of every list (4rem / 8rem); the card grid handles spacing itself */ body:not(.singular) main > article.post:first-of-type { padding-top: 0 !important; margin-top: 0 !important; } /* Highlighted text (wpcmsdev shortcode): readable marker look in both modes */ .entry-content .wpcmsdev-highlight, .entry-content mark { background: color-mix(in srgb, var(--tt-lime) 38%, transparent) !important; color: inherit !important; padding: .05em .3em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .entry-content .wpcmsdev-highlight em, .entry-content .wpcmsdev-highlight strong { color: inherit; } /* theme: light */ :root[data-theme="light"] .entry-content .wpcmsdev-highlight, :root[data-theme="light"] .entry-content mark { background: color-mix(in srgb, var(--tt-lime) 70%, transparent) !important; color: #14181c !important; } /* Newsletter box */ .entry-content .newsletterBox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; width: 100%; max-width: 100%; margin: 3.2rem 0; padding: 0; overflow: hidden; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: calc(var(--tt-radius) + 4px); } .newsletterBox .image { position: relative; min-height: 22rem; margin: 0; padding: 0; float: none; width: auto; } .newsletterBox .image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; } .newsletterBox .form { float: none; width: auto; padding: 3rem 3.2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; background: transparent; } .newsletterBox .form p { margin: 0; font-size: .92em; line-height: 1.55; color: var(--tt-muted); } .newsletterBox .form p br { display: none; } .newsletterBox .form p:first-of-type { color: var(--tt-fg); } .newsletterBox .h2 { display: block; margin: 0; font-size: clamp(2.4rem, 2.6vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tt-fg); } .newsletterBox .h2::before { content: ""; display: block; width: 2.4rem; height: .4rem; margin-bottom: 1.2rem; border-radius: 999px; background: var(--tt-lime); } .newsletterBox form { display: flex; flex-wrap: wrap; gap: 1rem; margin: .4rem 0; } .newsletterBox form br { display: none; } .newsletterBox input[type="text"], .newsletterBox input[type="email"] { flex: 1 1 18rem; width: auto; margin: 0; background: var(--tt-bg) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: 999px !important; padding: 1.1rem 1.8rem; font: inherit; box-shadow: none; } .newsletterBox input::placeholder { color: var(--tt-muted); opacity: 1; } .newsletterBox input:focus { outline: 3px solid var(--tt-accent); outline-offset: 1px; } .newsletterBox button[type="submit"] { flex: 1 1 100%; background: var(--tt-accent) !important; color: #fff !important; border: 0; border-radius: 999px !important; padding: 1.2rem 2.4rem; font: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } .newsletterBox button[type="submit"]:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; } /* theme: dark */ :root[data-theme="dark"] .newsletterBox button[type="submit"] { color: #06201b !important; } @media (max-width: 720px) { .entry-content .newsletterBox { grid-template-columns: 1fr; } .newsletterBox .image { min-height: 16rem; } .newsletterBox .form { padding: 2.2rem; } } /* Buybox v2: fixed width, centred, readable buttons */ .entry-content .wpcmsdev-alert.buybox, .entry-content .wpcmsdev-alert.crossbox { float: none !important; clear: both; box-sizing: border-box; width: min(100%, 62rem) !important; max-width: 62rem !important; margin: 2.8rem auto !important; padding: 0 !important; left: auto !important; right: auto !important; overflow: hidden; background: var(--tt-surface) !important; border: 1px solid var(--tt-border) !important; border-radius: calc(var(--tt-radius) + 4px) !important; } .entry-content .crossbox .alert-content { padding: 2.2rem 2.4rem 2.4rem; text-align: center; } .buybox .alert-content, .crossbox .alert-content { text-align: center; } .buybox .alert-content > p:first-child { font-size: 1em; color: var(--tt-fg); margin: 0 0 1.4rem; } .buybox .alert-content p > a > img, .crossbox .alert-content p > a > img { margin: 0 auto 1.4rem; max-height: 32rem; object-fit: contain; } .buybox table.pricetable tr { padding: 1.6rem 2.4rem; justify-content: space-between; } .buybox table.pricetable td:nth-child(2) { flex: 1 1 12rem; text-align: left; font-size: 1.5rem; } .buybox table.pricetable td.alignRight { margin-left: auto; flex: 0 0 auto; } .entry-content a.wpcmsdev-button, .entry-content .buybox a.wpcmsdev-button, .entry-content .crossbox a.wpcmsdev-button { display: inline-flex !important; align-items: center; justify-content: center; gap: .15em; white-space: nowrap; line-height: 1.2; padding: 1rem 2.2rem !important; font-size: 1.5rem !important; font-weight: 700; text-decoration: none !important; background: var(--tt-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: none !important; box-shadow: none !important; } .entry-content a.wpcmsdev-button::after { margin: 0; } .entry-content a.wpcmsdev-button:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; -webkit-text-fill-color: var(--tt-bg); } .crossbox a.wpcmsdev-button { margin-top: .6rem; } /* theme: dark */ :root[data-theme="dark"] .entry-content a.wpcmsdev-button, :root[data-theme="dark"] .entry-content .buybox a.wpcmsdev-button, :root[data-theme="dark"] .entry-content .crossbox a.wpcmsdev-button { color: #06201b !important; -webkit-text-fill-color: #06201b; } :root[data-theme="dark"] .entry-content a.wpcmsdev-button:hover { color: var(--tt-bg) !important; -webkit-text-fill-color: var(--tt-bg); } @media (max-width: 560px) { .buybox table.pricetable tr { flex-direction: column; align-items: stretch; text-align: center; } .buybox table.pricetable td, .buybox table.pricetable td:first-child { flex: 1 1 auto; text-align: center; } .buybox .shopimage { margin: 0 auto; } .entry-content a.wpcmsdev-button { white-space: normal; width: 100%; } } /* Max pulse zones: tinted rows with a colour bar, readable in both modes */ .entry-content table.heartbeat { display: table; width: 100%; max-width: 56rem; margin: 2rem auto; border-collapse: separate; border-spacing: 0 .6rem; background: transparent !important; } .entry-content table.heartbeat td { padding: 1.2rem 1.6rem !important; border: 0 !important; font-weight: 600; color: var(--tt-fg) !important; } .entry-content table.heartbeat td:first-child { border-radius: 10px 0 0 10px; border-left: 6px solid var(--zone) !important; } .entry-content table.heartbeat td:last-child, .entry-content table.heartbeat td.right { border-radius: 0 10px 10px 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .entry-content table.heartbeat tr { --zone: #94a3b8; } .entry-content table.heartbeat tr.red { --zone: #ef4444; } .entry-content table.heartbeat tr.yellow { --zone: #eab308; } .entry-content table.heartbeat tr.green { --zone: #22c55e; } .entry-content table.heartbeat tr.blue { --zone: #3b82f6; } .entry-content table.heartbeat tr.gray { --zone: #94a3b8; } .entry-content table.heartbeat tr td { background: color-mix(in srgb, var(--zone) 20%, var(--tt-surface)) !important; } /* Newsletter box: centred in the text column */ .entry-content .newsletterBox { width: min(100%, 66rem) !important; max-width: 66rem !important; margin: 3.2rem auto !important; float: none !important; } .newsletterBox .image { overflow: hidden; } /* Any remaining customizer-blue lines in the footer area */ .footer-nav-widgets-wrapper, .footer-nav-widgets-wrapper *, #site-footer, #site-footer *, .footer-widgets-outer-wrapper { border-color: var(--tt-border) !important; } .footer-widgets-outer-wrapper { border-bottom-color: var(--tt-border) !important; border-top-color: var(--tt-border) !important; } /* Light mode: customizer colours assume a dark header; force readable text and one page background */ html, body, body.custom-background, #site-content { background-color: var(--tt-bg) !important; color: var(--tt-fg); } #site-header, #site-header a, #site-header button, #site-header .toggle, #site-header .toggle-text, #site-header .site-title a, .primary-menu a, .header-footer-group { color: var(--tt-fg) !important; } #site-header svg, #site-header .svg-icon, #site-header .toggle svg { fill: currentColor; } .entry-header .post-meta, .entry-header .post-meta li, .entry-header .post-meta a, .post-meta .meta-text, .post-meta .meta-wrapper, .post-meta-single .post-meta, .post-meta-wrapper .post-meta { color: var(--tt-muted) !important; } .post-meta .meta-icon svg, .post-meta svg { fill: currentColor; color: var(--tt-muted) !important; } .footer-nav-widgets-wrapper, .footer-nav-widgets-wrapper a, .footer-widgets a, .footer-menu a, #site-footer a, .footer-credits, .footer-copyright { color: var(--tt-fg) !important; } .footer-credits, .footer-copyright, a.to-the-top, .to-the-top span { color: var(--tt-muted) !important; } /* FAQ: roomier, questions and answers in the same type size */ .entry-content .wp-faq-schema-wrap { margin: 4rem auto; } .wp-faq-schema-items h3 { font-size: 1em !important; font-weight: 700; line-height: 1.4; margin: 0 0 -1px !important; padding: 2rem 5.6rem 2rem 2.4rem !important; } .wp-faq-schema-items h3::after { right: 2.4rem; } .wp-faq-schema-items .faq-item { font-size: 1em !important; line-height: 1.7; padding: 1.6rem 2.4rem 2.2rem !important; margin: 0 0 1.4rem !important; } .wp-faq-schema-items .faq-item p { font-size: 1em !important; margin: 0 0 1em; } .wp-faq-schema-items .faq-item p:last-child { margin-bottom: 0; } /* Category pills: solid contrast in light mode, full-width pulse zones */ .entry-categories-inner a, .entry-categories a, .entry-header .entry-categories-inner a { background: var(--tt-accent-soft) !important; color: var(--tt-accent) !important; opacity: 1 !important; border: 1px solid color-mix(in srgb, var(--tt-accent) 25%, transparent) !important; } .entry-categories-inner a:hover { background: var(--tt-accent) !important; color: var(--tt-bg) !important; } .entry-content table.heartbeat, #heartfrequentzones, #heartfrequentzones table { width: 100% !important; max-width: none !important; margin-left: 0; margin-right: 0; } #heartfrequentzones { display: block; padding: 0 1rem; box-sizing: border-box; } /* Lists: no category pills on the cards, everything left-aligned on one edge */ .blog article.post .entry-categories, .archive article.post .entry-categories, .search article.post .entry-categories { display: none !important; } .blog article.post .entry-header, .archive article.post .entry-header, .search article.post .entry-header, .blog article.post .entry-header *, .archive article.post .entry-header * { text-align: left; } .blog article.post .entry-header-inner, .archive article.post .entry-header-inner { padding-left: 0 !important; padding-right: 0 !important; } .blog article.post .entry-title, .archive article.post .entry-title { padding: 0; margin-left: 0; } .blog article.post .post-meta, .archive article.post .post-meta { padding: 0; margin-left: 0; justify-content: flex-start; } /* Theme switch (light/dark): dark is the default, the choice is stored in localStorage */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } .theme-toggle-wrapper { display: flex; align-items: center; } .theme-toggle { background: transparent !important; border: 0 !important; padding: 0 1.4rem; height: 100%; cursor: pointer; color: var(--tt-fg) !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 0 !important; } .theme-toggle svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle:hover { color: var(--tt-accent) !important; } .theme-toggle:focus-visible { outline: 3px solid var(--tt-accent); outline-offset: 2px; } .mobile-theme-toggle { display: none; } @media (max-width: 1000px) { .mobile-theme-toggle { display: inline-flex; } .header-toggles .theme-toggle-wrapper { display: none; } } /* Related posts (Contextual Related Posts): same card look as the list, wider than the text column on desktop */ .singular .entry-content > .crp_related { max-width: min(112rem, 100%) !important; width: 100%; margin: 5rem auto 2rem !important; font-family: var(--tt-font); } .crp_related > p.heading-size-4, .crp_related > .heading-size-4 { font-family: var(--tt-font); font-size: clamp(2.4rem, 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-align: left; margin: 0 0 2.4rem; color: var(--tt-fg); } .crp_related > p.heading-size-4::before { content: ""; display: block; width: 2.4rem; height: .4rem; margin-bottom: 1.2rem; border-radius: 999px; background: var(--tt-lime); } .crp_related ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 2.4rem; list-style: none; margin: 0; padding: 0; } .crp_related li { margin: 0; padding: 0; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; } .crp_related li:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.12); } .crp_related a.crp_link { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: var(--tt-fg) !important; } .crp_related figure { margin: 0 !important; overflow: hidden; } .crp_related img.crp_thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; transition: transform .5s var(--tt-ease, ease); } .crp_related li:hover img.crp_thumb { transform: scale(1.04); } .crp_related .crp_title { display: block; padding: 1.6rem 2rem 2rem; font-family: var(--tt-font); font-size: 1.05em; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--tt-fg); } .crp_related a.crp_link:hover .crp_title { color: var(--tt-accent); } @media (min-width: 1000px) { .crp_related ul { grid-template-columns: repeat(3, 1fr); } .crp_related .crp_title { font-size: 1.15em; } } /* Footer type scale: titles 1.8rem / bold, links and list text 1.6rem / regular, fine print 1.3rem */ #site-footer, .footer-nav-widgets-wrapper { font-size: 1.6rem; line-height: 1.5; } .footer-widgets .widget-title, .footer-widgets h2, .footer-widgets h3, .footer-widgets .widgettitle { font-size: 1.8rem !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 1.4rem; text-transform: none; } .footer-widgets .widget { margin-top: 0; margin-bottom: 3.6rem; } .footer-widgets, .footer-widgets p, .footer-widgets li, .footer-widgets a, .footer-widgets .textwidget { font-size: 1.6rem !important; font-weight: 400 !important; line-height: 1.5; } .footer-widgets ul { list-style: none; margin: 0; padding: 0; } .footer-widgets li { margin: 0 0 .8rem; padding: 0; border: 0; } .footer-widgets .recentcomments, .footer-widgets .recentcomments * { font-weight: 400 !important; } .footer-widgets .recentcomments .comment-author-link, .footer-widgets .recentcomments .comment-author-link a { font-weight: 600 !important; } .footer-menu a, .footer-menu li { font-size: 1.6rem !important; font-weight: 600; } .footer-credits, .footer-copyright, .footer-copyright a, a.to-the-top, a.to-the-top span, .to-the-top-long, .to-the-top-short { font-size: 1.3rem !important; font-weight: 400 !important; } .footer-credits p { margin: 0; } /* Footer buttons (widgets ship an inline white background) */ .footer-widgets, .footer-widgets p, .footer-widgets li, .footer-widgets .textwidget { font-family: var(--tt-font) !important; } .footer-widgets a.button, .footer-widgets a.faux-button, .footer-widgets .wp-block-button__link { display: inline-block; background: var(--tt-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 1.1rem 2.2rem !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none !important; text-decoration: none !important; } .footer-widgets a.button:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; } :root[data-theme="dark"] .footer-widgets a.button, :root[data-theme="dark"] .footer-widgets a.faux-button { color: #06201b !important; } :root[data-theme="dark"] .footer-widgets a.button:hover { color: var(--tt-bg) !important; } /* Card text: undo Twenty Twenty's centred 'calc(100% - 8rem)' column inside the cards so text aligns with the title */ .blog article.post .entry-content > *, .archive article.post .entry-content > *, .search article.post .entry-content > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; } .blog article.post .entry-content, .archive article.post .entry-content { padding-left: 2.4rem; padding-right: 2.4rem; } /* Feature card (first post): bigger type and a teaser */ @media (min-width: 900px) { .blog article.post:first-of-type .post-inner, .archive article.post:first-of-type .post-inner { display: block !important; grid-column: 2; grid-row: 2; align-self: start; padding: 0 3.2rem 3.2rem; } .blog article.post:first-of-type .featured-media, .archive article.post:first-of-type .featured-media { grid-row: 1 / span 2; grid-column: 1; } .blog article.post:first-of-type > .entry-header, .archive article.post:first-of-type > .entry-header { grid-row: 1; grid-column: 2; align-self: end; padding: 3.2rem 3.2rem 1.2rem; } .blog article.post:first-of-type .entry-title, .archive article.post:first-of-type .entry-title { font-size: clamp(3.4rem, 4.2vw, 5.4rem); line-height: 1.05; margin-bottom: 1.4rem; } .blog article.post:first-of-type .post-meta, .archive article.post:first-of-type .post-meta { font-size: 1.4rem; } .blog article.post:first-of-type .entry-content, .archive article.post:first-of-type .entry-content { padding: 0; font-size: 1.9rem; line-height: 1.55; max-height: 15rem; } } /* Author box v2 */ .author-bio { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem 3rem; align-items: start; max-width: 66rem; margin: 5rem auto 3rem; padding: 3rem; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: calc(var(--tt-radius) + 4px); } .author-bio .author-avatar { margin: 0; } .author-bio .author-avatar img, .author-bio .avatar { width: 9.6rem; height: 9.6rem; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px var(--tt-surface), 0 0 0 5px var(--tt-lime); } .author-bio .author-content { min-width: 0; } .author-bio .author-eyebrow { display: block; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tt-muted); margin: 0 0 .4rem; } .author-bio .author-name { margin: 0 0 1.2rem; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .author-bio .author-name a { color: var(--tt-fg) !important; text-decoration: none; } .author-bio .author-name a:hover { color: var(--tt-accent) !important; } .author-bio .author-description, .author-bio .author-description p { font-size: 1.6rem; line-height: 1.65; color: var(--tt-muted) !important; margin: 0 0 1em; } .author-bio .author-description p:last-child { margin-bottom: 0; } .author-bio a.author-more { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.6rem; padding: .9rem 1.8rem; border-radius: 999px; font-size: 1.5rem; font-weight: 700; text-decoration: none; background: var(--tt-accent); color: #fff !important; transition: transform .15s; } .author-bio a.author-more:hover { transform: translateX(3px); background: var(--tt-fg); color: var(--tt-bg) !important; } :root[data-theme="dark"] .author-bio a.author-more { color: #06201b !important; } :root[data-theme="dark"] .author-bio a.author-more:hover { color: var(--tt-bg) !important; } @media (max-width: 600px) { .author-bio { grid-template-columns: 1fr; padding: 2.2rem; } .author-bio .avatar { width: 7.2rem; height: 7.2rem; } } /* Comments: card per comment, round avatar beside the name, readable reply button */ .comments-header { padding-bottom: 0; } .comment-reply-title, .comments-header h2 { font-size: clamp(2.4rem, 2.6vw, 3.2rem) !important; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-align: left; margin: 0 0 2.4rem; } .comments-inner { max-width: 66rem !important; margin-left: auto; margin-right: auto; } .comment { margin: 0 0 1.6rem; padding: 0; border: 0; } .comment-body { background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); padding: 2.2rem 2.4rem; margin: 0; } .comment .comment { margin-left: 2.4rem; } .comment-meta { display: grid; grid-template-columns: 5.2rem 1fr; grid-template-rows: auto auto; column-gap: 1.4rem; align-items: center; margin: 0 0 1.4rem; padding: 0; position: static; min-height: 5.2rem; } .comment-meta .comment-author { display: contents; } .comment-meta .comment-author img, .comment-meta .comment-author .avatar { grid-column: 1; grid-row: 1 / span 2; width: 5.2rem !important; height: 5.2rem !important; border-radius: 50% !important; object-fit: cover; position: static !important; margin: 0 !important; float: none; } .comment-meta .comment-author .fn { grid-column: 2; grid-row: 1; align-self: end; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--tt-fg); } .comment-meta .comment-author .fn a { color: var(--tt-fg); text-decoration: none; } .comment-meta .comment-author .fn a:hover { color: var(--tt-accent); } .comment-meta .comment-metadata { grid-column: 2; grid-row: 2; align-self: start; margin: .2rem 0 0; padding: 0; font-size: 1.3rem; } .comment-meta .comment-metadata a { color: var(--tt-muted) !important; text-decoration: none; font-weight: 400; } .comment-meta .comment-metadata a:hover { color: var(--tt-accent) !important; } .comment-content, .comment-content p { font-size: 1.6rem; line-height: 1.65; } .comment-content > :last-child { margin-bottom: 0; } .comment-footer-meta { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; padding: 0; } .comment-footer-meta .comment-reply { margin: 0; } a.comment-reply-link, .comment-reply-link { display: inline-flex; align-items: center; background: transparent !important; color: var(--tt-accent) !important; border: 1.5px solid var(--tt-accent) !important; border-radius: 999px !important; padding: .6rem 1.6rem !important; font-size: 1.4rem !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; line-height: 1.2; } a.comment-reply-link:hover { background: var(--tt-accent) !important; color: var(--tt-bg) !important; } .comment-footer-meta .comment-author-badge, .by-post-author { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tt-muted); } .bypostauthor > .comment-body { border-left: 4px solid var(--tt-lime); } .cld-like-dislike-wrap { margin: 1.4rem 0 0; display: flex; gap: 1.2rem; font-size: 1.5rem; } .cld-like-dislike-wrap a, .cld-like-dislike-wrap i, .cld-like-dislike-wrap span { color: var(--tt-accent) !important; text-decoration: none; } .cld-like-count-wrap { color: var(--tt-muted) !important; font-weight: 600; } .comment-respond { max-width: 66rem; margin-left: auto; margin-right: auto; } .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { background: var(--tt-surface); color: var(--tt-fg); border: 1px solid var(--tt-border); border-radius: 10px; padding: 1.1rem 1.4rem; font: inherit; width: 100%; } .comment-respond input[type="submit"] { background: var(--tt-accent); color: #fff; border: 0; border-radius: 999px; padding: 1.1rem 2.4rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } :root[data-theme="dark"] .comment-respond input[type="submit"] { color: #06201b; } @media (max-width: 600px) { .comment .comment { margin-left: 1rem; } .comment-body { padding: 1.8rem; } } /* Buybox v3: bigger, price comparison rows, coupon badge */ .entry-content .wpcmsdev-alert.buybox { width: min(100%, 74rem) !important; max-width: 74rem !important; } .entry-content .wpcmsdev-alert.buybox:has(table.pricetable tr + tr) { width: min(100%, 86rem) !important; max-width: 86rem !important; } .buybox .alert-content { padding: 3rem 3.2rem 0; } .buybox .alert-content > p:first-child { font-size: 1.05em; line-height: 1.55; max-width: 60rem; margin-left: auto; margin-right: auto; } .buybox .alert-content p > a > img { max-height: 46rem; width: 100%; padding: 2rem; background: #fff; border-radius: 12px; } .buybox table.pricetable { margin-top: 2.4rem; } .buybox table.pricetable tr { padding: 2rem 3.2rem; gap: 1.6rem 2.4rem; border-top: 1px solid var(--tt-border); } .buybox table.pricetable td:first-child { flex: 0 0 15rem; } .buybox .shopimage { max-height: 5.4rem; max-width: 15rem; width: auto; padding: .6rem 1rem; } .buybox table.pricetable td:nth-child(2) { flex: 1 1 18rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; } .entry-content .buybox a.wpcmsdev-button { padding: 1.3rem 2.8rem !important; font-size: 1.7rem !important; } /* Coupon link inside the price cell becomes a badge, and its row is highlighted */ .buybox table.pricetable td:nth-child(2) a:not(.affiliate-link) { display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; padding: .3rem 1.1rem; border-radius: 999px; background: var(--tt-lime); color: #14181c !important; font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-lime) 60%, transparent); animation: gr-coupon 2.4s ease-out infinite; } .buybox table.pricetable td:nth-child(2) a:not(.affiliate-link)::before { content: "%"; font-weight: 900; } .buybox table.pricetable tr:has(td:nth-child(2) a:not(.affiliate-link)) { background: color-mix(in srgb, var(--tt-lime) 14%, var(--tt-accent-soft)); box-shadow: inset 5px 0 0 var(--tt-lime); } .buybox table.pricetable tr:has(td:nth-child(2) a:not(.affiliate-link)) td { background: transparent !important; } @keyframes gr-coupon { 70% { box-shadow: 0 0 0 .9rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .buybox table.pricetable td:nth-child(2) a:not(.affiliate-link) { animation: none; } } @media (max-width: 560px) { .buybox .alert-content { padding: 2rem 1.6rem 0; } .buybox table.pricetable tr { padding: 1.6rem; } .buybox table.pricetable td:nth-child(2) { font-size: 1.7rem; } } /* Rudergeräte-Finder (.advisor) */ .entry-content .advisor { width: min(100%, 74rem) !important; max-width: 74rem !important; margin: 3rem auto !important; padding: 3rem !important; background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: calc(var(--tt-radius) + 4px) !important; box-shadow: none !important; } .advisor p, .advisor h3, .advisor strong { color: var(--tt-fg) !important; } .advisor .question > p { margin: 0 0 1.6rem; font-size: 2.2rem; } .advisor .options { display: grid; gap: 1rem; } .advisor .option { padding: 1.4rem 1.8rem; background: var(--tt-bg) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: var(--tt-radius); font-size: 1.8rem; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; } .advisor .option:hover, .advisor .option:focus-visible { background: var(--tt-accent-soft) !important; border-color: var(--tt-accent) !important; transform: translateX(.4rem); } .advisor .result h3 { margin: 0 0 1rem; font-size: 2.4rem; } .advisor .result p, .advisor .result li { color: var(--tt-fg) !important; } .advisor .result a { color: var(--tt-accent); } .advisor button { padding: 1.1rem 2.2rem; background: var(--tt-accent) !important; color: var(--tt-bg) !important; border: 0 !important; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; } /* Buybox v4: breiter als der Inhalt, Tabelle randlos, mehr Luft unten */ .buybox .alert-content { padding: 3rem 3.2rem 3.6rem !important; } .buybox table.pricetable { margin-left: -3.2rem; margin-right: -3.2rem; width: calc(100% + 6.4rem); max-width: none; } .buybox table.pricetable tbody, .buybox table.pricetable tr { width: 100%; box-sizing: border-box; } .buybox table.pricetable + p, .buybox .alert-content > p:last-child { margin-top: 2.4rem; margin-bottom: 0; } @media (min-width: 1000px) { .entry-content .wpcmsdev-alert.buybox, .entry-content .wpcmsdev-alert.buybox:has(table.pricetable tr + tr) { width: min(94vw, 92rem) !important; max-width: 92rem !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%); } } /* E-Mail-Lead-Box (.wpcmsdev-alert.color-white) */ .entry-content .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) { float: none !important; width: min(100%, 66rem) !important; max-width: 66rem !important; margin: 3.2rem auto !important; padding: 3.2rem !important; box-sizing: border-box; background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border) !important; border-radius: calc(var(--tt-radius) + 4px) !important; box-shadow: inset 0 .4rem 0 var(--tt-lime); } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content { padding: 0; color: var(--tt-fg); } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content > br, .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) + br { display: none; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content p { margin: 0 0 1.4rem; font-size: 1.7rem; line-height: 1.5; color: var(--tt-fg); } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content > p:first-child { font-size: 2.4rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content > p:nth-of-type(2) { margin-bottom: .8rem; color: var(--tt-muted); font-weight: 600; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content ul { list-style: none; margin: 0 0 2.4rem; padding: 0; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content li { position: relative; margin: 0; padding: .7rem 0 .7rem 3rem; font-size: 1.7rem; border-bottom: 1px solid var(--tt-border); } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content li:last-child { border-bottom: 0; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content li::before { content: "✓"; position: absolute; left: 0; top: .7rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--tt-lime); color: #06201b; font-size: 1.2rem; font-weight: 900; line-height: 1; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 0; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) form > div:first-child { display: contents; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) form br { display: none; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) form > button { grid-column: 1 / -1; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) input[type="text"], .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) input[type="email"] { width: 100%; box-sizing: border-box; padding: 1.4rem 1.6rem; background: var(--tt-bg); color: var(--tt-fg); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font: inherit; font-size: 1.6rem; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) input::placeholder { color: var(--tt-muted); opacity: 1; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) input:focus { outline: 3px solid var(--tt-accent); outline-offset: 1px; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) button[type="submit"] { padding: 1.5rem 2.4rem; background: var(--tt-lime) !important; color: #06201b !important; border: 0 !important; border-radius: 999px; font: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) button[type="submit"]:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) > p:last-child, .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content ~ p { margin: 2rem 0 0; font-size: 1.4rem; color: var(--tt-muted); text-align: center; } @media (max-width: 600px) { .entry-content .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) { padding: 2.2rem !important; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) form { grid-template-columns: 1fr; } .wpcmsdev-alert.color-white:not(.buybox,.crossbox,.wideTable,.has-icon) .alert-content > p:first-child { font-size: 2rem; } } /* Tabellen (TablePress, Vergleichstabellen) */ .entry-content .wpcmsdev-alert.color-white.wideTable { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; } .wideTable .alert-content { overflow-x: auto; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); background: var(--tt-surface); } @media (min-width: 1000px) { .entry-content .wpcmsdev-alert.color-white.wideTable { width: min(94vw, 96rem) !important; max-width: 96rem !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%); } } .entry-content table.tablepress, .entry-content .wp-block-table table, .entry-content > table:not(.pricetable):not(.heartbeat) { display: table; width: 100%; margin: 2.4rem auto; border-collapse: separate; border-spacing: 0; background: transparent; border: 0; color: var(--tt-fg); font-size: 1.6rem; line-height: 1.45; font-variant-numeric: tabular-nums; } .entry-content .wp-block-table, .entry-content figure.wp-block-table { overflow-x: auto; margin: 2.4rem 0; } .entry-content .tablepress th, .entry-content .tablepress td, .entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 1.2rem 1.6rem; border: 0 !important; border-bottom: 1px solid var(--tt-border) !important; background: transparent !important; color: var(--tt-fg) !important; text-align: left; vertical-align: top; } .entry-content .tablepress thead th, .entry-content .wp-block-table thead th, .entry-content .tablepress tfoot th { background: var(--tt-accent-soft) !important; color: var(--tt-fg) !important; font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; border-bottom: 2px solid var(--tt-accent) !important; vertical-align: bottom; } .entry-content .tablepress tbody tr:nth-child(even) td, .entry-content .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tt-fg) 4%, transparent) !important; } .entry-content .tablepress tbody tr:hover td { background: var(--tt-accent-soft) !important; } .entry-content .tablepress tbody tr:last-child td { border-bottom: 0 !important; } .entry-content .tablepress td.column-1, .entry-content .tablepress th.column-1 { font-weight: 700; position: sticky; left: 0; } .entry-content .tablepress td.column-1 { background: var(--tt-surface) !important; } .entry-content .tablepress a { font-weight: 600; } .entry-content .tablepress-edit-link, .entry-content a.tablepress-edit-link { display: block; padding: .8rem 1.6rem; font-size: 1.2rem; color: var(--tt-muted); } @media (max-width: 700px) { .entry-content .tablepress th, .entry-content .tablepress td { padding: 1rem 1.2rem; font-size: 1.4rem; } } /* Buybox v5: einheitlich für alle Buy-/Crossboxen, weiß auch im Dark Mode, Tabelle randlos */ .entry-content .wpcmsdev-alert.buybox, .entry-content .wpcmsdev-alert.crossbox { --tt-fg: #0f172a; --tt-muted: #475569; --tt-surface: #fff; --tt-border: #e2e8f0; --tt-accent-soft: #eef6fa; float: none !important; box-sizing: border-box; width: min(100%, 74rem) !important; max-width: 74rem !important; margin: 3rem auto !important; padding: 0 !important; background: #fff !important; color: #0f172a !important; border: 1px solid var(--tt-border) !important; box-shadow: 0 .8rem 3rem rgba(0, 0, 0, .18); overflow: hidden; } .entry-content .wpcmsdev-alert.buybox:has(table.pricetable tr + tr) { width: min(100%, 86rem) !important; max-width: 86rem !important; } @media (min-width: 1000px) { .entry-content .wpcmsdev-alert.buybox, .entry-content .wpcmsdev-alert.crossbox, .entry-content .wpcmsdev-alert.buybox:has(table.pricetable tr + tr) { width: min(94vw, 92rem) !important; max-width: 92rem !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%); } } .buybox .alert-content, .crossbox .alert-content { padding: 0 0 3.6rem !important; background: transparent; color: #0f172a; text-align: center; } .buybox .alert-content > p, .crossbox .alert-content > p { padding-left: 3.2rem; padding-right: 3.2rem; color: #0f172a; } .buybox .alert-content > p:first-child, .crossbox .alert-content > p:first-child { padding-top: 3rem; } .buybox .alert-content p a:not(.wpcmsdev-button), .crossbox .alert-content p a:not(.wpcmsdev-button) { color: #087faf; } .buybox table.pricetable { display: block; width: 100% !important; max-width: none !important; margin: 2.4rem 0 0 !important; background: transparent; } .buybox table.pricetable tbody { display: block; width: 100%; } .buybox table.pricetable tr { width: 100%; box-sizing: border-box; padding: 2rem 3.2rem; background: #eef6fa; border-top: 1px solid #e2e8f0; } .buybox table.pricetable td { color: #0f172a; } .buybox table.pricetable tr:has(td:nth-child(2) a:not(.affiliate-link)) { background: #f2fbd0; } .buybox table.pricetable td:nth-child(2) a:not(.affiliate-link) { color: #1a2e05 !important; } .entry-content .buybox a.wpcmsdev-button, .entry-content .crossbox a.wpcmsdev-button { color: #06201b !important; } .entry-content .buybox a.wpcmsdev-button:hover, .entry-content .crossbox a.wpcmsdev-button:hover { background: #0f172a !important; color: #fff !important; } .buybox .shopimage { border: 1px solid #e2e8f0; } /* Info-Box mit Icon */ .entry-content .wpcmsdev-alert.has-icon { position: relative; float: none !important; width: min(100%, 66rem) !important; max-width: 66rem !important; margin: 3rem auto !important; padding: 2.4rem 2.8rem 2.4rem 8rem !important; box-sizing: border-box; background: var(--tt-surface) !important; border: 1px solid var(--tt-border) !important; border-radius: calc(var(--tt-radius) + 4px) !important; box-shadow: inset .5rem 0 0 var(--tt-lime); } .has-icon > i { position: absolute !important; left: 2.4rem; top: 2.4rem; width: 3.8rem; height: 3.8rem; display: grid !important; place-items: center; margin: 0 !important; border-radius: 50%; background: var(--tt-accent-soft); color: var(--tt-accent) !important; font-size: 2.2rem !important; line-height: 1; } .has-icon .alert-content { padding: 0 !important; color: var(--tt-fg); } .has-icon .alert-content p { margin: 0; font-size: 1.7rem; font-weight: 400; line-height: 1.6; color: var(--tt-fg); } .has-icon .alert-content p + p { margin-top: 1.2rem; } @media (max-width: 560px) { .entry-content .wpcmsdev-alert.has-icon { padding: 2rem 2rem 2rem 6.6rem !important; } .has-icon > i { left: 1.6rem; top: 2rem; } } /* Button-Hover (Dark Mode), FAQ-Akkordeon, breite Newsletter-Box */ :root:root .entry-content a.wpcmsdev-button:hover { background: var(--tt-fg) !important; color: var(--tt-bg) !important; -webkit-text-fill-color: var(--tt-bg); } :root:root .entry-content .buybox a.wpcmsdev-button:hover, :root:root .entry-content .crossbox a.wpcmsdev-button:hover { background: #0f172a !important; color: #fff !important; -webkit-text-fill-color: #fff; } .wp-faq-schema-items h3.gr-faq-q + .faq-item { display: none !important; } .wp-faq-schema-items h3.gr-faq-q + .faq-item.open { display: block !important; } .wp-faq-schema-items h3.gr-faq-q[aria-expanded="true"] { border-radius: var(--tt-radius) var(--tt-radius) 0 0; } .wp-faq-schema-items h3.gr-faq-q:focus-visible { outline: 3px solid var(--tt-accent); outline-offset: 2px; } .wp-faq-schema-items h3.gr-faq-q[aria-expanded="false"] { margin-bottom: 1.2rem !important; } @media (min-width: 1000px) { .entry-content .newsletterBox { width: min(94vw, 92rem) !important; max-width: 92rem !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%); } } /* Strava-Embeds: nie breiter als die Textspalte (58rem). Ein nacktes 100% mit !important überstimmt die Spaltenbreite von .entry-content > *, wenn das Embed direkt im Inhalt steht (z. B. Leseliste). */ .strava-embed-placeholder, .entry-content iframe[src*="strava-embeds.com"], .entry-content iframe[src*="strava.com"] { max-width: min(100%, 58rem) !important; box-sizing: border-box; } .entry-content iframe[src*="strava-embeds.com"], .entry-content iframe[src*="strava.com"] { display: block; margin: 2rem auto; border-radius: var(--tt-radius); } /* Einfache Inhaltstabellen (ohne Klasse): mittig, gleiche Optik wie TablePress */ .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) { display: table !important; width: 100% !important; max-width: 58rem !important; margin: 2.8rem auto !important; border-collapse: separate; border-spacing: 0; background: var(--tt-surface); border: 1px solid var(--tt-border) !important; border-radius: var(--tt-radius); overflow: hidden; color: var(--tt-fg); font-size: 1.6rem; line-height: 1.45; font-variant-numeric: tabular-nums; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress):has(th:nth-child(3)) { max-width: 86rem !important; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) th, .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) td { padding: 1.2rem 1.6rem; border: 0 !important; border-bottom: 1px solid var(--tt-border) !important; background: transparent !important; color: var(--tt-fg) !important; text-align: left; vertical-align: top; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) thead th { background: var(--tt-accent-soft) !important; font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; border-bottom: 2px solid var(--tt-accent) !important; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tt-fg) 4%, transparent) !important; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) tbody tr:hover td { background: var(--tt-accent-soft) !important; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) tr:last-child td { border-bottom: 0 !important; } .entry-content > table:not(.pricetable):not(.heartbeat):not(.tablepress) td:last-child:not(:first-child) { white-space: nowrap; } /* Buybox mit Umschalter (Eichenholz/Nussholz) */ .entry-content .toggleBar { display: flex !important; width: fit-content; max-width: 100%; margin: 3rem auto 1.4rem !important; padding: .4rem; gap: .4rem; background: var(--tt-surface) !important; border: 1px solid var(--tt-border); border-radius: 999px; } .toggleBar .pill, .entry-content .toggleBar span { display: inline-block; padding: .9rem 2.2rem !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--tt-muted) !important; font-size: 1.6rem; font-weight: 700; line-height: 1.2; cursor: pointer; user-select: none; transition: background .15s, color .15s; } .toggleBar .pill:hover { color: var(--tt-fg) !important; } .toggleBar .pill.active { background: var(--tt-accent) !important; color: #06201b !important; box-shadow: none !important; } .buybox .alert-content > .container { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; width: 100% !important; } .buybox .alert-content > .container > p, .crossbox .alert-content > .container > p { padding-left: 3.2rem; padding-right: 3.2rem; color: #0f172a; } .buybox .alert-content > .container > p:first-child { padding-top: 3rem; } .buybox .alert-content > .container > p a:not(.wpcmsdev-button) { color: #087faf; } /* Quellen: Plugin getrowing-eeat (.gr-sources) und bestehende Modern Footnotes (.modern-footnotes-list) einheitlich */ .entry-content .gr-sources, .entry-content ul.modern-footnotes-list { width: min(100%, 58rem); max-width: 58rem; margin: 4rem auto 2rem; padding: 2.4rem 2.8rem; box-sizing: border-box; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font-size: 1.5rem; line-height: 1.5; } .entry-content .gr-sources > h2, .entry-content ul.modern-footnotes-list::before { display: block; margin: 0 0 1.4rem; padding: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); } .entry-content ul.modern-footnotes-list::before { content: "Quellen"; } .entry-content ul.modern-footnotes-list:lang(en)::before, :lang(en) .entry-content ul.modern-footnotes-list::before { content: "References"; } .entry-content .gr-sources ol, .entry-content ul.modern-footnotes-list { list-style: none; margin-left: auto; margin-right: auto; } .entry-content .gr-sources ol { margin: 0; padding: 0; counter-reset: gr-src; font-size: inherit; } .entry-content .gr-sources li, .entry-content ul.modern-footnotes-list li { display: flex; gap: 1.2rem; align-items: baseline; margin: 0; padding: .9rem 0; border-top: 1px solid var(--tt-border); overflow-wrap: anywhere; color: var(--tt-fg); } .entry-content .gr-sources li:first-child, .entry-content ul.modern-footnotes-list li:first-child { border-top: 0; } .entry-content .gr-sources li { counter-increment: gr-src; display: block; position: relative; padding-left: 3.6rem; } .entry-content .gr-sources li::before, .entry-content ul.modern-footnotes-list li > span:first-child { flex: 0 0 2.4rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tt-accent-soft); color: var(--tt-accent); font-size: 1.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .entry-content .gr-sources li::before { content: counter(gr-src); position: absolute; left: 0; top: 1.05rem; } .entry-content ul.modern-footnotes-list li > div { flex: 1 1 auto; min-width: 0; } .entry-content .gr-sources a, .entry-content ul.modern-footnotes-list a { font-weight: 600; } .gr-source-host { color: var(--tt-muted); font-size: .9em; white-space: nowrap; } .entry-content .gr-sources-meta { margin: 1.2rem 0 0; color: var(--tt-muted); font-size: 1.3rem; } /* Inline-Marker und Tooltip der Modern Footnotes */ .entry-content sup.modern-footnotes-footnote { margin-left: .15em; font-size: .7em; line-height: 0; } .entry-content sup.modern-footnotes-footnote a { display: inline-grid; place-items: center; min-width: 1.9em; padding: .2em .35em; border-radius: 999px; background: var(--tt-accent-soft); color: var(--tt-accent) !important; font-weight: 700; text-decoration: none !important; } .entry-content sup.modern-footnotes-footnote a:hover { background: var(--tt-accent); color: var(--tt-bg) !important; } .entry-content .modern-footnotes-footnote__note { padding: 1rem 1.4rem; background: var(--tt-surface) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .25); font-size: 1.4rem; line-height: 1.45; } @media (max-width: 560px) { .entry-content .gr-sources, .entry-content ul.modern-footnotes-list { padding: 2rem; } } /* Cover-Template: dunkler Verlauf statt hellem Akzent-Overlay, damit Titel und Meta lesbar sind */ .cover-color-overlay.cover-color-overlay::before { background: linear-gradient(180deg, rgba(8, 14, 18, .55) 0%, rgba(8, 14, 18, .72) 55%, rgba(8, 14, 18, .88) 100%) !important; opacity: 1 !important; } .cover-header .entry-title, .cover-header .entry-title a { color: #fff !important; text-shadow: 0 .2rem 2.4rem rgba(0, 0, 0, .35); } .cover-header .post-meta, .cover-header .post-meta li, .cover-header .post-meta a, .cover-header .post-meta .meta-text, .cover-header .post-meta time { color: rgba(255, 255, 255, .92) !important; } .cover-header .post-meta a:hover { color: var(--tt-lime) !important; } .cover-header .post-meta .meta-icon svg, .cover-header .post-meta .meta-icon svg path { fill: rgba(255, 255, 255, .92) !important; } .cover-header .post-meta .meta-icon svg[fill="none"] path { fill: rgba(255, 255, 255, .92) !important; } .cover-header .intro-text, .cover-header .entry-categories-inner { color: #fff; } /* Körperfettanteil-Rechner */ #fatCalculator #fatResult, #fatResult { margin: 2rem auto 0; padding: 2rem 2.4rem; max-width: 52rem; background: var(--tt-bg) !important; color: var(--tt-fg) !important; border: 1px solid var(--tt-border); border-left: 5px solid var(--tt-lime); border-radius: var(--tt-radius); font-size: 1.8rem; font-weight: 600; line-height: 1.7; text-align: center; font-variant-numeric: tabular-nums; } #fatResult:empty { display: none; } #fatResult * { color: inherit !important; background: transparent !important; } #fatCalculator .genderDiv { display: flex; justify-content: center; gap: 1.6rem; margin-bottom: 1.6rem; } #fatCalculator .genderDiv label { cursor: pointer; line-height: 0; } #fatCalculator .genderIcon { box-sizing: border-box; width: 7.2rem; height: 7.2rem; padding: 1.4rem; border-radius: 50%; background: var(--tt-bg) !important; border: 2px solid var(--tt-border); fill: var(--tt-muted) !important; transition: background .15s, border-color .15s, fill .15s, transform .15s; } #fatCalculator label:hover .genderIcon { border-color: var(--tt-accent); } #fatCalculator input:checked + .genderIcon, #fatCalculator input:checked ~ .genderIcon { background: var(--tt-accent) !important; border-color: var(--tt-accent); fill: #06201b !important; transform: scale(1.05); } #fatCalculator .genderIcon circle, #fatCalculator .genderIcon path { fill: inherit !important; } #fatCalculator #viewHeight, #fatCalculator #viewNeck, #fatCalculator #viewBelly, #fatCalculator #viewHip, #fatCalculator #viewWeight { margin-top: 1.4rem; font-size: 1.7rem; font-weight: 600; color: var(--tt-fg); } #fatCalculator input[type=range] { width: min(100%, 44rem); } /* Kommentare: Avatar und Name stecken bei angemeldeten Autoren in einem Link (a.url) */ .comment-meta .comment-author a.url { display: contents; text-decoration: none !important; box-shadow: none !important; border: 0 !important; } .comment-meta .comment-author a.url .fn { text-decoration: none; border-bottom: 0; box-shadow: none; color: var(--tt-fg); white-space: normal; } .comment-meta .comment-author a.url:hover .fn { color: var(--tt-accent); } .comment-meta .comment-author .says { display: none; } .comment-meta .comment-metadata { white-space: normal; } /* Navigation: Menü-Overlay */ .menu-modal, .menu-modal-inner { background: color-mix(in srgb, var(--tt-bg) 96%, transparent) !important; backdrop-filter: blur(14px); } .menu-modal .menu-wrapper { max-width: 120rem; width: 100%; margin: 0 auto; padding-left: 2.4rem; padding-right: 2.4rem; box-sizing: border-box; } button.close-nav-toggle { justify-content: flex-end; padding: 2.4rem 0 1.6rem; } button.close-nav-toggle .toggle-text { padding: .7rem 1.6rem; border: 1px solid var(--tt-border); border-radius: 999px; margin-right: 1rem; font-size: 1.4rem; font-weight: 600; transition: border-color .15s, color .15s; } button.close-nav-toggle:hover .toggle-text { border-color: var(--tt-accent); color: var(--tt-accent); } .menu-modal .modal-menu li { border-color: var(--tt-border) !important; } .menu-modal .modal-menu a:hover, .menu-modal .modal-menu a:focus-visible { color: var(--tt-accent) !important; text-decoration: none; } .menu-modal .modal-menu li.current-menu-item > .ancestor-wrapper > a, .menu-modal .modal-menu li.current-menu-ancestor > .ancestor-wrapper > a { color: var(--tt-accent) !important; } .menu-modal .modal-menu > li > .ancestor-wrapper > a { font-size: 2.2rem; font-weight: 800; letter-spacing: -.01em; } .menu-modal .modal-menu ul li a { font-size: 1.7rem; line-height: 1.35; padding: 1.1rem 0; font-weight: 500; color: var(--tt-fg) !important; } .menu-modal .modal-menu ul li { border-left-width: 0 !important; } @media (min-width: 1000px) { /* Mega-Menü: Hauptpunkte als Spalten, Unterpunkte immer sichtbar (kein Akkordeon) */ .menu-modal .modal-menu { position: static; left: auto; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 3.2rem 4rem; align-items: start; padding: 2rem 0 6rem; } .menu-modal .modal-menu > li { display: block; border: 0 !important; line-height: 1.3; } .menu-modal .modal-menu > li > .ancestor-wrapper { display: block; padding-bottom: 1.2rem; margin-bottom: .8rem; border-bottom: 2px solid var(--tt-accent); } .menu-modal .modal-menu > li > .ancestor-wrapper > a { display: block; padding: 0; } .menu-modal .modal-menu .sub-menu-toggle { display: none !important; } .menu-modal .modal-menu ul.sub-menu { display: block !important; height: auto !important; overflow: visible !important; } .menu-modal .modal-menu ul.sub-menu li { display: block; border-top: 0 !important; } .menu-modal .modal-menu ul.sub-menu li a { display: block; padding: .7rem 0; font-size: 1.6rem; color: var(--tt-muted) !important; } .menu-modal .modal-menu ul.sub-menu li a:hover { color: var(--tt-fg) !important; } } @media (max-width: 999px) { .menu-modal .modal-menu { left: 0; width: 100%; } .menu-modal .modal-menu > li > .ancestor-wrapper > a { padding: 1.8rem 0; font-size: 2rem; } .menu-modal .modal-menu .sub-menu-toggle { color: var(--tt-fg); } } /* Navigation Desktop: Overlay über die volle Seitenbreite */ @media (min-width: 1000px) { .menu-modal.cover-modal { background: rgba(0, 0, 0, 0); } .menu-modal.active { background: rgba(0, 0, 0, .35); } .menu-modal .menu-modal-inner { width: 100% !important; max-height: 100vh; transform: translateY(-1.6rem) !important; box-shadow: 0 2rem 6rem rgba(0, 0, 0, .35); border-bottom: 1px solid var(--tt-border); } .menu-modal.active .menu-modal-inner { transform: translateY(0) !important; } .menu-modal-inner { align-self: flex-start; } .menu-modal .menu-wrapper, .menu-modal .menu-wrapper.section-inner { width: 100% !important; max-width: 140rem; padding-left: 4rem; padding-right: 4rem; } .menu-modal .modal-menu { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2.4rem 3.6rem; padding: 1rem 0 4.4rem; } } /* Startseite: erster Beitrag als Bühne über die volle Breite */ @media (min-width: 1000px) { .blog #site-content > article.post:first-of-type { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; min-height: 60rem; border-radius: 0; border-left: 0; border-right: 0; grid-template-columns: minmax(0, 62%) minmax(0, 1fr); } .blog article.post:first-of-type .featured-media { min-height: 60rem; } .blog article.post:first-of-type .featured-media img { border-radius: 0; } .blog article.post:first-of-type > .entry-header { padding: 4.8rem max(4rem, calc((100vw - 124rem) / 2 + 2rem)) 4.8rem 4.8rem; } .blog article.post:first-of-type .entry-title { font-size: clamp(4rem, 4.6vw, 7rem); line-height: 1.02; } .blog article.post:first-of-type .entry-content { max-height: 15rem; font-size: 1.8rem; } .blog #site-content { padding-top: 0; row-gap: 2.4rem; } .blog #site-content > article.post:first-of-type { margin-bottom: 2.4rem; } } /* Rudergerät-Berater (Startseite) */ .gr-advisor { grid-column: 1 / -1; width: min(100%, 78rem); margin: 4rem auto 2rem; padding: 3.6rem; box-sizing: border-box; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: calc(var(--tt-radius) + 4px); box-shadow: inset 0 .4rem 0 var(--tt-lime); color: var(--tt-fg); } .gr-advisor__eyebrow { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-muted); } .gr-advisor h2 { margin: 0 0 .8rem; font-size: clamp(2.6rem, 3vw, 3.6rem); letter-spacing: -.02em; } .gr-advisor__lead { margin: 0 0 2.4rem; font-size: 1.7rem; color: var(--tt-muted); } .gr-advisor__q, .gr-advisor__result { display: none; } .gr-advisor__q.is-active, .gr-advisor__result.is-active { display: block; } .gr-advisor__progress { margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 700; color: var(--tt-accent); font-variant-numeric: tabular-nums; } .gr-advisor__question { margin: 0 0 1.6rem; font-size: 2.2rem; line-height: 1.25; } .gr-advisor__options { display: grid; gap: 1rem; } .gr-advisor__opt { display: block; width: 100%; padding: 1.4rem 1.8rem; text-align: left; background: var(--tt-bg); color: var(--tt-fg); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font: inherit; font-size: 1.7rem; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; } .gr-advisor__opt:hover, .gr-advisor__opt:focus-visible { background: var(--tt-accent-soft); border-color: var(--tt-accent); transform: translateX(.4rem); outline: none; } .gr-advisor__result h3 { margin: 0 0 1rem; font-size: 2.4rem; } .gr-advisor__rec { margin: 0 0 2rem; font-size: 1.7rem; line-height: 1.6; } .gr-advisor__rec a { color: var(--tt-accent); font-weight: 600; } .gr-advisor__restart { padding: 1.1rem 2.4rem; background: var(--tt-accent); color: #06201b; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; } .gr-advisor__restart:hover { background: var(--tt-fg); color: var(--tt-bg); } @media (max-width: 600px) { .gr-advisor { padding: 2.2rem; } .gr-advisor__question { font-size: 2rem; } } /* Bühne v2: Rand-zu-Rand über Gutter-Variable statt 100vw/Prozent-Margins */ @media (min-width: 1000px) { .blog #site-content { --gr-gutter: max(2rem, calc((100vw - 124rem) / 2)); max-width: none; padding-left: var(--gr-gutter); padding-right: var(--gr-gutter); } .blog #site-content > article.post:first-of-type { width: auto; max-width: none; margin-left: calc(-1 * var(--gr-gutter)); margin-right: calc(-1 * var(--gr-gutter)); grid-template-columns: minmax(0, 60%) minmax(0, 1fr); grid-template-rows: auto 1fr; } .blog article.post:first-of-type .featured-media { grid-row: 1 / span 2; } .blog article.post:first-of-type > .entry-header { grid-row: 1; padding: 4.8rem max(3.2rem, var(--gr-gutter)) 1.6rem 4.8rem; align-self: end; } .blog article.post:first-of-type .post-inner { grid-row: 2; padding: 0 max(3.2rem, var(--gr-gutter)) 4.8rem 4.8rem !important; min-width: 0; } .blog article.post:first-of-type .entry-title { font-size: clamp(3.4rem, 3.6vw, 5.6rem); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .blog article.post:first-of-type .entry-content { max-width: 60rem; } } /* Berater v2: unter der Pagination, Rand-zu-Rand, Bild + Modul */ .blog .gr-advisor { grid-column: 1 / -1; width: auto; max-width: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: calc(var(--tt-radius) + 4px); box-shadow: none; } .gr-advisor__media { margin: 0; min-height: 22rem; position: relative; } .gr-advisor__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gr-advisor__body { padding: 3.2rem; min-width: 0; align-self: center; } @media (min-width: 1000px) { .blog .gr-advisor { margin-left: calc(-1 * var(--gr-gutter, 2rem)); margin-right: calc(-1 * var(--gr-gutter, 2rem)); margin-bottom: -5rem; border-radius: 0; border-left: 0; border-right: 0; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); min-height: 52rem; box-shadow: inset 0 .4rem 0 var(--tt-lime); } .gr-advisor__media { min-height: 0; } .gr-advisor__body { padding: 5.6rem max(4rem, var(--gr-gutter, 2rem)) 5.6rem 5.6rem; max-width: 80rem; } } /* Tools (Rechner) aus dem Theme */ .gr-tool { margin: 2.4rem auto; width: 100%; max-width: 66rem; } .entry-content > .gr-tool { margin-left: auto !important; margin-right: auto !important; } .gr-tool-note { max-width: 56rem; margin: 1.2rem auto 2.4rem; font-size: 1.4rem; line-height: 1.5; color: var(--tt-muted); text-align: center; } /* Listen v2: volle Breite, 5,6rem Außenrand und Abstand zwischen den Karten */ @media (min-width: 900px) { .blog #site-content, .archive #site-content, .search #site-content { --gr-gutter: 5.6rem; max-width: none; padding-left: 5.6rem; padding-right: 5.6rem; gap: 5.6rem; } } /* Vorteile / Nachteile (wpcmsdev-alert color-green / color-red in zwei Spalten) */ .entry-content .wpcmsdev-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; width: min(100%, 86rem); max-width: 86rem; margin: 2.8rem auto; } .entry-content .wpcmsdev-columns > .column { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; min-width: 0; display: flex; } .entry-content .wpcmsdev-columns > .column > .wpcmsdev-alert { flex: 1; } .entry-content .wpcmsdev-alert.color-green, .entry-content .wpcmsdev-alert.color-red { --gr-tone: #22c55e; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; overflow: visible; background: color-mix(in srgb, var(--gr-tone) 9%, var(--tt-surface)) !important; color: var(--tt-fg) !important; border: 1px solid color-mix(in srgb, var(--gr-tone) 35%, var(--tt-border)) !important; border-top: 4px solid var(--gr-tone) !important; border-radius: calc(var(--tt-radius) + 4px) !important; box-shadow: none; } .entry-content .wpcmsdev-alert.color-red { --gr-tone: #ef4444; } /* Einzelne Box (nicht in Spalten): Lesebreite und Abstand nach oben/unten */ .entry-content > .wpcmsdev-alert.color-green, .entry-content > .wpcmsdev-alert.color-red { width: min(100%, 66rem) !important; max-width: 66rem !important; margin: 3rem auto !important; } :root[data-theme="light"] .entry-content .wpcmsdev-alert.color-green { --gr-tone: #16a34a; } :root[data-theme="light"] .entry-content .wpcmsdev-alert.color-red { --gr-tone: #dc2626; } .color-green .alert-content, .color-red .alert-content { padding: 2.2rem 2.4rem 2.4rem !important; color: var(--tt-fg); } .color-green .alert-content p:first-child, .color-red .alert-content p:first-child { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; font-size: 1.9rem; line-height: 1.2; } .color-green .alert-content p:first-child::before, .color-red .alert-content p:first-child::before { flex: 0 0 3rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gr-tone); color: #fff; font-size: 1.7rem; font-weight: 900; line-height: 1; } .color-green .alert-content p:first-child::before { content: "✓"; } .color-red .alert-content p:first-child::before { content: "✕"; } .color-green .alert-content ul, .color-red .alert-content ul { list-style: none; margin: 0; padding: 0; } .color-green .alert-content li, .color-red .alert-content li { position: relative; margin: 0; padding: .9rem 0 .9rem 2.8rem; border-top: 1px solid color-mix(in srgb, var(--gr-tone) 22%, transparent); font-size: 1.6rem; line-height: 1.45; } .color-green .alert-content li::before, .color-red .alert-content li::before { content: ""; position: absolute; left: .4rem; top: 1.55rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--gr-tone); } @media (max-width: 700px) { .entry-content .wpcmsdev-columns { grid-template-columns: 1fr; } } /* Footer v2: Spalten nebeneinander (Desktop) */ @media (min-width: 1000px) { .footer-nav-widgets-wrapper .footer-inner { display: flex; flex-direction: column; width: 100%; margin: 0 auto; max-width: 150rem; padding: 6rem 5.6rem 3.2rem; box-sizing: border-box; } .footer-widgets-outer-wrapper { order: 1; margin: 0; padding: 0; border: 0 !important; } .footer-top { order: 2; margin: 4.8rem 0 0; padding: 2.4rem 0 0; border-top: 1px solid var(--tt-border) !important; border-bottom: 0 !important; } .footer-top .footer-menu { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .8rem 2.8rem; margin: 0; } .footer-top .footer-menu li { border: 0 !important; margin: 0; } .footer-top .footer-menu a { font-size: 1.4rem; color: var(--tt-muted) !important; } .footer-widgets-wrapper { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 0 5.6rem; align-items: start; } .footer-widgets-wrapper > .footer-widgets { display: contents; } .footer-widgets .widget { margin: 0 0 3.2rem; min-width: 0; } .footer-widgets-wrapper .widget_xyz_insert_html_widget:first-child { grid-column: 1; grid-row: 1; } .footer-widgets-wrapper .widget_custom_html { grid-column: 1; grid-row: 2; } .footer-widgets-wrapper .widget_recent_comments { grid-column: 4; grid-row: 1 / span 2; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; } .footer-widgets-wrapper .widget_xyz_insert_html_widget:not(:first-child) { display: none; } .footer-widgets .widget-title { margin: 0 0 1.6rem; font-size: 1.3rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted) !important; } .footer-widgets .menu li, .footer-widgets #recentcomments li { margin: 0; padding: .55rem 0; } .footer-widgets .socialIcons { display: flex; gap: 1.2rem; } .footer-widgets .socialIcons p { margin: 0; } .footer-widgets .socialIcons img { width: 4.4rem; height: 4.4rem; border-radius: 10px; } } @media (min-width: 1000px) and (max-width: 1299px) { .footer-widgets-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; grid-template-rows: none; } .footer-widgets-wrapper .widget_xyz_insert_html_widget:first-child, .footer-widgets-wrapper .widget_custom_html, .footer-widgets-wrapper .widget_recent_comments, .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(1), .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(2) { grid-column: auto; grid-row: auto; } } /* Footer v3: fünf Spalten (Marke, Ratgeber, Training, Tools, Über) */ @media (min-width: 1300px) { .footer-widgets-wrapper { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 0 4.4rem; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(3) { grid-column: 4; grid-row: 1 / span 2; } .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(4) { grid-column: 5; grid-row: 1 / span 2; } } @media (min-width: 1000px) and (max-width: 1299px) { .footer-widgets-wrapper .column-two .widget_nav_menu:nth-of-type(n) { grid-column: auto; grid-row: auto; } } /* Chronologische Liste (Display Posts): Zeitleiste */ .entry-content h4.display-posts-date { position: sticky; top: 8.4rem; z-index: 2; display: inline-flex; align-items: center; gap: .8rem; margin: 4.4rem 0 1.4rem; padding: .6rem 1.4rem; background: var(--tt-accent-soft); color: var(--tt-fg); border: 1px solid var(--tt-border); border-radius: 999px; font-size: 1.4rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(10px); } .entry-content h4.display-posts-date::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--tt-lime); } .entry-content h4.display-posts-date:first-child { margin-top: 1rem; } .entry-content ul.display-posts-listing { list-style: none; margin: 0 0 0 .8rem; padding: 0 0 .6rem 2.8rem; border-left: 2px solid var(--tt-border); } .entry-content ul.display-posts-listing .listing-item { position: relative; margin: 0; padding: 0; } .entry-content ul.display-posts-listing .listing-item::before { content: ""; position: absolute; left: -3.45rem; top: 1.9rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--tt-border); transition: background .15s, transform .15s; } .entry-content ul.display-posts-listing .listing-item:hover::before { background: var(--tt-accent); transform: scale(1.4); } .entry-content ul.display-posts-listing a.title { display: block; padding: 1.1rem 1.4rem; margin: 0 0 .2rem -1.4rem; border-radius: var(--tt-radius); color: var(--tt-fg); font-size: 1.7rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .15s, color .15s, padding-left .15s; } .entry-content ul.display-posts-listing a.title:hover, .entry-content ul.display-posts-listing a.title:focus-visible { background: var(--tt-accent-soft); color: var(--tt-accent); padding-left: 2rem; } @media (max-width: 600px) { .entry-content ul.display-posts-listing { margin-left: .4rem; padding-left: 2rem; } .entry-content ul.display-posts-listing a.title { font-size: 1.6rem; } .entry-content ul.display-posts-listing .listing-item::before { left: -2.65rem; } } /* Zeitleiste v2: zentriert, Monat links, Beiträge rechts */ @media (min-width: 760px) { .entry-content:has(> .display-posts-listing) { display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: 4.8rem; align-items: start; width: min(100% - 4rem, 98rem) !important; max-width: 98rem !important; margin-left: auto !important; margin-right: auto !important; } .entry-content:has(> .display-posts-listing) > * { max-width: none !important; width: auto !important; } .entry-content:has(> .display-posts-listing) > :not(.display-posts-date):not(.display-posts-listing) { grid-column: 1 / -1; } .entry-content:has(> .display-posts-listing) > h4.display-posts-date { grid-column: 1; margin: 0 !important; padding: .8rem 1.6rem; align-self: start; justify-self: stretch; top: 10rem; } .entry-content:has(> .display-posts-listing) > ul.display-posts-listing { grid-column: 2; margin: 0 0 3.6rem .8rem !important; } } @media (max-width: 759px) { .entry-content:has(> .display-posts-listing) > h4.display-posts-date { margin-left: 0 !important; margin-right: auto !important; } .entry-content:has(> .display-posts-listing) > ul.display-posts-listing { margin-right: auto !important; } } /* Clearfix-Pseudoelemente des Spalten-Plugins würden im Raster eine Zelle belegen */ .entry-content .wpcmsdev-columns::before, .entry-content .wpcmsdev-columns::after { display: none !important; content: none !important; } /* Kategorie-Hubs, Breadcrumbs, Themen-Leiste */ .gr-breadcrumbs { margin: 0 0 1.6rem; font-size: 1.4rem; } .gr-breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .8rem; margin: 0; padding: 0; list-style: none; color: var(--tt-muted); } .gr-breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: .8rem; } .gr-breadcrumbs li + li::before { content: "›"; color: var(--tt-muted); } .gr-breadcrumbs a { color: var(--tt-muted) !important; text-decoration: none; } .gr-breadcrumbs a:hover { color: var(--tt-accent) !important; } .gr-breadcrumbs [aria-current], .gr-breadcrumbs li:last-child span { color: var(--tt-fg); max-width: 38rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive .gr-breadcrumbs, .category .gr-breadcrumbs { margin-top: 0; } .gr-hub { width: min(100% - 4rem, 124rem); margin: 0 auto; padding: 3.2rem 0 1rem; } .gr-hub__heading { margin: 4rem 0 1.6rem; font-size: 1.3rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); } .gr-hub__heading:first-of-type { margin-top: 1rem; } .gr-hub__heading--all { margin-top: 5.6rem; padding-top: 2.4rem; border-top: 1px solid var(--tt-border); } .gr-hub__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; } .gr-hub__item { margin: 0; } .gr-hub__item a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); text-decoration: none; color: var(--tt-fg) !important; transition: border-color .15s, transform .15s, box-shadow .15s; } .gr-hub__item a:hover, .gr-hub__item a:focus-visible { border-color: var(--tt-accent); transform: translateY(-.3rem); box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .18); } .gr-hub__thumb { display: block; aspect-ratio: 16 / 9; background: var(--tt-accent-soft); overflow: hidden; } .gr-hub__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--tt-ease, ease); } .gr-hub__item a:hover .gr-hub__thumb img { transform: scale(1.04); } .gr-hub__title { display: block; padding: 1.4rem 1.6rem 1.8rem; font-size: 1.7rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .gr-hub__chips { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; } .gr-hub__chips li { margin: 0; } .gr-hub__chips a { display: inline-flex; align-items: center; gap: .8rem; padding: .8rem 1.6rem; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: 999px; color: var(--tt-fg) !important; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; } .gr-hub__chips a:hover { border-color: var(--tt-accent); background: var(--tt-accent-soft); } .gr-hub__chips span { color: var(--tt-muted); font-size: 1.3rem; font-variant-numeric: tabular-nums; } .gr-topics { order: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem; margin: 4rem 0 0; padding: 2.4rem 0 4rem; border-top: 1px solid var(--tt-border); } .gr-topics__label { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); } .gr-topics ul { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 0; padding: 0; list-style: none; } .gr-topics li { margin: 0; } .gr-topics a { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.5rem; font-weight: 600; color: var(--tt-fg) !important; text-decoration: none; } .gr-topics a:hover { color: var(--tt-accent) !important; } @media (min-width: 1000px) { .footer-nav-widgets-wrapper .footer-inner .footer-top { order: 3; } .gr-hub { width: calc(100% - 11.2rem); } } /* Mobile header: toggles in the flex flow, centred with the (possibly wrapping) title; labels stay inside the header */ @media (max-width: 999px) { .header-inner { padding: 1rem 0; } .header-titles-wrapper { display: flex; align-items: center; justify-content: space-between; gap: .2rem; padding: 0 1rem; } .header-titles-wrapper .toggle { position: static; width: auto; height: auto; padding: .4rem .8rem; } .header-titles-wrapper .mobile-search-toggle { order: -1; } .header-titles-wrapper .theme-toggle { padding: .4rem .8rem; } .header-titles { flex: 1; min-width: 0; margin: 0; text-align: center; } .header-titles .site-title { margin: 0; font-size: clamp(1.8rem, 5.2vw, 2.4rem); line-height: 1.1; } .header-titles-wrapper .toggle-inner { height: auto; flex-direction: column; align-items: center; } .header-titles-wrapper .toggle-inner .toggle-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-toggle .toggle-inner { padding-top: 0; } } /* Unified icon set (Tabler Icons, MIT): 24px outline glyphs drawn with currentColor strokes, one size per context */ .svg-icon, #site-header .svg-icon, .post-meta .svg-icon { fill: none !important; stroke: currentColor; } .svg-icon *, #site-header .svg-icon *, .post-meta .svg-icon *, .header-inner .toggle .svg-icon path { fill: none !important; } .header-inner .toggle .toggle-icon, .header-inner .toggle .svg-icon, .search-toggle .toggle-icon, .search-toggle svg, .nav-toggle .toggle-icon, .nav-toggle svg { width: 2.4rem; height: 2.4rem; max-width: none; } .theme-toggle svg { width: 2.4rem; height: 2.4rem; } .post-meta .meta-icon svg, .post-meta .meta-icon .svg-icon { width: 1.8rem !important; height: 1.8rem !important; color: var(--tt-muted); } .post-meta .meta-icon { display: inline-flex; align-items: center; } button.close-nav-toggle svg, .search-untoggle svg { width: 2.2rem; height: 2.2rem; } button.sub-menu-toggle svg { width: 1.8rem; height: 1.8rem; } .to-the-content svg { width: 2.4rem; height: 2.4rem; } .cover-header .post-meta .meta-icon svg, .cover-header .post-meta .meta-icon svg path { fill: none !important; stroke: rgba(255, 255, 255, .92); } @media (max-width: 999px) { .nav-toggle .toggle-icon, .nav-toggle svg { height: 2.4rem; } } .gr-topics a .svg-icon { width: 2rem; height: 2rem; flex-shrink: 0; color: var(--tt-muted); transition: color .15s; } .gr-topics a:hover .svg-icon { color: var(--tt-accent); } /* Footer: credits row and affiliate note share the width and left edge of the footer columns */ @media (min-width: 1000px) { #site-footer .section-inner { width: 100%; max-width: 150rem; margin: 0 auto; padding: 0 5.6rem; box-sizing: border-box; } } .affiliate-note { width: 100%; max-width: 150rem; margin: 0 auto; padding: 2rem 2.4rem 3rem; text-align: left; box-sizing: border-box; } @media (min-width: 1000px) { .affiliate-note { padding-left: 5.6rem; padding-right: 5.6rem; } } /* Breadcrumb lives in the footer now: left-aligned first row */ .footer-inner .gr-breadcrumbs { order: 0; margin: 0 0 3.2rem; } .footer-inner .gr-breadcrumbs ol { justify-content: flex-start; } .footer-inner .gr-breadcrumbs li:last-child span { max-width: 60rem; } /* Startseite (front-page.php) */ .gr-front__hero, .gr-front__section { width: min(100% - 4rem, 124rem); margin: 0 auto; } .gr-front__hero { margin-top: 2.4rem; border-radius: var(--tt-radius); overflow: hidden; background-color: #0e1214; background-size: cover; background-position: center 60%; } .gr-front__hero { position: relative; } .gr-front__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 14, .86) 0%, rgba(8, 12, 14, .62) 55%, rgba(8, 12, 14, .15) 100%); } .gr-front__hero-inner { position: relative; padding: clamp(4rem, 10vw, 11rem) clamp(2.4rem, 5vw, 6rem); max-width: 84rem; } .gr-front__hero-inner, .gr-front__hero .gr-front__title { color: #fff; } .gr-front__hero .gr-front__lead { color: rgba(255, 255, 255, .86); } .gr-front__title { font-size: clamp(3.2rem, 6vw, 5.6rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 1.6rem; } .gr-front__lead { font-size: 2rem; color: var(--tt-muted); margin: 0 0 2.4rem; } .gr-front__cta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; } .gr-front__section { padding: 1.5rem 0 2rem; } .gr-btn { display: inline-block; padding: 1.1rem 2.2rem; border: 1px solid var(--tt-border); border-radius: 999px; background: var(--tt-surface); color: var(--tt-fg) !important; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; } .gr-btn:hover, .gr-btn:focus-visible { border-color: var(--tt-accent); background: var(--tt-accent-soft); } .gr-btn--primary { background: var(--tt-lime); border-color: var(--tt-lime); color: #14181c !important; } .gr-btn--primary:hover, .gr-btn--primary:focus-visible { background: var(--tt-lime); filter: brightness(.95); } .gr-front__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; } .gr-front__topics li { margin: 0; } .gr-front__topics a { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); color: var(--tt-fg) !important; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; } .gr-front__topics a:hover, .gr-front__topics a:focus-visible { border-color: var(--tt-accent); background: var(--tt-accent-soft); } .gr-front__about p { max-width: 72rem; } .gr-front__all { margin-top: 2.4rem; } .gr-front .gr-advisor { margin-top: 3rem; } @media (max-width: 999px) { #site-content.gr-front { padding-top: 0; padding-left: 0; padding-right: 0; } .gr-front__hero { width: 100%; margin-top: 0; border-radius: 0; } } @media (min-width: 1000px) { .gr-front__hero, .gr-front__section { width: calc(100% - 11.2rem); max-width: 124rem; } .gr-front__hero-inner { max-width: 72%; } } /* Footer: Linien nicht direkt an den Inhalten (unter 1000px; darüber gilt Footer v2) */ @media (max-width: 999px) { .footer-nav-widgets-wrapper .footer-inner, #site-footer .section-inner { width: 100%; max-width: none; margin: 0; padding-left: 2.4rem; padding-right: 2.4rem; box-sizing: border-box; } .footer-nav-widgets-wrapper .footer-inner { padding-top: 4.8rem; padding-bottom: 3.2rem; } .footer-top { margin-top: 3.2rem; padding-bottom: 2.4rem; } #site-footer { padding: 2.4rem 0; } } @media (min-width: 1000px) { .footer-nav-widgets-wrapper .footer-inner { padding-bottom: 4rem; } #site-footer { padding: 2.4rem 0; } } /* Startseite: Autor-Karte */ .gr-front__author { max-width: none; margin: 0; } .gr-front__author .author-name { margin-bottom: .4rem; } .gr-front__author .gr-front__tagline { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 600; color: var(--tt-accent); } .gr-front__author .author-description p { font-size: 1.8rem; } .gr-front__author-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin: 2rem 0 0; } .gr-front__author-links .author-more { margin-top: 0; } .author-bio .gr-front__author-links a.author-more, .author-bio .gr-front__author-links a.gr-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 4.6rem; min-height: 4.6rem; margin: 0; padding: 0 2.2rem; border: 1px solid transparent; border-radius: 999px; font-size: 1.5rem; font-weight: 700; line-height: 1; transform: none; } .author-bio .gr-front__author-links a.gr-btn { border-color: var(--tt-border); } .author-bio .gr-front__author-links a.author-more:hover { transform: none; } /* Suchergebnisse: kompakte Liste */ .search .archive-header { padding: 4rem 0 2rem; border-bottom: 0; } .search .archive-title { font-size: clamp(2.8rem, 5vw, 4.4rem); } .gr-results { width: min(100% - 4rem, 90rem); margin: 0 auto; padding: 0 0 4rem; } .gr-results .search-form { display: flex; gap: 1rem; margin: 0 0 3.2rem; } .gr-results .search-form label { flex: 1; margin: 0; } .gr-results .search-form .search-field { width: 100%; } .gr-results__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; } .gr-result { display: grid; grid-template-columns: 18rem 1fr; gap: 2rem; margin: 0; padding: 1.6rem; background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); transition: border-color .15s; } .gr-result:hover, .gr-result:focus-within { border-color: var(--tt-accent); } .gr-result__thumb { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--tt-radius) - 4px); background: var(--tt-accent-soft); overflow: hidden; } .gr-result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gr-result__body { min-width: 0; display: flex; flex-direction: column; gap: .6rem; } .gr-result__cat { font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-accent); } .gr-result__title { margin: 0; font-size: 2.2rem; line-height: 1.25; letter-spacing: -.02em; text-align: left; } .gr-result__title a { color: var(--tt-fg) !important; text-decoration: none; } .gr-result__title a:hover { color: var(--tt-accent) !important; } .gr-result__excerpt { margin: 0; font-size: 1.6rem; line-height: 1.55; color: var(--tt-muted); } .gr-result__meta { margin-top: auto; font-size: 1.3rem; color: var(--tt-muted); } @media (max-width: 600px) { .gr-result { grid-template-columns: 1fr; } .gr-result__thumb { aspect-ratio: 16 / 9; } } .search .archive-header-inner { width: min(100% - 4rem, 90rem); max-width: none; margin: 0 auto; padding: 0; text-align: left; } .search .archive-subtitle { width: 100%; max-width: none; margin: 0; padding: 0; } /* Vorteil/Nachteil-Boxen: Icon links, Text als normaler Fließtext (kein Flex auf dem Absatz) */ .color-green .alert-content p:first-child, .color-red .alert-content p:first-child { display: block; position: relative; margin: 0; padding-left: 4.6rem; min-height: 3.2rem; font-size: 1.7rem; line-height: 1.55; } .color-green .alert-content p:first-child::before, .color-red .alert-content p:first-child::before { position: absolute; left: 0; top: -.1rem; } .color-green .alert-content p:first-child strong, .color-red .alert-content p:first-child strong { display: block; margin-bottom: .2rem; font-size: 1.9rem; line-height: 1.3; } .color-green .alert-content p + p, .color-red .alert-content p + p { margin: 1.2rem 0 0; padding-left: 4.6rem; } /* Hinweisbox mit Icon in Grün/Rot (z. B. "Tipp: ..."): Layout von .has-icon, Farbe von color-green/-red */ .entry-content .wpcmsdev-alert.color-green.has-icon, .entry-content .wpcmsdev-alert.color-red.has-icon { width: min(100%, 66rem) !important; max-width: 66rem !important; margin: 3rem auto !important; padding: 2.2rem 2.8rem 2.2rem 8rem !important; background: color-mix(in srgb, var(--gr-tone) 9%, var(--tt-surface)) !important; border: 1px solid color-mix(in srgb, var(--gr-tone) 35%, var(--tt-border)) !important; box-shadow: inset .5rem 0 0 var(--gr-tone); } .color-green.has-icon > i, .color-red.has-icon > i { top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--gr-tone) 22%, transparent); color: var(--gr-tone) !important; } .color-green.has-icon .alert-content, .color-red.has-icon .alert-content { padding: 0 !important; } .color-green.has-icon .alert-content p:first-child, .color-red.has-icon .alert-content p:first-child { display: block; position: static; min-height: 0; padding-left: 0; margin: 0; font-size: 1.7rem; line-height: 1.6; } .color-green.has-icon .alert-content p:first-child::before, .color-red.has-icon .alert-content p:first-child::before { content: none; display: none; }