/* Imported */ /* ================================================================================================== wettanbieter-test · «Prüfstand, hell» Kühles Kreideweiß als Grundfläche, Tinte (tiefes Indigo) für Text und zwei dunkle Bühnen (Messkopf und Risiko-Ampel), Kobalt als einzige Akzentfarbe für Links, Noten und Ränge. Nur Systemschriften: Bahnschrift / Avenir Next Condensed (schmal) für Überschriften und Noten, Segoe UI / System für Lauftext. Keine Versalien-Labels, keine Monospace-Beschriftungen; Ziffern durchgehend tabellarisch. Radien nach Hierarchie: Bühne 28px · Panel 20px · Kachel 14px · Pille rund. Aufbau: Tokens → Basis → Chrome → Review → Summary → Hub → Home → Tech → Media ================================================================================================== */ :root { --paper: #eef1fa; /* Grundfläche */ --paper-tief: #e1e6f5; /* zweite Ebene auf Papier: Hinweise, Tabellenkopf */ --white: #ffffff; /* Panels, Karten, Tabellen */ --ink: #141b34; /* Text und dunkle Bühnen */ --stage: #1d2270; /* dunkle Bühnen: Messkopf, Platz 1, Risiko-Ampel, Footer (Ultramarin) */ --stage-hoch: #2a3091; /* Felder auf der Bühne */ --ink-hoch: var(--stage-hoch); --muted: #5c6478; /* Beschriftungen, Nebentext */ --line: #d6ddee; /* Linien auf Papier und Weiß */ --accent: #3a4cff; /* Kobalt: Links, Noten, Ränge */ --accent-tief: #2532c9; /* Hover, Text auf Kobalt-Tönung */ --accent-hell: #aab3ff; /* Kobalt auf dunkler Bühne */ --accent-ton: #e2e6ff; /* Kobalt-Tönung: Pillen, Callouts */ --on-ink: #f2f4f7; /* Text auf Tinte */ --signal: #2ee0c8; /* Türkis: Highlights auf den Bühnen (Platz-1-Rang, CTA, Prüfgrößen) */ --on-ink-muted: #b8bfe3; /* Nebentext auf Tinte */ --on-ink-line: rgba(255, 255, 255, .16); --pass: #18935f; --pass-ton: #e3f4ec; --pass-hell: #4fd69c; --caution: #b97c00; --caution-ton: #fbf0d6; --caution-hell: #ffc24b; --concern: #cf3b30; --concern-ton: #fbe5e3; --concern-hell: #ff8a7d; --maxw: 1180px; --col: 760px; /* Textkolonne Review / Tech / Guide */ --gutter: max(1.25rem, calc((100% - var(--maxw)) / 2)); --r-stage: 28px; --r-panel: 20px; --r-tile: 14px; /* Nur Systemschriften, keine Webfonts: Bahnschrift (Windows) bzw. Avenir Next Condensed (macOS) für Überschriften und Noten */ --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: Bahnschrift, "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.68 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -.012em; margin: 0 0 .55em; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.1rem); font-weight: 700; letter-spacing: -.02em; } h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem); margin-top: 2.4em; } h3 { font-size: 1.22rem; letter-spacing: -.01em; line-height: 1.2; } h1, h2, h3, h4, .site-name, .score, .pz-score b, .stat strong, .pz-messfeld dt { font-family: var(--font-display); font-stretch: semi-condensed; } p, ul, ol, dl, table, figure { margin: 0 0 1.15em; } a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(51, 70, 240, .35); } a:hover { color: var(--accent-tief); text-decoration-color: currentColor; } strong, b { font-weight: 650; } small { font-size: .82rem; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: #fff; } /* Zahlen und Quoten überall tabellarisch */ .score, .cat-score, .data-table td, .data-table th, .quick-facts td, .pz-score, .pz-rang, .pz-wert, .pz-messwert, .stat strong { font-variant-numeric: tabular-nums; } /* Bildplatzhalter: Bilder entstehen später aus prompt*.txt — die Seite muss ohne sie fertig aussehen */ :is(main, .content-main) img:where(:not(.tc-brands-wrap *)) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; color: var(--muted); font-size: 1rem; line-height: 1.5; border-radius: var(--r-panel); background-color: var(--paper-tief); background-image: radial-gradient(120% 90% at 85% 0%, rgba(51, 70, 240, .22) 0%, transparent 60%), linear-gradient(160deg, #dfe4ee 0%, #cdd4e2 100%); } /* --------------------------------------------------------------------------- Chrome (alle Seiten) */ .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; padding: 1rem var(--gutter); background: rgba(242, 244, 247, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .site-name { display: inline-flex; align-items: center; gap: .65rem; margin-right: auto; font-weight: 700; font-size: 1.12rem; letter-spacing: -.015em; 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: 10px; } .site-nav { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .95rem; font-weight: 500; } .site-nav a { color: var(--muted); text-decoration: none; padding: .38rem .8rem; border-radius: 999px; transition: background-color .15s, color .15s; } .site-nav a:hover { color: var(--ink); background: var(--paper-tief); } .site-nav a[aria-current="page"] { color: var(--white); background: var(--accent); } .page { padding: 2.2rem var(--gutter) 4rem; } .page--review, .page--tech, .page--hub { max-width: none; } .page--review, .page--tech { padding-inline: max(1.25rem, calc((100% - var(--col)) / 2)); } .page--review > *, .page--tech > * { max-width: var(--col); } .page--review > h1, .page--tech > h1 { max-width: 20ch; } .breadcrumbs { font-size: .88rem; color: var(--muted); margin-bottom: 1.6rem; } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); text-decoration: underline; } nav.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; } .breadcrumbs ol li + li::before { content: "/"; color: var(--line); margin-right: .45rem; } .rg-note { display: block; max-width: var(--col); margin: 3.5rem 0 0; background: var(--paper-tief); border-radius: var(--r-tile); padding: 1.05rem 1.25rem; font-size: .92rem; line-height: 1.6; color: var(--muted); } .rg-note p { margin: 0; } .rg-note strong { color: var(--ink); } .site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; background: var(--stage); color: var(--on-ink-muted); padding: 2rem var(--gutter); font-size: .92rem; } .site-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; } .site-footer a { color: var(--on-ink); text-decoration: none; } .site-footer a:hover { color: var(--accent-hell); text-decoration: underline; } .site-footer p { margin: 0 0 0 auto; } /* --------------------------------------------------------------------------- Review */ .page--review .hero { margin: 0 0 2rem; max-width: var(--col); } .verdict-box { max-width: var(--col); display: flow-root; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 1.6rem 1.6rem 1.3rem; } .verdict-box .score { display: block; margin: 0 0 .9rem; } .verdict-box .best-for { margin: 0 0 1rem; } .verdict-box p { margin: 0 0 1rem; } .verdict-box .quick-facts { clear: left; margin-top: .4rem; } .score { font-weight: 700; font-size: 3.6rem; line-height: .95; letter-spacing: -.02em; color: var(--accent); } .score span { font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-left: .15rem; } .best-for { display: inline-block; justify-self: start; align-self: center; margin: 0; font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--accent-tief); background: var(--accent-ton); padding: .3rem .7rem; border-radius: 8px; } .quick-facts { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; } .quick-facts th, .quick-facts td { text-align: left; padding: .6rem .8rem .6rem 0; border-top: 1px solid var(--line); vertical-align: top; } .quick-facts th { width: 12rem; font-weight: 600; color: var(--muted); } .toc { max-width: var(--col); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 1.2rem 1.4rem; margin: 2rem 0; } .toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2.2rem; font-size: .95rem; } .toc li { margin-bottom: .4rem; break-inside: avoid; } .toc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; } .toc a { color: var(--ink); text-decoration: none; } .toc a:hover { color: var(--accent); text-decoration: underline; } .table-wrap { overflow-x: auto; margin: 0 0 1.4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); } .data-table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .94rem; background: var(--white); } .table-wrap .data-table { margin: 0; border: 0; background: transparent; } .data-table thead th { background: var(--paper); color: var(--muted); font-weight: 600; font-size: .86rem; text-align: right; padding: .75rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .data-table thead th:first-child, .data-table tbody th { text-align: left; } .data-table td, .data-table tbody th { padding: .7rem .9rem; border-top: 1px solid var(--line); text-align: right; vertical-align: top; } .data-table tbody tr:first-child td, .data-table tbody tr:first-child th { border-top: 0; } .data-table td:first-child { text-align: left; font-weight: 600; } .data-table tbody tr:hover { background: #f7f8fb; } .callout { background: var(--accent-ton); color: var(--ink); border-radius: var(--r-tile); padding: 1.05rem 1.25rem; margin: 0 0 1.4rem; font-size: .98rem; } .callout > :last-child { margin-bottom: 0; } .example { background: var(--white); border: 1px dashed #c3cad8; border-radius: var(--r-tile); padding: 1.05rem 1.25rem; margin: 0 0 1.4rem; font-size: .96rem; font-variant-numeric: tabular-nums; } .example strong { color: var(--accent-tief); } .example > :last-child { margin-bottom: 0; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; } .stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); padding: .95rem 1rem; font-size: .88rem; line-height: 1.4; color: var(--muted); } .stat strong { display: block; margin-bottom: .3rem; font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -.015em; color: var(--ink); } ul.checklist { list-style: none; padding: 0; margin: 0 0 1.4rem; } ul.checklist li { position: relative; padding-left: 2rem; margin-bottom: .55rem; } ul.checklist li::before { content: "✓"; position: absolute; left: 0; top: .2em; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--accent-tief); background: var(--accent-ton); } /* Summary · Risiko-Check */ .trust-list { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: var(--col); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; } .trust-row { display: grid; grid-template-columns: 8.5rem 1fr; grid-template-areas: "status label" "status note"; gap: .15rem 1.1rem; align-items: start; padding: .95rem 1.2rem; border-top: 1px solid var(--line); } .trust-row:first-child { border-top: 0; } .trust-status { grid-area: status; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--muted); background: var(--paper); padding: .28rem .65rem; border-radius: 999px; } .trust-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; } .trust-row--pass .trust-status { color: var(--pass); background: var(--pass-ton); } .trust-row--caution .trust-status { color: var(--caution); background: var(--caution-ton); } .trust-row--concern .trust-status { color: var(--concern); background: var(--concern-ton); } .trust-label { grid-area: label; font-weight: 650; font-size: 1rem; } .trust-note { grid-area: note; font-size: .94rem; color: var(--muted); } /* Summary · Für wen sich das lohnt */ .fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; max-width: var(--col); margin: 0 0 1.4rem; } .fit-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 1.2rem 1.3rem; } .fit-col h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin-bottom: .7rem; } .fit-col h3::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); flex: none; } .fit-col--yes h3::before { background: var(--pass); } .fit-col--no h3::before { background: var(--concern); } .fit-col ul { margin: 0; padding-left: 1.1rem; font-size: .96rem; } .fit-col li { margin-bottom: .45rem; } .fit-col li::marker { color: var(--muted); } .alt-list { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: var(--col); } .alt-list li { border-top: 1px solid var(--line); padding: .8rem 0; font-size: .97rem; } .alt-list li:last-child { border-bottom: 1px solid var(--line); } .alt-list a { font-weight: 650; } .faq { max-width: var(--col); } .faq details { border-bottom: 1px solid var(--line); } .faq details:first-of-type { border-top: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 0; font-size: 1.06rem; font-weight: 600; line-height: 1.4; } .faq summary::marker, .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; margin-top: -.1rem; font-size: 1.15rem; font-weight: 500; line-height: 1; color: var(--accent); background: var(--accent-ton); transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--accent-tief); } .faq details p { margin: 0 0 1.1rem; font-size: 1rem; color: #2c3450; max-width: 68ch; } /* --------------------------------------------------------------------------- Hub A–Z */ .lead { max-width: 62ch; font-size: 1.18rem; line-height: 1.6; color: var(--muted); } /* Kopf der Hub-Seite: H1 und Lead bilden zusammen eine Ultramarin-Bühne wie der Messkopf der Startseite */ .page--hub > h1 { margin: 0; color: #fff; background: var(--stage); border-radius: var(--r-stage) var(--r-stage) 0 0; padding: clamp(1.6rem, 1rem + 3vw, 3.2rem) clamp(1.3rem, .8rem + 2.6vw, 3.2rem) 1rem; } .page--hub > h1::before { content: ""; display: block; width: 4.6rem; height: .7rem; margin-bottom: 1rem; background: linear-gradient(var(--signal), var(--signal)) 0 0 / 4px 100% no-repeat, repeating-linear-gradient(90deg, var(--accent-hell) 0 2px, transparent 2px 8px) 8px 100% / calc(100% - 8px) 50% no-repeat; } .page--hub > .lead { max-width: none; margin: 0 0 2rem; color: #d6dbf3; background: radial-gradient(55% 100% at 100% 100%, #3a45d6 0%, rgba(58, 69, 214, 0) 100%), var(--stage); border-radius: 0 0 var(--r-stage) var(--r-stage); padding: .4rem max(clamp(1.3rem, .8rem + 2.6vw, 3.2rem), calc(100% - 68ch)) clamp(1.6rem, 1rem + 2.6vw, 3rem) clamp(1.3rem, .8rem + 2.6vw, 3.2rem); } /* Buchstabengruppen: weißes Panel, Buchstabe links, Liste rechts */ .az-group { margin: 1rem 0 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.6rem; align-items: start; background: var(--white); border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--line); padding: 1.2rem 1.6rem; } .az-group h2 { margin: 0; padding: 0; border: 0; font-size: 2.6rem; line-height: 1; color: var(--accent); position: sticky; top: 5.5rem; } .az-group ul { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 2.2rem; column-rule: 1px solid var(--line); font-size: .97rem; } .az-group li { break-inside: avoid; padding: .4rem 0; border-bottom: 1px solid #edf0f8; display: flex; align-items: baseline; gap: .6rem; } .az-group li:hover { background: linear-gradient(90deg, var(--accent-ton), rgba(226, 230, 255, 0)); } .az-group a { color: var(--ink); text-decoration: none; font-weight: 500; } .az-group a:hover { color: var(--accent); text-decoration: underline; } .cat-score { margin-left: auto; font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap; } /* ================================================================================================== HOME · Aufbau der Startseite (Schritt `home` schreibt die Seite nach dieser Beschreibung) Prefix pz- («Prüfzeugnis»). Reihenfolge der Blöcke = home.sections des Profils. 1
— dunkle Bühne:
mit H1 und Lead-Absatz (.pz-lead), daneben
mit vier Prüfgrößen (dt = Prüfgröße, dd = was gemessen wurde), darunter
. H1 läuft über die volle Breite, Lead und Messfeld stehen darunter nebeneinander und enden auf gleicher Höhe. 2