/* Theme Name: Twenty Twenty-Five Theme URI: https://wordpress.org/themes/twentytwentyfive/ Author: the WordPress team Author URI: https://wordpress.org Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide. Requires at least: 6.7 Tested up to: 7.1 Requires PHP: 7.2 Version: 1.5 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyfive Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news */ /* Imported */ /* ========================================================================== buchmacher-deutschland · «Flutlicht» Stadion am Abend: Petrol-Nachtblau für Hero, Tickerband und Footer, kühles Kreideweiß für Lesebereiche, Ultramarin als einziger Akzent. Rückennummern-Ziffern (Outline) für Ränge, Ampelfarben nur für die Trust-Ampel. Fonts: Bricolage Grotesque (Display, Zahlen, UI) + Source Serif 4 (Fließtext). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400&display=swap'); :root { --bg: #f2f4f5; /* Kreideweiß: Grundfläche */ --surface: #ffffff; /* Karten, Tabellen, Panels */ --tint: #e8edef; /* zweite Fläche, Bild-Platzhalter */ --grid: rgba(11, 52, 64, 0.07); /* Rasterlinien im Bild-Platzhalter */ --ink: #0f1e26; /* Schiefer: Haupttext */ --ink-2: #3c4b54; /* Fließtext in Karten */ --muted: #68767e; /* Labels, Untertitel */ --line: #dbe2e5; /* Haarlinien */ --petrol: #0b3440; /* Hero, Footer, Tabellenköpfe */ --petrol-deep: #072630; /* Tickerband */ --petrol-line: rgba(255, 255, 255, 0.14); --on-dark: #eef4f6; /* Text auf Petrol */ --on-dark-2: rgba(238, 244, 246, 0.72); --accent: #2c4bff; /* Ultramarin: Links, Ränge, Noten */ --accent-deep: #1a2fb8; /* Text auf Akzent-Tint */ --accent-soft: #e9ecff; /* Chips, Merksätze */ --accent-light: #b3c1ff; /* Akzent auf Petrol */ --coral: #ff6b4a; /* Zweitakzent: Markierungen, offene FAQ */ --coral-soft: #ffe7df; /* Vier Kategorie-Farben (nur die Kategorien der Startseite): Fläche / Schrift */ --h-fast: #e9ecff; --h-fast-ink: #1a2fb8; --h-live: #f5e7f7; --h-live-ink: #85328f; --h-horse: #ffecdf; --h-horse-ink: #a94e1b; --h-asian: #ddeff7; --h-asian-ink: #0f6a8a; --neutral: #e5eaee; --neutral-ink: #34505e; --good: #1f9d55; /* Ampel grün */ --warn: #e2a300; /* Ampel gelb */ --bad: #d6402b; /* Ampel rot */ --maxw: 74rem; --gut: clamp(1rem, 4vw, 2rem); --font-ui: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --font-text: 'Source Serif 4', Georgia, 'Times New Roman', serif; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --header-h: 4rem; } /* ---------- Basis ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; } h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin-top: 2em; } h3 { font-size: 1.25rem; } p { margin: 0 0 1.1em; text-wrap: pretty; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: 0.35rem; } li::marker { color: var(--accent); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--accent-deep); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; height: auto; } /* ---------- Bild-Platzhalter (Bilder kommen erst nach Generierung) ---------- */ :is(main, .content-main) img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background-color: var(--tint); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 18px 18px; border: 1px solid var(--line); color: var(--muted); font-family: var(--font-ui); font-size: 0.85rem; } figure { margin: 0; } figcaption { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; } .data-table td, .data-table th, .cat-score, .qt-score, .qt-stat b { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Header / Footer / Breadcrumbs / RG ------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); padding-block: 0.6rem; padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2)); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .site-name { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-ui); font-weight: 750; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .site-name:hover { color: var(--ink); } .site-logo { display: block; width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; border-radius: 8px; } .site-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; } .site-nav a { font-family: var(--font-ui); font-weight: 550; font-size: 0.95rem; color: var(--ink-2); text-decoration: none; padding: 0.4em 0.9em; border-radius: 999px; } .site-nav a:hover { background: var(--tint); color: var(--ink); } .site-nav a[aria-current="page"] { background: var(--ink); color: #fff; } .site-footer { margin-top: clamp(3.5rem, 7vw, 6rem); padding-block: 2.5rem; padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2)); background: var(--petrol); color: var(--on-dark-2); font-family: var(--font-ui); font-size: 0.92rem; } .site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .site-footer a { color: var(--on-dark); text-decoration: none; } .site-footer a:hover { color: var(--accent-light); text-decoration: underline; } .site-footer a[aria-current="page"] { color: var(--accent-light); } .site-footer p { margin: 0; } .breadcrumbs { font-family: var(--font-ui); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 0.9rem; } .breadcrumbs li { margin: 0; } .breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line); } .breadcrumbs > a { font-size: 0.9rem; } .breadcrumbs > a + a::before { content: "/"; margin: 0 0.5rem; color: var(--line); } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs [aria-current="page"] { color: var(--ink); } .rg-note { margin-top: 3rem; padding: 1.1rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--petrol); border-radius: var(--r-sm); font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); } .rg-note p { margin: 0; } .rg-note strong { color: var(--ink); } /* ---------- Seiten-Grundlayout: immer zentriert ------------------------ */ .page { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding: 0 15px; } .page--review, .page--tech { max-width: calc(48rem + 2 * var(--gut)); } .page--home { padding-top: 0; } /* ---------- Review-Bausteine ------------------------------------------- */ .page--review h1, .page--tech h1, .page--hub h1 { margin-top: 0.25rem; } .hero { margin: 0 0 2rem; } .hero img { margin-bottom: 0.5rem; } .verdict-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.75rem; margin: 0 0 2rem; } .verdict-box .score { font-family: var(--font-ui); font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; } .verdict-box .score span { font-size: 1.1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; } .best-for { display: inline-block; margin: 0.4rem 0 0.8rem; padding: 0.3em 0.85em; border-radius: 999px; background: var(--neutral); color: var(--neutral-ink); font-family: var(--font-ui); font-weight: 600; font-size: 0.84rem; line-height: 1.35; } table.quick-facts { width: 100%; border-collapse: collapse; margin-top: 1rem; font-family: var(--font-ui); font-size: 0.95rem; } .quick-facts th, .quick-facts td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; } .quick-facts th { color: var(--muted); font-weight: 500; width: 40%; } .quick-facts tr:last-child th, .quick-facts tr:last-child td { border-bottom: 0; } .toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem 1.5rem; margin: 0 0 2rem; font-family: var(--font-ui); } .toc ol { margin: 0; padding-left: 1.3rem; } .toc li { margin-bottom: 0.3rem; } .toc a { color: var(--ink); text-decoration: none; } .toc a:hover { color: var(--accent); } .table-wrap { overflow-x: auto; margin: 1.5rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .data-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.94rem; line-height: 1.45; } .data-table caption { caption-side: top; text-align: left; padding: 1rem 1.1rem 0.25rem; color: var(--muted); font-size: 0.88rem; } .data-table th, .data-table td { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .data-table thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; border-bottom: 2px solid var(--ink); white-space: nowrap; } .data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; } .data-table tbody tr:hover { background: #f7f9fa; } .data-table td a { font-weight: 650; color: var(--ink); text-decoration: none; } .data-table td a:hover { color: var(--accent); } .callout { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); } .callout strong { font-family: var(--font-ui); } .example { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surface); border: 1px dashed #b9c4c9; border-radius: var(--r-sm); font-size: 0.95rem; color: var(--ink-2); } .example strong { color: var(--ink); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.95rem 1.1rem; font-family: var(--font-ui); } .stat b, .stat strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); } .stat span { font-size: 0.85rem; color: var(--muted); } ul.checklist { padding-left: 1.2rem; } ul.checklist li { margin-bottom: 0.45rem; } .trust-list { list-style: none; margin: 1.5rem 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .trust-row { display: grid; grid-template-columns: 8rem 1fr; gap: 0.75rem; margin: 0; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; align-items: baseline; } .trust-row:last-child { border-bottom: 0; } .trust-row--pass { border-left-color: var(--good); } .trust-row--caution { border-left-color: var(--warn); } .trust-row--concern { border-left-color: var(--bad); } .trust-status { font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem; } .trust-row--pass .trust-status { color: var(--good); } .trust-row--caution .trust-status { color: #a87900; } .trust-row--concern .trust-status { color: var(--bad); } .trust-label { display: block; font-family: var(--font-ui); font-weight: 650; color: var(--ink); } .trust-note { margin: 0; font-size: 0.94rem; color: var(--ink-2); } .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; } .fit-col { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); } .fit-col h3 { margin-top: 0; font-size: 1.05rem; } .fit-col ul { margin: 0; padding-left: 1.15rem; } .fit-col li { margin-bottom: 0.5rem; } .fit-col--yes { background: #eaf6ef; border-color: #c3e4d0; } .fit-col--yes h3 { color: #137a40; } .fit-col--yes li::marker { color: var(--good); } .fit-col--no { background: #fbeeeb; border-color: #f0cbc2; } .fit-col--no h3 { color: #b1321f; } .fit-col--no li::marker { color: var(--bad); } .alt-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.75rem; } .alt-list li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.25rem; } .alt-list a { font-family: var(--font-ui); font-weight: 700; } /* FAQ */ .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 0.6rem; padding: 0 1.3rem; } .faq summary { list-style: none; position: relative; cursor: pointer; padding: 1.05rem 2.5rem 1.05rem 0; font-family: var(--font-ui); font-weight: 650; font-size: 1.05rem; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.65rem; height: 0.65rem; margin-top: -0.45rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.2s ease; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; } .faq summary:hover { color: var(--accent); } .faq details p { margin: 0; padding: 0 0 1.15rem; color: var(--ink-2); max-width: 68ch; } /* ---------- Hub (A–Z) -------------------------------------------------- */ .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 44rem; } .az-group { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .az-group h2 { margin: 0 0 0.75rem; font-size: 1.4rem; color: var(--accent); } .az-group ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 2.5rem; font-family: var(--font-ui); } .az-group li { break-inside: avoid; margin-bottom: 0.45rem; } .az-group a { color: var(--ink); text-decoration: none; font-weight: 550; } .az-group a:hover { color: var(--accent); } .cat-score { margin-left: 0.35rem; color: var(--accent); font-family: var(--font-ui); font-weight: 650; font-size: 0.88rem; } /* ---------- Tech-Seiten (About / Privacy / Cookie) --------------------- */ .page--tech h1 { margin-bottom: 0.8rem; } .page--tech h2 { margin-top: 2rem; font-size: 1.5rem; } .page--tech h3 { margin-top: 1.4rem; font-size: 1.12rem; } .page--tech address { font-style: normal; line-height: 1.7; margin: 1rem 0; } .page--tech li { margin-bottom: 0.4rem; } .page--tech .data-table { min-width: 0; } /* ========================================================================== HOME «Flutlicht» — Markup der Startseite (Präfix qt-) -------------------------------------------------------------------------- <:is(main, .content-main) class="page page--home">
  1. 1 Name 6,6
— Tickerband, volle Breite
— Petrol-Panel h1 · p.qt-hero-lead · div.qt-hero-stats>div.qt-stat · p.callout · figure.qt-hero-media>img (16:9, Platzhalter wie Site 1, ohne figcaption)
div.qt-podium-grid>article.qt-card (Top 3) div.qt-card-top>span.qt-rank + span.qt-score[style="--s:6.6"]>b+small h3.qt-name · p.best-for · dl.qt-facts>div.qt-fact>dt+dd · div.qt-ampel>span.qt-light--{green|yellow|red}×3+span.qt-ampel-note · p.qt-verdict · a.qt-more ol.qt-rows>li.qt-row (Ränge 4–20) span.qt-row-rank · div.qt-row-main>a.qt-row-name+p.best-for · p.qt-row-facts · span.qt-score[style="--s:…"] · a.qt-row-link
table.qt-ampel-table · p.qt-ampel-legend
table.data-table
div.qt-cat-grid>article.qt-cat
section.qt-guide > figure.qt-guide__media>img (optional, volle Breite) + div.qt-guide__head (h2 + p.callout, sticky) + div.qt-guide__body (Text)
·
·