/* Theme Name: QuadChroma Theme URI: https://quadchroma.tech/ Author: Robert Brandt Description: Theme der Website quadchroma.tech: helles Datenblatt, dunkle Messfenster, Vier-Felder-Probe. Child-Theme von Twenty Twenty-Five. Schriften liegen im Theme (Archivo, JetBrains Mono, SIL OFL 1.1), nichts wird von fremden Servern geladen. Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.7 Requires PHP: 8.1 License: Alle Rechte vorbehalten (Schriften: SIL Open Font License 1.1, siehe assets/fonts) Text Domain: quadchroma */ /* ================================================================ Ersatzschrift * Review 12.10.: Bis Archivo geladen ist (font-display: swap), zeichnet der Browser eine * Systemschrift. Damit die Zeilen dabei genauso umbrechen wie in Archivo und nichts springt (CLS, * etwa der Titel der Kaufseite am Handy), ist sie auf die Breiten von Archivo eingestellt: * size-adjust aus gemessenen Laufweiten (Chrome, Helvetica Neue und Arial, Texte der Seiten; * Archivo / Ersatz bei 400/100 %: 0,975 bzw. 0,983; 500/100 %: 0,991 bzw. 0,999; 600/100 %: 0,951; 600/108 %: 1,038; * 600/112 %: 1,081), Ober- und Unterlänge wie Archivo (0,878 / 0,210 em, durch size-adjust geteilt). * Je Breite der Archivo-Achse eine Familie: Text 100 %, Überschriften 106–108 % und 112 % * (--qc-sans-108, --qc-sans-112). Nur Schriften des Systems (local), nichts wird geladen. */ @font-face { font-family: 'QC Ersatz'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'), local('ArialMT'); font-weight: 100 449; size-adjust: 97.9%; ascent-override: 89.7%; descent-override: 21.45%; line-gap-override: 0%; } @font-face { font-family: 'QC Ersatz'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'), local('ArialMT'); font-weight: 450 549; size-adjust: 99.5%; ascent-override: 88.2%; descent-override: 21.1%; line-gap-override: 0%; } @font-face { font-family: 'QC Ersatz'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 95.1%; ascent-override: 92.3%; descent-override: 22.1%; line-gap-override: 0%; } @font-face { font-family: 'QC Ersatz 108'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 103.8%; ascent-override: 84.6%; descent-override: 20.2%; line-gap-override: 0%; } @font-face { font-family: 'QC Ersatz 112'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 108.1%; ascent-override: 81.2%; descent-override: 19.4%; line-gap-override: 0%; } /* Ersatz für JetBrains Mono (SEO-Plan P0-A6, 17.10.2026; in der Mono-Liste der theme.json gleich danach): Menlo, * auf die Laufweite von JetBrains Mono gebracht (0,600 em; Menlo 1233/2048 = 0,6021 em → size-adjust 99,6594 %), * Ober- und Unterlänge wie JetBrains Mono (1,02 / 0,30 em, hhea = typo = win), durch size-adjust geteilt. * Ohne Anpassung war Menlo 0,4 % breiter: ein Wertechip auf Film & Medien rutschte bei 384 px in die zweite Reihe. */ @font-face { font-family: 'QC Ersatz Mono'; src: local('Menlo-Regular'), local('Menlo'); font-weight: 100 549; size-adjust: 99.6594%; ascent-override: 102.3486%; descent-override: 30.1025%; line-gap-override: 0%; } @font-face { font-family: 'QC Ersatz Mono'; src: local('Menlo-Bold'), local('Menlo Bold'); font-weight: 550 900; size-adjust: 99.6594%; ascent-override: 102.3486%; descent-override: 30.1025%; line-gap-override: 0%; } /* ================================================================ Tokens */ :root { color-scheme: light dark; --qc-raster-luecke: 24px; --qc-rand: 16px; --qc-abschnitt: clamp(4rem, 9vw, 7rem); --qc-mono: var(--wp--preset--font-family--mono); --qc-sans: var(--wp--preset--font-family--archivo); --qc-sans-108: Archivo, 'QC Ersatz 108', 'Helvetica Neue', Arial, system-ui, sans-serif; --qc-sans-112: Archivo, 'QC Ersatz 112', 'Helvetica Neue', Arial, system-ui, sans-serif; --qc-fenster: #05070D; --qc-fenster-raster: #0C1320; --qc-fenster-text: #D7E3EC; --qc-fenster-text-2: #7D90A3; --qc-fenster-rand: #05070D; --qc-cyan: #00E5FF; --qc-magenta: #FF2FB9; --qc-bernstein: #FFB300; --qc-gold: #FFD24A; --qc-knopf-text: #FFFFFF; --qc-knopf-hover: #00E5FF; --qc-bald: #A3B3C2; } @media (min-width: 768px) { :root { --qc-rand: 32px; } } @media (prefers-color-scheme: dark) { :root:root { --wp--preset--color--papier: #0A0E15; --wp--preset--color--flaeche: #111722; --wp--preset--color--tinte: #D7E3EC; --wp--preset--color--tinte-2: #A3B3C2; --wp--preset--color--tinte-3: #7D90A3; --wp--preset--color--linie: #243042; --wp--preset--color--linie-ui: #5A6878; --wp--preset--color--raster: #151C28; --wp--preset--color--signal: #00E5FF; --wp--preset--color--chroma: #FF5CC8; --wp--preset--color--hdr: #FFD24A; --wp--preset--color--platzhalter: #FFB35C; --wp--preset--color--platzhalter-grund: #241805; --qc-fenster-rand: #243042; --qc-knopf-text: #05070D; --qc-bald: #05070D; } } /* ================================================================ Grund */ html { scroll-padding-top: 16px; } body { margin: 0; background: var(--wp--preset--color--papier); color: var(--wp--preset--color--tinte); font-family: var(--qc-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: #FF2FB9; color: #05070D; } .qc-sprache-de :is(p, li, dd, td, figcaption) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } .qc-sprache-en :is(p, li, dd, td, figcaption) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } h1, h2, h3, h4, summary, .qc-label, .qc-kennzeile { hyphens: manual; -webkit-hyphens: manual; } /* Überschriften ohne Silbentrennung; ein einzelnes langes Wort (etwa „Datenschutzerklärung“ bei 320 px) bricht trotzdem um, statt über den Rand zu ragen (WCAG 1.4.10). Wo es geht, steht im Text ein ­. */ h1, h2, h3, h4 { overflow-wrap: break-word; } a { color: var(--wp--preset--color--signal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* E-Mail-Adressen nie trennen (Review 18.10.: „hello@quadchroma.- / tech“ im Fließtext mit Silbentrennung). */ a[href^="mailto:"] { hyphens: none; -webkit-hyphens: none; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 3px; } h1, h2, h3 { font-weight: 600; text-wrap: balance; margin: 0; color: var(--wp--preset--color--tinte); } h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem); font-stretch: 112%; font-family: var(--qc-sans-112); line-height: 1.04; letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.12; letter-spacing: -0.01em; } h3 { font-size: 1.25rem; font-stretch: 100%; font-family: var(--qc-sans); line-height: 1.3; letter-spacing: 0; } p, ul, ol, dl { margin: 0; } strong, b { font-weight: 600; } code, kbd { font-family: var(--qc-mono); font-size: 0.875em; } /* Zahl und Einheit bleiben zusammen („14-day“, „10-Bit“; werkzeug/seiten.py, umbruchschutz). */ .qc-nw { white-space: nowrap; } img { max-width: 100%; height: auto; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Die Blockabstände der Eltern-Themes neutralisieren, wir setzen sie selbst. */ .wp-site-blocks > * + * { margin-block-start: 0; } .wp-site-blocks { padding: 0; } .qc-inhalt > * + * { margin-block-start: 0; } .qc-kopf__innen > *, .qc-recht > *, .qc-404 > *, .qc-held > *, .qc-teil > *, .qc-zweier > *, .qc-formularblock > * { margin-block: 0; } .qc-huelle { box-sizing: border-box; width: 100%; max-width: calc(75rem + 2 * var(--qc-rand)); margin-inline: auto; padding-inline: var(--qc-rand); } /* Fließtext */ .qc-text > * + * { margin-block-start: 1rem; } .qc-text p, .qc-text li, .qc-text dd { max-width: 36rem; } .qc-text ul, .qc-text ol { padding-inline-start: 1.25rem; } .qc-text li + li { margin-block-start: 0.375rem; } .qc-text h3 { margin-block-start: 2rem; } .qc-einleitung { font-size: 1.25rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); max-width: 36rem; } .qc-klein { font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); max-width: 36rem; } .qc-label, .qc-kennzeile { font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--tinte-3); } /* Markenschreibung wörtlich (iPHONE UND iPAD), ohne Großschreibung durch CSS */ .qc-label.qc-label--wortlaut { text-transform: none; } .qc-mono { font-family: var(--qc-mono); font-variant-numeric: tabular-nums; } .qc-hdr { color: var(--wp--preset--color--hdr); } .qc-pfeil { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-inline-start: 0.35em; } /* Weiter-Links: Abstand über column-gap, damit ein umgebrochener Link bündig links beginnt. */ .qc-weiter { font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; row-gap: 0; } .qc-weiter a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .qc-weiter a:hover { text-decoration: underline; } /* ================================================================ Lineal */ /* 1-px-Linie, 4-px-Striche alle 8 px, 8-px-Hauptstriche alle 64 px. */ .qc-lineal-oben { position: relative; } .qc-lineal-oben::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; pointer-events: none; background: linear-gradient(var(--wp--preset--color--linie), var(--wp--preset--color--linie)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 64px) 0 0 / 100% 8px no-repeat; } /* ================================================================ Knöpfe */ .qc-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; } .qc-knopf { --c: var(--wp--preset--color--tinte); display: inline-flex; align-items: center; gap: 0.6em; box-sizing: border-box; min-height: 44px; padding: 0 20px; border-radius: 2px; border: 0; background: var(--wp--preset--color--tinte); color: var(--qc-knopf-text); font-family: var(--qc-sans); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.01em; text-decoration: none; line-height: 1.2; cursor: pointer; transition: color 0.15s, background-color 0.15s; } .qc-knopf:hover { color: var(--qc-knopf-hover); text-decoration: none; } .qc-knopf .qc-bald { font-family: var(--qc-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--qc-bald); } .qc-knopf:hover .qc-bald { color: inherit; } .qc-knopf--zweit { background-color: transparent; color: var(--wp--preset--color--tinte); background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; } .qc-knopf--zweit:hover { color: var(--wp--preset--color--signal); background-color: transparent; } @media (prefers-color-scheme: dark) { .qc-knopf:not(.qc-knopf--zweit) { background-color: #00E5FF; color: #05070D; } .qc-knopf:not(.qc-knopf--zweit):hover { background-color: #D7E3EC; color: #05070D; } .qc-knopf:not(.qc-knopf--zweit):disabled:hover { background-color: #00E5FF; color: #05070D; } } /* Nicht interaktives Element „Kauf bald möglich“ */ .qc-bald-kasten { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; box-sizing: border-box; border: 1px dashed var(--wp--preset--color--linie-ui); border-radius: 2px; color: var(--wp--preset--color--tinte-2); font-weight: 500; font-size: 0.9375rem; } /* ================================================================ Kopf */ .qc-kopf-teil { position: relative; z-index: 10; } .qc-kopf { background: var(--wp--preset--color--papier); border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } .qc-kopf__innen > * { margin: 0 !important; } .qc-sprung { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--wp--preset--color--tinte); color: var(--qc-knopf-text); padding: 12px 16px; border-radius: 2px; text-decoration: none; font-weight: 500; } .qc-sprung:focus { top: 12px; } .qc-marke { display: inline-flex; align-items: center; gap: 12px; color: var(--wp--preset--color--tinte); text-decoration: none; min-height: 44px; } .qc-marke .qc-logo { flex: none; display: block; } .qc-wortmarke { font-family: var(--qc-mono); font-weight: 500; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.28em; } /* Navigation (Kern-Block) */ .qc-nav { font-family: var(--qc-sans); font-weight: 500; font-size: 0.9375rem; } .qc-nav .wp-block-navigation__container { gap: 4px 24px; align-items: center; } .qc-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--tinte); text-decoration: none; } .qc-nav .wp-block-navigation-item.qc-nav-nr > .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; position: relative; } .qc-nav .wp-block-navigation-item.qc-nav-nr > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--signal); } .qc-nav .current-menu-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--wp--preset--color--chroma); } .qc-nav .qc-sprache > .wp-block-navigation-item__content { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--wp--preset--color--tinte-3); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 8px; box-sizing: border-box; } .qc-nav .qc-sprache.is-aktiv > .wp-block-navigation-item__content { color: var(--wp--preset--color--tinte); } /* Tippziele 44 x 44; Englisch zuerst, DE rückt an EN heran, damit „EN / DE“ gleich weit steht. */ .qc-nav .qc-sprache--en { margin-inline-start: 0; } .qc-nav .qc-sprache--de { margin-inline-start: -24px; } .qc-nav .qc-sprache--de::before { content: "/"; font-family: var(--qc-mono); font-size: 0.75rem; color: var(--wp--preset--color--tinte-3); padding-inline: 4px; } /* Sprachwahl neben dem Menüknopf: bis 1023 px immer sichtbar, auf englischen Seiten bis 1089 px, auf deutschen * bis 1159 px (siehe unten; das Menü steckt dort im Overlay), auf der Kaufseite ohne Hauptmenü in jeder Breite. */ .qc-kopf__innen > .qc-kopf__sprache { margin-inline-start: auto !important; } .qc-kopf__sprache { display: flex; align-items: center; font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--wp--preset--color--tinte-3); } .qc-kopf__sprache a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--wp--preset--color--tinte-3); text-decoration: none; } .qc-kopf__sprache a.is-aktiv { color: var(--wp--preset--color--tinte); } .qc-kopf__sprache a:hover { color: var(--wp--preset--color--signal); } @media (min-width: 1024px) { .qc-kopf__sprache:not(.qc-kopf__sprache--immer) { display: none; } } /* Schmale Bildschirme: Logo, Sprachwahl und Menüknopf passen ohne seitlichen Überlauf. */ @media (max-width: 599px) { .qc-kopf__innen { gap: 12px; } .qc-kopf__sprache a { min-width: 36px; } } @media (max-width: 359px) { .qc-kopf__innen .qc-wortmarke { display: none; } } .qc-nav .qc-nav-download > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 0.6em; min-height: 40px; padding: 0 16px; border-radius: 2px; background: var(--wp--preset--color--tinte); color: var(--qc-knopf-text); } .qc-nav .qc-nav-download > .wp-block-navigation-item__content:hover { color: var(--qc-knopf-hover); } /* Auf /download/ selbst keine Unterstreichung im Knopf. */ .qc-nav .qc-nav-download.current-menu-item > .wp-block-navigation-item__content::after { display: none; } .qc-nav .qc-nav-download .qc-bald { font-family: var(--qc-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--qc-bald); } @media (prefers-color-scheme: dark) { .qc-nav .qc-nav-download > .wp-block-navigation-item__content { background: #00E5FF; color: #05070D; } .qc-nav .qc-nav-download > .wp-block-navigation-item__content:hover { background: #D7E3EC; color: #05070D; } } /* Kundenkonto: abgesetzt mit einer Linie (Funktionen … Preise | Konto | DE / EN | Download) */ .qc-nav .qc-nav-konto > .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding-inline-start: 24px; border-left: 1px solid var(--wp--preset--color--linie-ui); color: var(--wp--preset--color--tinte); } .qc-nav .qc-nav-konto > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--signal); } .qc-nav .is-menu-open .qc-nav-konto { flex: 0 0 100%; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-nav .is-menu-open .qc-nav-konto > .wp-block-navigation-item__content { border-left: 0; padding-inline-start: 0; min-height: 54px; width: 100%; font-size: 1.5rem; font-weight: 600; font-stretch: 108%; font-family: var(--qc-sans-108); } /* Menüknopf und Overlay bis 1023 px (Kern-Schwelle 600 px angehoben), auf englischen Seiten bis 1089 px, auf * deutschen bis 1159 px (siehe unten). */ .qc-nav .wp-block-navigation__responsive-container-open, .qc-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--wp--preset--color--tinte); } .qc-nav .wp-block-navigation__responsive-container-close { display: flex; } @media (min-width: 600px) and (max-width: 1023px) { .qc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .qc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } .qc-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--papier) !important; color: var(--wp--preset--color--tinte) !important; padding: 16px var(--qc-rand) 32px; } .qc-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; } .qc-nav .is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch !important; gap: 0; counter-reset: qc-nav; width: 100%; } .qc-nav .is-menu-open .wp-block-navigation-item { width: 100%; } .qc-nav .is-menu-open .qc-nav-nr { counter-increment: qc-nav; border-bottom: 1px solid var(--wp--preset--color--linie); } /* Zeilen im Overlay 54 px hoch (vorher 64 px): Mit sieben Menüpunkten (18.10.2026) bleibt „Kostenlos testen“ / * „Try it free“ bei 375 × 812 ganz zu sehen (Unterkante 796 px statt 876 px). Schrift unverändert. */ .qc-nav .is-menu-open .qc-nav-nr > .wp-block-navigation-item__content { font-size: 1.5rem; font-weight: 600; font-stretch: 108%; font-family: var(--qc-sans-108); min-height: 54px; width: 100%; gap: 16px; } .qc-nav .is-menu-open .qc-nav-nr > .wp-block-navigation-item__content::before { content: counter(qc-nav, decimal-leading-zero); font-family: var(--qc-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: var(--wp--preset--color--tinte-3); font-stretch: 100%; } .qc-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after { bottom: 12px; left: 40px; right: auto; width: 2.5rem; } .qc-nav .is-menu-open .qc-sprache { width: auto; display: inline-flex; margin-top: 24px; } .qc-nav .is-menu-open .qc-sprache--de { margin-inline-start: 0; } .qc-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; } .qc-nav .is-menu-open .wp-block-navigation__container { flex-direction: row; flex-wrap: wrap; } .qc-nav .is-menu-open .qc-nav-nr { flex: 0 0 100%; } .qc-nav .is-menu-open .qc-nav-download { flex: 0 0 100%; margin-top: 24px; } .qc-nav .is-menu-open .qc-nav-download > .wp-block-navigation-item__content { min-height: 44px; } /* ================================================================ Inhalt */ .qc-haupt { display: block; } /* Höchstbreiten der Überschriften in em, nicht in ch (SEO-Plan P0-A6, 17.10.2026): ch ist die Breite der Ziffer 0 * der gerade benutzten Schrift, in der Ersatzschrift also 9 % schmaler als in Archivo; der Kasten brach dort früher um * und sprang beim Schrifttausch. Umgerechnet mit Archivo 600 (in Chrome gemessen): H1 bei 112 % 1ch = 0,662em * (15/18/20ch = 9,93/11,916/13,24em), H2 bei 108 % 1ch = 0,633em (20/22ch = 12,66/13,926em). In Archivo pixelgleich. */ /* Seitenkopf einer Inhaltsseite: Kennzeile, H1, Einleitung */ .qc-seitenkopf { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem); } .qc-seitenkopf > * + * { margin-block-start: 1.5rem; } .qc-seitenkopf h1 { max-width: 13.24em; } /* ================================================================ Seitenbausteine (Umbau Teil B) */ /* Ein Abschnitt: Kopf (h2, ein Satz), dann Bild, Zahl oder Zeichenraster. */ .qc-teil { padding-block: calc(var(--qc-abschnitt) / 2); } .qc-teil:first-child { padding-top: var(--qc-abschnitt); } .qc-teil__kopf { max-width: 40rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .qc-teil__kopf > * + * { margin-top: 1rem; } .qc-teil__kopf h2 { max-width: 13.926em; } .qc-teil__kopf p, .qc-teil__text { font-size: 1.125rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); max-width: 38rem; } .qc-teil__kopf:last-child { margin-bottom: 0; } .qc-hinweis { margin-top: 2rem; color: var(--wp--preset--color--tinte-2); } .qc-hinweis + .qc-hinweis--nah { margin-top: 0.5rem; } /* Kennzeile über der Überschrift in der Signalfarbe */ .qc-held .qc-kennzeile, .qc-seitenkopf .qc-kennzeile { color: var(--wp--preset--color--signal); } /* Kennzeile im H1 (SEO-Plan P0-A5, 17.10.2026; werkzeug/seiten.py, held(kenn_im_h1=True)):

sieht aus wie früher

über dem H1. Abstand wie .qc-held__text > * + *; was das H1 vererbt (Breite 112 %, Umbruch), zurück auf den Stand des Absatzes (hyphens, text-wrap wie p). Vorher/nachher in Chrome verglichen: 12 Seiten × 7 Breiten (320–1920 px), Kopf pixelgleich. */ h1 > .qc-kennzeile { display: block; margin-block-end: 1.25rem; font-stretch: 100%; overflow-wrap: normal; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } /* ---------------------------------------------------------------- Seitenkopf mit Bild */ .qc-held { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); } .qc-held__text > * + * { margin-top: 1.25rem; } .qc-held__text > .qc-knoepfe { margin-top: 2rem; } /* Am Handy (unter 480 px) stehen zwei oder mehr Knöpfe im Seitenkopf untereinander, volle Breite (SEO-Plan P0-A6, * Robert 17.10.2026). Nebeneinander passten sie je nach Schrift mal in eine Zeile, mal nicht, und der Seitenkopf * sprang beim Schrifttausch (Film & Medien bei 412 px). Ein einzelner Knopf bleibt, wie er ist. */ @media (max-width: 479px) { .qc-held .qc-knoepfe:has(> :nth-child(2)) { flex-direction: column; align-items: stretch; } .qc-held .qc-knoepfe:has(> :nth-child(2)) > * { justify-content: center; text-align: center; } } .qc-held__text > .qc-chips, .qc-held__text > .qc-klein { margin-top: 1.75rem; } .qc-held h1 { max-width: 9.93em; } .qc-held .qc-einleitung { max-width: 34rem; } .qc-held__bild { min-width: 0; } .qc-held--ohne-bild { padding-bottom: clamp(1rem, 3vw, 2rem); } .qc-held--ohne-bild h1 { max-width: 11.916em; } .qc-held--breit .qc-held__text { max-width: 48rem; } .qc-held--breit h1 { max-width: 11.916em; } @media (min-width: 1024px) { .qc-held:not(.qc-held--breit):not(.qc-held--ohne-bild) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); } .qc-held--breit { gap: 3.5rem; } } /* ---------------------------------------------------------------- Bildrahmen */ /* Szenen und App-Oberflächen sind immer dunkel; der Rahmen folgt hell/dunkel. */ .qc-rahmen { position: relative; overflow: hidden; border-radius: 8px; background: var(--qc-fenster); border: 1px solid var(--wp--preset--color--linie); } .qc-rahmen img, .qc-rahmen picture { display: block; width: 100%; height: auto; } .qc-rahmen--szene { border-radius: 10px; box-shadow: 0 24px 60px -32px rgba(5, 7, 13, 0.55); } .qc-abbildung { margin: 0; min-width: 0; } .qc-abbildung > figcaption { margin-top: 0.75rem; font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--wp--preset--color--tinte-3); } .qc-abbildung > svg, .qc-geraete svg, .qc-code svg, .qc-team svg, .qc-karte__bild svg, .qc-schritt__bild svg, .qc-gemeinsam svg { display: block; width: 100%; height: auto; } /* Geräte-Grafik: Bildschirme als eigene Bilder (loading="lazy") über den dunklen Flächen des SVG. */ .qc-geraete__flaeche { position: relative; } .qc-geraete__schirm { position: absolute; display: block; object-fit: cover; border-radius: 2px; background: #05070D; } /* ---------------------------------------------------------------- Zeichen (Symbolsatz) */ .qc-sym { display: block; flex: none; width: 40px; height: 40px; color: var(--wp--preset--color--tinte); fill: var(--wp--preset--color--signal); overflow: visible; } .qc-sym use[href*="#qc-hdr"] { fill: var(--wp--preset--color--hdr); } .qc-sym--gross { width: 56px; height: 56px; } .qc-taste { display: block; width: 40px; } .qc-taste svg { display: block; width: 38px; height: auto; } /* ---------------------------------------------------------------- Vorher/Nachher-Regler */ /* Unten 4:2:0, darüber 4:4:4, links bis --teil weggeschnitten. Ein echtes * über der Fläche trägt Tastatur, Maus und Touch; ohne * JavaScript wischt der Regler einmal (nur mit @property, nie bei reduzierter Bewegung). */ @property --teil { syntax: ''; inherits: true; initial-value: 50%; } .qc-vergleich { --start: 50%; --teil: var(--start); margin: 0; min-width: 0; } .qc-vergleich__flaeche { position: relative; overflow: hidden; background: var(--qc-fenster); border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; aspect-ratio: 1440 / 808; user-select: none; -webkit-user-select: none; touch-action: pan-y; animation: qc-vergleich-wisch 3.4s cubic-bezier(.6, 0, .3, 1) .6s 1 both; } .qc-vergleich__bild, .qc-vergleich__bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; } .qc-vergleich__bild img { object-fit: cover; image-rendering: pixelated; } .qc-vergleich__bild--444 { clip-path: inset(0 0 0 var(--teil)); } .qc-vergleich__marke { position: absolute; bottom: 12px; padding: 5px 9px; border-radius: 3px; background: rgba(5, 7, 13, 0.82); font: 600 13px/1 var(--qc-mono); letter-spacing: 0.06em; color: #D7E3EC; pointer-events: none; } .qc-vergleich__marke--420 { left: 12px; } .qc-vergleich__marke--444 { right: 12px; color: #00E5FF; } .qc-vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--teil); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.35); pointer-events: none; } .qc-vergleich__griff { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 10px rgba(5, 7, 13, 0.45); display: grid; place-items: center; } .qc-vergleich__griff svg { width: 22px; height: 22px; fill: #05070D; } .qc-vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; } .qc-vergleich__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; } .qc-vergleich__regler::-moz-range-thumb { width: 1px; height: 100%; border: 0; } /* Mit JavaScript nimmt die Bildfläche Maus, Stift und Finger (vergleich.js), das Eingabefeld nur Tastatur. */ .qc-vergleich--js .qc-vergleich__regler { pointer-events: none; } .qc-vergleich--js .qc-vergleich__flaeche { cursor: ew-resize; } .qc-vergleich__regler:focus-visible ~ .qc-vergleich__linie .qc-vergleich__griff { outline: 3px solid var(--wp--preset--color--signal); outline-offset: 3px; } .qc-vergleich__unter { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 500 0.75rem/1.4 var(--qc-mono); letter-spacing: 0.04em; color: var(--wp--preset--color--tinte-3); } .qc-vergleich--bedient .qc-vergleich__flaeche { animation: none; } @keyframes qc-vergleich-wisch { 0% { --teil: var(--start); } 35% { --teil: 86%; } 72% { --teil: 16%; } 100% { --teil: var(--start); } } @media (max-width: 599px) { .qc-vergleich__flaeche { aspect-ratio: 960 / 784; } .qc-vergleich__marke { bottom: 8px; font-size: 12px; padding: 4px 7px; } .qc-vergleich__marke--420 { left: 8px; } .qc-vergleich__marke--444 { right: 8px; } .qc-vergleich__griff { width: 40px; height: 40px; margin: -20px 0 0 -20px; } } /* Vergleich als eigener Abschnitt (Film, Gaming): Überschrift links, Regler rechts */ @media (min-width: 1024px) { .qc-teil--vergleich { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; align-items: center; } .qc-teil--vergleich .qc-teil__kopf { margin-bottom: 0; } } /* ---------------------------------------------------------------- Zahlenleiste */ .qc-zahlen { padding-block: 0 calc(var(--qc-abschnitt) / 2); } .qc-zahlen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--qc-raster-luecke); } .qc-zahlen__liste li { position: relative; margin: 0; padding-top: 20px; display: flex; flex-direction: column; gap: 8px; } .qc-zahlen__liste li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(var(--wp--preset--color--linie), var(--wp--preset--color--linie)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, linear-gradient(var(--wp--preset--color--tinte-3), var(--wp--preset--color--tinte-3)) 0 0 / 1px 8px no-repeat; } .qc-zahlen__wert { display: flex; align-items: center; gap: 0.35em; font-weight: 600; font-stretch: 112%; font-family: var(--qc-sans-112); letter-spacing: -0.02em; font-size: clamp(2.125rem, 3.5vw + 0.75rem, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; } .qc-zahlen__zeichen { flex: none; width: 0.62em; height: 0.62em; } .qc-zahlen__liste li:nth-child(3) .qc-zahlen__wert { color: var(--wp--preset--color--hdr); } .qc-zahlen__text { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-2); } @media (min-width: 768px) { .qc-zahlen__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------------------------------------------------------------- Text und Bild nebeneinander */ .qc-zweier { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center; } .qc-zweier__text > * + * { margin-top: 1.5rem; } .qc-zweier__text .qc-teil__kopf { margin-bottom: 0; } .qc-zweier__bild { min-width: 0; } @media (min-width: 1024px) { .qc-zweier { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 5vw, 5rem); } .qc-zweier--bild-gross { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .qc-zweier--sicherheit { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } } /* ---------------------------------------------------------------- Bildkacheln (Für wen) */ .qc-bildkacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } @media (min-width: 640px) { .qc-bildkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .qc-bildkacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-bildkachel { position: relative; margin: 0; min-width: 0; } .qc-bildkachel .qc-rahmen { aspect-ratio: 16 / 10; transition: border-color 0.2s; } .qc-bildkachel .qc-rahmen img { height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(.2, 0, 0, 1); } .qc-bildkachel h3 { margin-top: 1.125rem; font-size: 1.375rem; font-stretch: 108%; font-family: var(--qc-sans-108); } .qc-bildkachel p { margin-top: 0.375rem; color: var(--wp--preset--color--tinte-2); max-width: 26rem; } .qc-bildkachel__link { color: var(--wp--preset--color--tinte); text-decoration: none; } .qc-bildkachel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .qc-bildkachel:hover .qc-bildkachel__link { color: var(--wp--preset--color--signal); } .qc-bildkachel:hover .qc-rahmen { border-color: var(--wp--preset--color--signal); } .qc-bildkachel:hover .qc-rahmen img { transform: scale(1.03); } .qc-bildkachel__link:focus-visible { outline: none; } .qc-bildkachel__link:focus-visible::after { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 4px; border-radius: 8px; } .qc-mehr { margin-top: 2rem; } .qc-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; color: var(--wp--preset--color--tinte); font-weight: 500; text-decoration: none; background: var(--wp--preset--color--flaeche); } .qc-chip--link:hover { border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); } /* ---------------------------------------------------------------- Zeichenkacheln */ .qc-merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px var(--qc-raster-luecke); } @media (min-width: 600px) { .qc-merkmale--3, .qc-merkmale--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .qc-merkmale--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qc-merkmale--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .qc-merkmal { margin: 0; min-width: 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--linie); } .qc-merkmal h3 { margin-top: 14px; font-size: 1.1875rem; } .qc-merkmal p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); max-width: 24rem; } .qc-merkmale--1 .qc-merkmal { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; } .qc-merkmale--1 .qc-merkmal > :first-child { grid-row: 1 / span 2; } .qc-merkmale--1 .qc-merkmal h3 { margin-top: 2px; } /* Ab 600 px: Zeichen, Titel und Text liegen je Kachelreihe auf gleicher Höhe, auch wenn ein Titel umbricht (jede Kachel nimmt drei Zeilen des Rasters als Subgrid; am Handy bleibt die kompakte Ansicht) */ @media (min-width: 600px) { .qc-merkmale:not(.qc-merkmale--1) .qc-merkmal { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-items: start; } } /* ---------------------------------------------------------------- Preisband (Start) */ .qc-preisband { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 8px; background: var(--wp--preset--color--flaeche); border-top: 3px solid var(--wp--preset--color--signal); } .qc-preisband__text > * + * { margin-top: 0.875rem; } .qc-preisband__text p { max-width: 44rem; color: var(--wp--preset--color--tinte-2); font-size: 1.0625rem; } @media (min-width: 1024px) { .qc-preisband { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; } } /* ---------------------------------------------------------------- Schluss: genau ein Handlungsaufruf */ .qc-schluss { position: relative; padding-block: var(--qc-abschnitt); } .qc-schluss::before { content: ""; position: absolute; left: var(--qc-rand); right: var(--qc-rand); top: calc(var(--qc-abschnitt) / 2); height: 8px; background: linear-gradient(var(--wp--preset--color--linie), var(--wp--preset--color--linie)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 64px) 0 0 / 100% 8px no-repeat; } .qc-schluss > * + * { margin-top: 1rem; } .qc-schluss h2 { max-width: 12.66em; padding-top: 1rem; } .qc-schluss p { color: var(--wp--preset--color--tinte-2); font-size: 1.125rem; } .qc-schluss .qc-knoepfe { margin-top: 1.75rem; } /* ---------------------------------------------------------------- Funktionen: Bild */ .qc-bildmerkmale { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } @media (min-width: 768px) { .qc-bildmerkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-bildmerkmal { margin: 0; min-width: 0; } .qc-bildmerkmal__bild { aspect-ratio: 16 / 10; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--qc-fenster); border: 1px solid var(--wp--preset--color--linie); } .qc-bildmerkmal__bild > img { width: 100%; height: 100%; object-fit: cover; display: block; } .qc-bildmerkmal h3 { margin-top: 18px; font-size: 1.1875rem; } .qc-bildmerkmal p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); max-width: 24rem; } .qc-verlauf { position: relative; width: 88%; } .qc-verlauf svg { display: block; width: 100%; height: auto; } .qc-verlauf__marken { margin: 0; } .qc-verlauf__marken span { position: absolute; left: 10px; transform: translateY(-50%); font: 600 0.6875rem/1 var(--qc-mono); letter-spacing: 0.08em; color: #FFFFFF; text-transform: uppercase; text-shadow: 0 1px 2px rgba(5, 7, 13, 0.6); } .qc-verlauf__marken span:first-child { top: 22.6%; } .qc-verlauf__marken span:last-child { top: 77.4%; } .qc-verlauf--kachel { height: 64%; } .qc-verlauf--kachel svg { height: 100%; } /* Native Auflösung: links nativ, rechts halbiert, derselbe Ausschnitt in Originalgröße */ .qc-nativ { position: relative; width: 100%; height: 100%; } .qc-nativ img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: none; object-position: 2% 34%; } .qc-nativ .qc-nativ__halb { clip-path: inset(0 0 0 50%); } .qc-nativ::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #FFFFFF; opacity: 0.85; } .qc-nativ__marke { position: absolute; bottom: 10px; left: 10px; padding: 4px 8px; border-radius: 3px; background: rgba(5, 7, 13, 0.82); font: 600 0.6875rem/1 var(--qc-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #00E5FF; } .qc-nativ__marke--halb { left: auto; right: 10px; color: #D7E3EC; } .qc-aussage { margin-top: 44px; padding: 20px 0 0; border-top: 1px solid var(--wp--preset--color--linie); max-width: 46rem; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem); font-weight: 600; font-stretch: 106%; font-family: var(--qc-sans-108); line-height: 1.3; } /* Funktionsübersicht (13.10.2026): Sprungmarken unter dem Seitenkopf, je Gruppe Kennzeile und H2 */ .qc-held__text > .qc-sprungmarken { margin-top: 2rem; } .qc-sprungmarken__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .qc-sprungmarken__liste li { margin: 0; } .qc-sprungmarken .qc-chip { font-size: 0.9375rem; padding: 0 14px; } .qc-chip--bald { border-color: var(--wp--preset--color--hdr); } .qc-teil__kopf > .qc-kennzeile { font-size: 0.75rem; line-height: 1.4; color: var(--wp--preset--color--signal); } .qc-teil__kopf > .qc-kennzeile + h2 { margin-top: 0.75rem; } /* Sicherheit: Fläche, Kopf mit Vergleichscode, darunter sechs Kacheln */ .qc-sicherheit { box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); } .qc-sicherheit__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: center; } .qc-sicherheit__kopf .qc-teil__kopf { margin-bottom: 0; } .qc-sicherheit > .qc-merkmale { margin-top: clamp(2rem, 4vw, 3rem); } .qc-sicherheit > .qc-weiter { margin-top: 2rem; } /* Start: „Alle Funktionen“ unter den Kacheln (SEO-Plan P0-B3, L-1). */ .qc-merkmale + .qc-weiter { margin-top: 2rem; } @media (min-width: 1024px) { .qc-sicherheit__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); } } .qc-code { max-width: 520px; justify-self: center; width: 100%; } /* Plattformen: Kacheln, darunter die Matrix */ .qc-teil--matrix .qc-merkmale + .qc-matrix { margin-top: clamp(2.5rem, 5vw, 4rem); } /* Kommt in 1.x: dunkles Band (Messfenster wie Gaming), ein goldenes Abzeichen, fünf Kacheln */ .qc-kommt { border-radius: 10px; overflow: hidden; border: 1px solid var(--qc-fenster-rand); } .qc-kommt.qc-dunkel > .qc-kommt__innen { padding: clamp(1.5rem, 4vw, 3rem); } .qc-kommt .qc-teil__kopf > .qc-kommt__abzeichen + h2 { margin-top: 0.875rem; } .qc-merkmale--5 { row-gap: 32px; } @media (min-width: 600px) { .qc-merkmale--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .qc-merkmale--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .qc-merkmale--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Am Handy kompakt: Zeichen links, Titel und Zeile rechts, damit die Übersicht kurz bleibt */ @media (max-width: 599px) { .qc-merkmale--kompakt { row-gap: 0; } .qc-merkmale--kompakt .qc-merkmal { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding-block: 16px; } .qc-merkmale--kompakt .qc-merkmal > :first-child { grid-row: 1 / span 2; width: 32px; height: 32px; } .qc-merkmale--kompakt .qc-taste svg { width: 30px; } .qc-merkmale--kompakt .qc-merkmal h3 { margin-top: 3px; font-size: 1.0625rem; } .qc-merkmale--kompakt .qc-merkmal p { margin-top: 3px; } } /* Läuft auf: kompakte Matrix */ .qc-matrix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } .qc-matrix table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; } .qc-matrix th, .qc-matrix td { text-align: left; vertical-align: middle; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-matrix thead th { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); border-bottom-color: var(--wp--preset--color--tinte-3); vertical-align: bottom; } .qc-matrix thead th .qc-sym { width: 28px; height: 28px; margin-bottom: 8px; } .qc-matrix tbody th { font-weight: 600; } .qc-matrix__grafik td, .qc-matrix__grafik thead th:not(:first-child) { text-align: center; width: 18%; } .qc-haken { display: inline-flex; vertical-align: middle; } .qc-haken .qc-sym { width: 26px; height: 26px; color: var(--wp--preset--color--signal); } .qc-stern { font-family: var(--qc-mono); font-size: 0.8125rem; color: var(--wp--preset--color--tinte-2); margin-left: 2px; vertical-align: super; } .qc-matrix__fussnote, .qc-matrix__unter { font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); max-width: 44rem; } .qc-matrix__fussnote { margin-top: -16px; } @media (min-width: 1024px) { .qc-matrix { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .qc-matrix__fussnote, .qc-matrix__unter { grid-column: 1 / -1; } .qc-matrix__unter { margin-top: -20px; } } /* System-Tabelle unter 600 px gestapelt: Zeilenkopf, darunter Mac und Windows mit Kennwort */ @media (max-width: 599px) { .qc-matrix__system thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .qc-matrix__system, .qc-matrix__system tbody, .qc-matrix__system tr { display: block; } .qc-matrix__system tr { padding-block: 12px; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-matrix__system tbody { border-top: 1px solid var(--wp--preset--color--tinte-3); } .qc-matrix__system th, .qc-matrix__system td { display: flex; align-items: center; gap: 12px; border: 0; padding: 3px 0; } .qc-matrix__system td::before { content: attr(data-label); flex: none; width: 5.5rem; font-family: var(--qc-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-matrix__grafik th, .qc-matrix__grafik td { padding-right: 6px; } } /* Was du brauchst */ .qc-liste-haken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--qc-raster-luecke); max-width: 64rem; } @media (min-width: 768px) { .qc-liste-haken { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qc-liste-haken li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding-block: 14px; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-liste-haken .qc-sym { width: 24px; height: 24px; color: var(--wp--preset--color--signal); margin-top: 1px; } /* Technische Daten, zugeklappt */ .qc-daten { border-top: 1px solid var(--wp--preset--color--tinte-3); border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-daten summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font-weight: 600; font-stretch: 106%; font-family: var(--qc-sans-108); font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); } .qc-daten summary::-webkit-details-marker { display: none; } .qc-daten summary::after { content: "+"; font-family: var(--qc-mono); font-weight: 400; font-size: 1.5rem; color: var(--wp--preset--color--tinte-3); } .qc-daten[open] summary::after { content: "\2212"; } .qc-daten summary:hover { color: var(--wp--preset--color--signal); } .qc-daten__liste { margin: 0 0 24px; } .qc-daten__liste > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding-block: 12px; border-top: 1px solid var(--wp--preset--color--linie); } .qc-daten__liste dt { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); padding-top: 0.2em; } .qc-daten__liste dd { margin: 0; max-width: 44rem; } @media (min-width: 600px) { .qc-daten__liste > div { grid-template-columns: 12rem minmax(0, 1fr); } } /* ---------------------------------------------------------------- Abzeichen-Reihe, Chips */ .qc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .qc-chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; font-size: 0.9375rem; line-height: 1.3; background: var(--wp--preset--color--flaeche); } .qc-chips--werte li { font-family: var(--qc-mono); font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 500; } .qc-chips--zeichen li { padding-left: 8px; } .qc-chips--zeichen .qc-sym { width: 24px; height: 24px; } /* ---------------------------------------------------------------- Karten mit Illustration (Film) */ .qc-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 768px) { .qc-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-karte { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); } .qc-karte__bild { margin: -4px -4px 8px; } .qc-karte h3 { font-size: 1.1875rem; } .qc-karte p { font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } /* Band mit Zeichen (Dein Netz) */ .qc-band { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 10px; border: 1px solid var(--wp--preset--color--linie-ui); } .qc-band .qc-teil__kopf { margin: 0; flex: 1 1 22rem; } /* Design, Foto, 3D */ .qc-design { position: relative; } .qc-design .qc-verlauf--klein { width: min(46%, 300px); margin: -28px 16px 0 auto; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 6px var(--qc-fenster), 0 0 0 7px var(--wp--preset--color--linie); } /* Formular-Abschnitt: Kopf links, Formular rechts */ .qc-formularblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; } .qc-formularblock__form { min-width: 0; max-width: 40rem; } .qc-teil--formular .qc-teil__kopf { margin-bottom: 0; } .qc-teil--formular { padding-block: var(--qc-abschnitt); } .qc-teil--formular + .qc-hinweiszeile { margin-top: calc(var(--qc-abschnitt) / -2); } @media (min-width: 1024px) { .qc-formularblock { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 5vw, 5rem); } .qc-formularblock > .qc-teil__kopf { position: sticky; top: 24px; } } .qc-formular__datenschutz { margin-top: 1rem; } .qc-hinweiszeile { padding-block: 0 var(--qc-abschnitt); } .qc-hinweiszeile p { padding-top: 20px; border-top: 1px solid var(--wp--preset--color--linie); color: var(--wp--preset--color--tinte-2); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; } .qc-hinweiszeile a { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .qc-hinweiszeile a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- Gaming: Schritte */ .qc-schritte { list-style: none; margin: 0; padding: 0; counter-reset: qc-schritt; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 768px) { .qc-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-schritt { counter-increment: qc-schritt; margin: 0; min-width: 0; padding: 20px; border-radius: 10px; border: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--flaeche); display: flex; flex-direction: column; gap: 14px; } .qc-schritt p { display: flex; gap: 12px; align-items: baseline; font-size: 1.0625rem; font-weight: 500; } .qc-schritt p::before { content: counter(qc-schritt); flex: none; font-family: var(--qc-mono); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--signal); } /* ---------------------------------------------------------------- Enterprise */ .qc-abzeichen.qc-abzeichen--titel { display: block; width: fit-content; margin-top: 0.15em; padding: 0; border: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: var(--wp--preset--color--hdr); white-space: normal; } .qc-team { max-width: 60rem; } .qc-plaene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } @media (min-width: 1024px) { .qc-plaene { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-plan { min-width: 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--tinte-3); } .qc-plan h3 { font-size: 1.1875rem; margin-bottom: 16px; } .qc-plan .qc-chips { flex-direction: column; align-items: flex-start; } /* ---------------------------------------------------------------- Relay-Server (16.10.2026) */ /* Animation der drei Wege (#how): Wahl über drei Radios, Bühne mit dem Punkt-Globus (Abschnitt „Bühne“ unten), * Schritte als echte Liste (alle sichtbar, der laufende Schritt mit Balken), Legende und Pause. Ohne :has() steht * das Standbild des vorgewählten Wegs (Relay), Wahl und Pause sind dann ausgeblendet. Ab 1024 px Bühne links, Wahl * und Text rechts. */ /* Abzeichen zu einem H1 mit Kennzeile (Relay): echter Text direkt nach dem H1, nicht darin (seiten.py, held()). Die Zeile ist so hoch wie das Abzeichen. */ .qc-held__abzeichen { display: flex; } .qc-relay { --qcr-an: var(--wp--preset--color--tinte); --qcr-aus: var(--wp--preset--color--tinte-3); --qcr-bar: var(--wp--preset--color--signal); --qcr-linie: var(--wp--preset--color--linie); position: relative; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; grid-template-areas: "wahl" "buehne" "texte" "unten"; } .qc-relay__wahl { grid-area: wahl; position: relative; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; background: var(--wp--preset--color--flaeche); } .qc-relay__radio, .qc-relay__pause input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } .qc-relay__wahl label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; min-width: 0; min-height: 56px; padding: 6px 8px; text-align: center; cursor: pointer; font-weight: 600; font-size: 0.9375rem; line-height: 1.2; color: var(--wp--preset--color--tinte); transition: background-color 0.15s, color 0.15s; } .qc-relay__wahl label ~ label { border-left: 1px solid var(--wp--preset--color--linie-ui); } .qc-relay__art { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-relay__wahl label:hover { color: var(--wp--preset--color--signal); } .qc-relay__wahl input:checked + label { background: var(--wp--preset--color--tinte); color: var(--qc-knopf-text); } .qc-relay__wahl input:checked + label .qc-relay__art { color: inherit; } .qc-relay__wahl input:focus-visible + label { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 2px; position: relative; z-index: 1; } @media (prefers-color-scheme: dark) { .qc-relay__wahl input:checked + label { background: #00E5FF; color: #05070D; } } /* Bühne (17.10.2026): Punkt-Globus, werkzeug/relay_welt.py und * assets/js/relay-welt.js. Immer dunkel wie ein App-Fenster, feines 16-px-Raster, festes Seitenverhältnis (4:3, unter * 600 px 1:1), darum kein Layout-Sprung. Darin: zwei Standbilder als SVG (je eins für 4:3 und 1:1, drei Ebenen für die * Wege), die Kugel (.qcw-glob, nur das Skript verschiebt sie) und zwei Leinwände. Ohne Skript und bei reduzierter * Bewegung steht das Standbild; läuft das Skript (.qcw-an), blendet es über. Die Farben stehen fest (immer dunkel). */ .qc-relay__buehne { grid-area: buehne; min-width: 0; box-sizing: border-box; border-radius: 10px; overflow: hidden; background: #05070D; border: 1px solid var(--qc-fenster-rand); } .qcw { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: #05070D; background-image: linear-gradient(to right, rgba(12, 19, 32, 0.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(12, 19, 32, 0.9) 1px, transparent 1px); background-size: 16px 16px; background-position: center; } .qcw > * { position: absolute; left: 0; top: 0; } .qcw-defs { width: 0; height: 0; overflow: hidden; } .qcw-still, .qcw canvas { display: block; width: 100%; height: 100%; } .qcw-still--hoch, .qcw-st { display: none; } .qcw-text { font-family: var(--qc-mono); } .qcw-glob { border-radius: 50%; transform-origin: 50% 50%; will-change: transform; pointer-events: none; background: radial-gradient(circle farthest-corner at 32.5% 27.5%, #0F1A29 0%, #060A12 50.47%); } .qcw-glob::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 255, 0) 86.2%, rgba(0, 229, 255, 0.14) 86.2%, rgba(0, 229, 255, 0) 100%); } .qcw-glob, .qcw canvas { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; } .qcw-still { transition: opacity 0.6s; } .qc-relay.qcw-an .qcw-glob, .qc-relay.qcw-an .qcw canvas { opacity: 1; visibility: visible; transition: opacity 0.6s, visibility 0s; } .qc-relay.qcw-an .qcw-still { opacity: 0; } /* Ebene des gewählten Wegs; ohne :has() die des vorgewählten (Relay) */ .qcw-st--relay { display: inline; } .qc-relay:has(#qcr-frei:checked) .qcw-st--relay, .qc-relay:has(#qcr-eigen:checked) .qcw-st--relay { display: none; } .qc-relay:has(#qcr-frei:checked) .qcw-st--frei, .qc-relay:has(#qcr-eigen:checked) .qcw-st--eigen { display: inline; } /* „Dein Server“ zeigt keine geplanten Orte (sein gestrichelter Rahmen hieße sonst „geplant“): Legende ohne den Eintrag, der Platz bleibt (kein Sprung) */ .qc-relay:has(#qcr-eigen:checked) .qc-relay__legende li:last-child { visibility: hidden; } @media (max-width: 599px) { .qcw { aspect-ratio: 1 / 1; } .qcw-still--breit { display: none; } .qcw-still--hoch { display: block; } } .qc-relay__texte { grid-area: texte; display: grid; min-width: 0; } .qc-relay__schritte { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; counter-reset: qcr; display: flex; flex-direction: column; gap: 2px; visibility: hidden; } .qc-relay__schritte--relay { visibility: visible; } .qc-relay:has(#qcr-frei:checked) .qc-relay__schritte--relay, .qc-relay:has(#qcr-eigen:checked) .qc-relay__schritte--relay { visibility: hidden; } .qc-relay:has(#qcr-frei:checked) .qc-relay__schritte--frei, .qc-relay:has(#qcr-eigen:checked) .qc-relay__schritte--eigen { visibility: visible; } .qc-relay__schritte li { counter-increment: qcr; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); margin: 0; padding: 7px 0 7px 12px; border-left: 3px solid var(--qcr-linie); color: var(--qcr-an); font-size: 1.0625rem; line-height: 1.45; transition: color 0.35s, border-color 0.35s; } /* Während das Skript läuft, ist der laufende Schritt hervorgehoben (.laeuft an der figure, .dran am Schritt). */ .qc-relay.laeuft .qc-relay__schritte li { color: var(--qcr-aus); } .qc-relay.laeuft .qc-relay__schritte li.dran { color: var(--qcr-an); border-left-color: var(--qcr-bar); } .qc-relay__schritte li::before { content: counter(qcr, decimal-leading-zero); font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; padding-top: 0.25em; } .qc-relay__unten { grid-area: unten; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; } .qc-relay__legende { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); } .qc-relay__legende li { display: flex; align-items: center; gap: 8px; margin: 0; } .qc-relay__legende svg { display: block; flex: none; width: 28px; height: 28px; } .qc-relay__pause { display: grid; place-items: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; cursor: pointer; border: 1px solid var(--wp--preset--color--linie-ui); background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--tinte); } .qc-relay__pause:hover { color: var(--wp--preset--color--signal); border-color: var(--wp--preset--color--signal); } .qc-relay__pause:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 3px; } .qc-relay__pause svg { display: block; fill: currentColor; } .qc-relay__spiel, .qc-relay__pause:has(input:checked) .qc-relay__halt { display: none; } .qc-relay__pause:has(input:checked) .qc-relay__spiel { display: inline; } /* Ohne Skript gibt es nichts anzuhalten: der Knopf behält seinen Platz (kein Sprung, wenn das Skript ihn zeigt). */ .qc-relay:not(.qcw-js) .qc-relay__pause { visibility: hidden; } @supports not selector(:has(*)) { .qc-relay__wahl, .qc-relay__pause { display: none; } } @media (prefers-reduced-motion: reduce) { .qc-relay__pause { display: none; } .qc-relay__wahl label, .qc-relay__schritte li, .qcw-still, .qcw-glob, .qcw canvas { transition: none; } } @media (min-width: 1024px) { .qc-relay { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 24px; grid-template-areas: "buehne wahl" "buehne texte" "buehne unten"; align-items: start; } .qc-relay__buehne { align-self: center; } .qc-relay__schritte li { font-size: 1.125rem; } .qc-relay__unten { align-self: end; } } @media (max-width: 599px) { .qc-relay__wahl label { min-height: 52px; padding-inline: 4px; font-size: 0.875rem; } .qc-relay__art { font-size: 0.625rem; letter-spacing: 0.06em; } } /* Drei Wege als Karten (#free, #relay, #self-hosted) */ .qc-wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px var(--qc-raster-luecke); } @media (min-width: 900px) { .qc-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-weg { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 24px; border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); scroll-margin-top: 16px; } .qc-weg__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .qc-weg__art { font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--signal); } .qc-weg h3 { font-size: 1.375rem; font-stretch: 108%; font-family: var(--qc-sans-108); } .qc-weg__text { font-size: 1rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } .qc-weg .qc-weiter { margin-top: auto; padding-top: 4px; } /* Deutschland: dunkles Band mit Umriss */ .qc-de { border-radius: 10px; overflow: hidden; border: 1px solid var(--qc-fenster-rand); } .qc-de__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); } .qc-de .qc-teil__kopf { margin-bottom: 0; } .qc-de .qc-aussage { margin-top: 28px; } .qc-de__karte { order: -1; width: min(150px, 42%); } @media (min-width: 900px) { .qc-de__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); } .qc-de__karte { order: 0; width: 100%; } } /* ---------------------------------------------------------------- Preise */ .qc-teil--preise .qc-angebote { margin-bottom: 32px; } .qc-gemeinsam { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; align-items: center; padding-block: 24px; border-top: 1px solid var(--wp--preset--color--linie); border-bottom: 1px solid var(--wp--preset--color--linie); margin-bottom: 24px; } .qc-gemeinsam svg { max-width: 360px; } .qc-gemeinsam p { font-size: 1.0625rem; max-width: 40rem; } @media (min-width: 768px) { .qc-gemeinsam { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } } .qc-teil--preise > .qc-klein, .qc-teil--preise > .qc-sandbox { margin-top: 8px; } .qc-teil--preise > .qc-weiter { margin-top: 12px; } /* Preisleiter: Einführungspreise als Treppe (Preise im Seitenkopf, Start im Preisband; Hinweis 3, 17.10.2026). * Die Stufen steigen nach rechts. Von Haus aus ist keine Stufe hervorgehoben (Prüfung 17.10.2026): Ohne Antwort des * Lizenzservers (Start, Server stumm, Zähler unbekannt) weiß die Seite nicht, welcher Preis gilt, und die Leiter nennt * nur die Regel. Hervorgehoben wird allein die Stufe mit der sichtbaren Marke „Jetzt“; kaufen.js zeigt sie an der * Stufe, die der Lizenzserver meldet, und blendet vergangene und ausverkaufte Stufen aus (hidden), ohne jede Stufe * die ganze Leiter (data-leiter). display der Marke darf das hidden-Attribut nicht aufheben. Nie durchgestrichen. */ .qc-leiter { margin: 0; min-width: 0; } .qc-leiter[hidden], .qc-leiter [hidden] { display: none !important; } .qc-leiter__kopf { display: block; margin-bottom: 14px; color: var(--wp--preset--color--tinte-2); } /* Spalten nach Zahl der sichtbaren Stufen: Blendet kaufen.js eine aus, bleibt keine Lücke. */ .qc-leiter__stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; } .qc-leiter__stufe { position: relative; margin: 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 14px; border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; background: var(--wp--preset--color--flaeche); } .qc-leiter__stufe--1 { min-height: 9rem; } .qc-leiter__stufe--2 { min-height: 11rem; } .qc-leiter__stufe--3 { min-height: 13rem; } .qc-leiter__name { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-2); overflow-wrap: break-word; } .qc-leiter__preis { font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem); font-weight: 600; font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .qc-leiter__bedingung { margin-top: auto; font-size: 0.875rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); } .qc-leiter .qc-leiter__jetzt { position: absolute; top: -11px; left: 12px; background: var(--wp--preset--color--papier); border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); } .qc-leiter .qc-leiter__stufe:has(> .qc-leiter__jetzt:not([hidden])) { border-color: var(--wp--preset--color--signal); box-shadow: inset 0 3px 0 var(--wp--preset--color--signal); } .qc-leiter .qc-leiter__stufe:has(> .qc-leiter__jetzt:not([hidden])) :is(.qc-leiter__name, .qc-leiter__preis) { color: var(--wp--preset--color--signal); } @media (max-width: 599px) { .qc-leiter__stufe { padding: 14px 10px 12px; } .qc-leiter__stufe--1 { min-height: 8rem; } .qc-leiter__stufe--2 { min-height: 9.5rem; } .qc-leiter__stufe--3 { min-height: 11rem; } } /* Unter 400 px (auch 320 px, Reflow nach WCAG 1.4.10) stehen die Stufen untereinander: Name und Bedingung links, der * Preis rechts. Drei schmale Spalten trennten dort „Founders“ mitten im Wort. */ @media (max-width: 399px) { .qc-leiter__stufen { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 14px; } .qc-leiter .qc-leiter__stufe { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px; } .qc-leiter__name { grid-column: 1; grid-row: 1; } .qc-leiter__bedingung { grid-column: 1; grid-row: 2; margin-top: 0; } .qc-leiter__preis { grid-column: 2; grid-row: 1 / span 2; } } /* Preise: Gibt es keine Einführungsstufe mehr (kaufen.js blendet die Leiter aus), steht der Kopf ohne Bildspalte. */ .qc-held__bild:has(> .qc-leiter[hidden]) { display: none; } @media (min-width: 1024px) { .qc-held:has(> .qc-held__bild > .qc-leiter[hidden]) { grid-template-columns: minmax(0, 1fr); } } /* Start: Preisband mit der Leiter rechts (ab 1024 px; der Knopf unter dem Text), am Handy Text, Leiter, Knopf. */ .qc-preisband__text .qc-klein { font-size: 0.875rem; } .qc-preisband .qc-leiter__stufe { background: var(--wp--preset--color--papier); } @media (min-width: 1024px) { .qc-preisband.qc-preisband--leiter { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "text leiter" "knopf leiter"; row-gap: 1.5rem; } .qc-preisband--leiter > .qc-preisband__text { grid-area: text; align-self: end; } .qc-preisband--leiter > .qc-leiter { grid-area: leiter; } .qc-preisband--leiter > .qc-knoepfe { grid-area: knopf; align-self: start; } } /* Lizenzserver (#licence-server; Hinweis 2, 17.10.2026): Fläche mit Kopf, vier Kacheln, Kleingedrucktes. */ .qc-lizenz { box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); } .qc-lizenz > .qc-lizenz__recht { margin-top: 28px; max-width: 48rem; } /* Enterprise-Karte (Start unter den Kacheln, Preise unter den Preiskarten; Hinweis 4, 17.10.2026): Zeichen, Titel mit * Abzeichen, ein Satz, ein Knopf. Goldene Oberkante wie das Abzeichen „Coming soon“. */ .qc-ent { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; align-items: center; box-sizing: border-box; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--wp--preset--color--linie-ui); border-top: 3px solid var(--wp--preset--color--hdr); border-radius: 8px; background: var(--wp--preset--color--flaeche); } .qc-ent__text > * + * { margin-top: 0.5rem; } .qc-ent__titel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 1.375rem; font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.25; } .qc-ent__text p { color: var(--wp--preset--color--tinte-2); max-width: 40rem; } @media (min-width: 768px) { .qc-ent { grid-template-columns: auto minmax(0, 1fr) auto; } } .qc-bildkacheln + .qc-ent { margin-top: 32px; } /* Preise: direkt unter #plans (ohne eigenen Abstand oben); das Seitenende bekommen jetzt die Fragen. */ .qc-teil--preise + .qc-teil--ent { padding-top: 0; } /* Fragen (details) */ .qc-fragen { max-width: 48rem; border-top: 1px solid var(--wp--preset--color--linie-ui); } .qc-fragen details { border-bottom: 1px solid var(--wp--preset--color--linie-ui); } .qc-fragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; } .qc-fragen summary::-webkit-details-marker { display: none; } .qc-fragen summary::after { content: "+"; margin-left: auto; padding-left: 12px; font-family: var(--qc-mono); font-weight: 400; font-size: 1.25rem; color: var(--wp--preset--color--tinte-3); } .qc-fragen details[open] summary::after { content: "\2212"; } .qc-fragen summary:hover { color: var(--wp--preset--color--signal); } .qc-fragen summary .qc-sym { width: 28px; height: 28px; } .qc-fragen details > p { margin: 0 0 18px; max-width: 40rem; color: var(--wp--preset--color--tinte-2); } .qc-teil--hilfe .qc-fragen details > p { padding-left: 42px; } .qc-teil--fragen { padding-bottom: calc(var(--qc-abschnitt) / 2); } .qc-teil--fragen:last-child { padding-bottom: var(--qc-abschnitt); } /* ---------------------------------------------------------------- Download */ .qc-plattformen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 768px) { .qc-plattformen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qc-plattform { margin: 0; min-width: 0; padding: 24px; border-radius: 10px; border: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--flaeche); display: flex; flex-direction: column; gap: 10px; } .qc-plattform h3 { margin-top: 8px; font-size: 1.375rem; font-stretch: 108%; font-family: var(--qc-sans-108); } .qc-plattform p { color: var(--wp--preset--color--tinte-2); } .qc-plattform .qc-plattform__stand { margin-top: auto; padding-top: 8px; font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--signal); } /* Erster Start: nur die beiden Knöpfe (Schlüssel, 7-Tage-Test), Bild 352 px breit, nie vergrößert * (Rahmen 1 px je Seite); am Handy fast 1:1, damit die Beschriftung lesbar bleibt. */ .qc-erststart { margin-top: 2rem; max-width: 354px; } /* Handbuch unter den Download-Knöpfen (22.10.2026): Weiter-Link auf die Sprachseite, daneben klein PDF und alle Sprachen * (der Link darin ist ein normaler Textlink, nicht der 44-px-Weiter-Link). */ .qc-held__text > .qc-handbuchlink { margin-top: 1rem; } .qc-handbuchlink__mehr { font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-weiter .qc-handbuchlink__mehr a { display: inline; min-height: 0; text-decoration: underline; } .qc-weiter .qc-handbuchlink__mehr a:hover { text-decoration-thickness: 2px; } /* ---------------------------------------------------------------- Download: Release Notes und Changelog (21.10.2026) */ /* Robert, 21.10.2026: „Ich will auf der Downloadseite ganz unten ReleaseNotes und ein Changelog. Mach es schick und * modern.“ Markup: werkzeug/seiten.py (VERSIONEN, release_notes(), changelog()). Ohne Skript, ohne Bewegung. * Die neueste Version als dunkle Karte wie die Messfenster (qc-dunkel: Logoleiste oben, Raster), darunter die Zeitleiste * aller Versionen; ältere klappen über details auf. Die Art einer Änderung steht als Wort in einer Marke (New, Fixed …); * das Feld davor trägt eine der vier Logofarben nur als Zierde, die Aussage trägt das Wort (WCAG 1.4.1). * Kontrast: in der Karte Text ab 7 : 1, in der Zeitleiste hell ab 5,1 : 1 (tinte-3 auf papier). */ .qc-teil--formular + .qc-teil--neu { padding-top: 0; } .qc-neu { border-radius: 10px; overflow: hidden; border: 1px solid var(--qc-fenster-rand); } .qc-neu.qc-dunkel > .qc-neu__innen { padding: clamp(1.5rem, 4vw, 3rem); } .qc-neu__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-neu__kopf > .qc-teil__kopf { margin: 0; } .qc-neu__stand, .qc-zeitleiste__stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .qc-neu__stand time, .qc-zeitleiste__stand time { font-family: var(--qc-mono); font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.06em; color: var(--wp--preset--color--tinte-2); } .qc-abzeichen.qc-abzeichen--aktuell { border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); } .qc-abzeichen.qc-abzeichen--leise { border-color: var(--wp--preset--color--linie-ui); color: var(--wp--preset--color--tinte-2); } /* Drei Höhepunkte: am Handy untereinander mit Linie, ab 900 px nebeneinander. */ .qc-neu__punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--qc-raster-luecke); } @media (min-width: 900px) { .qc-neu__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-neu__punkt { margin: 0; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 8px 16px; padding-block: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--wp--preset--color--linie); } @media (min-width: 900px) { .qc-neu__punkt { border-bottom: 0; } } .qc-neu__punkt > .qc-sym { grid-row: 1 / span 2; } .qc-neu__punkt h3 { font-size: 1.1875rem; line-height: 1.3; } .qc-neu__punkt h3 > .qc-art { display: flex; width: fit-content; margin-bottom: 10px; } .qc-neu__punkt p { font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); max-width: 24rem; } /* Hinweis für Windows mit 1.0.0 (Informationspflicht, § 327f BGB): Bernstein wie das dritte Logofeld, gut sichtbar. */ .qc-neu__hinweis { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; margin-top: clamp(1.25rem, 3vw, 2rem); padding: 20px clamp(16px, 3vw, 28px); border: 1px solid #3A2C08; border-left: 3px solid var(--qc-bernstein); border-radius: 8px; background: rgba(255, 179, 0, 0.07); } .qc-neu__hinweis > .qc-sym { color: var(--qc-bernstein); } .qc-neu__hinweis h3 { font-size: 1.125rem; line-height: 1.35; color: #FFFFFF; } .qc-neu__hinweis p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte); max-width: 44rem; } .qc-neu__hinweis .qc-knoepfe { margin-top: 16px; } @media (min-width: 900px) { .qc-neu__hinweistext { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; } .qc-neu__hinweistext > .qc-knoepfe { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } } /* Handy: kleinere Zeichen; der Hinweis einspaltig, sein Knopf in voller Breite (bricht sonst bei 320 px zweizeilig um). */ @media (max-width: 599px) { .qc-neu__punkt { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; } .qc-neu__punkt > .qc-sym, .qc-neu__hinweis > .qc-sym { width: 32px; height: 32px; } .qc-neu__hinweis { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .qc-neu__hinweis .qc-knopf { width: 100%; justify-content: center; text-align: center; } } /* Zeitleiste: links Marke und Linie, rechts Version, Tag und Änderungen. */ .qc-teil--verlauf { padding-bottom: var(--qc-abschnitt); } .qc-teil--verlauf .qc-teil__kopf { margin-bottom: 0; } .qc-zeitleiste { list-style: none; margin: 0; padding: 0; } .qc-zeitleiste__eintrag { position: relative; margin: 0; padding: 0 0 clamp(1.75rem, 4vw, 2.5rem) 36px; } .qc-zeitleiste__eintrag:last-child { padding-bottom: 0; } .qc-zeitleiste__eintrag::before { content: ""; position: absolute; left: 7px; top: 30px; bottom: 6px; width: 2px; background: var(--wp--preset--color--linie); } .qc-zeitleiste__eintrag:last-child::before { content: none; } /* Marke: ältere Versionen ein leeres Feld, die neueste das Logo im Kleinen (vier Felder in den Logofarben). */ .qc-zeitleiste__eintrag::after { content: ""; position: absolute; left: 0; top: 6px; box-sizing: border-box; width: 16px; height: 16px; border: 2px solid var(--wp--preset--color--tinte-3); border-radius: 3px; background: var(--wp--preset--color--papier); } .qc-zeitleiste__eintrag--neu::after { border: 0; background: linear-gradient(#00E5FF, #00E5FF) 2px 2px / 5px 5px no-repeat, linear-gradient(#FF2FB9, #FF2FB9) 9px 2px / 5px 5px no-repeat, linear-gradient(#FFB300, #FFB300) 2px 9px / 5px 5px no-repeat, linear-gradient(#D7E3EC, #D7E3EC) 9px 9px / 5px 5px no-repeat, #05070D; } .qc-zeitleiste__eintrag h3, .qc-zeitleiste__eintrag h4 { font-family: var(--qc-mono); font-weight: 600; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .qc-zeitleiste__stand { margin-top: 4px; } .qc-zeitleiste__stand time { color: var(--wp--preset--color--tinte-3); } /* Art der Änderung: Marke mit Feld in Logofarbe (neu Cyan, besser Magenta, behoben Bernstein, geändert Hellgrau). */ .qc-art { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 6px; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte); white-space: nowrap; } .qc-art::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--qc-art-farbe, var(--wp--preset--color--tinte-3)); } .qc-art--neu { --qc-art-farbe: var(--wp--preset--color--signal); } .qc-art--besser { --qc-art-farbe: var(--wp--preset--color--chroma); } .qc-art--behoben { --qc-art-farbe: var(--wp--preset--color--hdr); } .qc-art--geaendert { --qc-art-farbe: var(--wp--preset--color--tinte-2); } /* Änderungen einer Version: Marken in einer Spalte (Subgrid, ohne Subgrid stehen sie über dem Text), am Handy darüber. */ .qc-aenderungen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; max-width: 40rem; } .qc-aenderungen > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } .qc-aenderungen .qc-art { justify-self: start; } .qc-aenderungen--punkte > li::before { content: ""; align-self: start; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 1px; background: var(--wp--preset--color--tinte-3); } @media (max-width: 479px) { .qc-aenderungen { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } .qc-aenderungen > li { row-gap: 4px; } .qc-aenderungen--punkte { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; } } .qc-zeitleiste__mehr { margin-top: 6px; } .qc-zeitleiste__mehr summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; font-size: 0.9375rem; color: var(--wp--preset--color--signal); } .qc-zeitleiste__mehr summary::-webkit-details-marker { display: none; } .qc-zeitleiste__mehr summary::after { content: "+"; font-family: var(--qc-mono); font-weight: 400; font-size: 1.125rem; line-height: 1; } .qc-zeitleiste__mehr[open] summary::after { content: "\2212"; } .qc-zeitleiste__mehr summary:hover { text-decoration: underline; text-underline-offset: 0.2em; } .qc-zeitleiste__mehr > .qc-aenderungen { margin-top: 4px; } /* ---------------------------------------------------------------- Status & Updates (21.10.2026) */ /* Robert, 21.10.2026: Seite „Status & Updates“ mit dem Service-Status ganz oben, „Grün und safe“, darunter Sicherheit * mit dem Fix für PHP2Shell in Rot, dann die Release Notes. Markup: werkzeug/seiten.py (status_teil(), rn_sicherheit(), * rn_notes() mit rn_apps() und rn_server()); der Status kommt * von assets/js/status.js aus /status.json. Zustand nie nur als Farbe (WCAG 1.4.1): Wort je Dienst, Zeichen in der * Lampe (Haken, Ausrufezeichen, Kreuz, Fragezeichen) und Form des Punkts (Kreis, Raute, Quadrat, Ring). * Bewegung: der Puls nach jeder Prüfung (Ringe und Spur) läuft einmal und endet nach 2,6 s (WCAG 2.2.2), höchstens * einmal je Minute; endlos nur das Atmen der Lampe, solange wirklich geprüft wird. Unter prefers-reduced-motion keine. * Kontrast im Messfenster: Grün #34E08A 10,9 : 1, Gelb #FFD24A 13,4 : 1, Rot #FF7A70 7,4 : 1, Grau #8A9BAD 6,6 : 1 auf * #0C1320; der rote Eintrag: Weiß auf #B42318 6,5 : 1, Text ab 5,9 : 1 (hell) bzw. 7 : 1 (dunkel). */ .qc-teil--status { padding-top: clamp(0.5rem, 2vw, 1.5rem); } .qc-dienststatus { --qc-st-farbe: #8A9BAD; --qc-st-glut: rgba(138, 155, 173, 0.25); border-radius: 10px; overflow: hidden; border: 1px solid var(--qc-fenster-rand); } .qc-dienststatus[data-zustand="ok"], .qc-dienst[data-zustand="ok"] { --qc-st-farbe: #34E08A; --qc-st-glut: rgba(52, 224, 138, 0.35); } .qc-dienststatus[data-zustand="gestoert"], .qc-dienst[data-zustand="gestoert"] { --qc-st-farbe: #FFD24A; --qc-st-glut: rgba(255, 210, 74, 0.32); } .qc-dienststatus[data-zustand="ausfall"], .qc-dienst[data-zustand="ausfall"] { --qc-st-farbe: #FF7A70; --qc-st-glut: rgba(255, 122, 112, 0.35); } .qc-dienst[data-zustand="unbekannt"] { --qc-st-farbe: #8A9BAD; --qc-st-glut: rgba(138, 155, 173, 0.2); } .qc-dienst[data-zustand="bald"] { --qc-st-farbe: #5A6878; --qc-st-glut: transparent; } .qc-dienststatus.qc-dunkel > .qc-dienststatus__innen { padding: clamp(1.25rem, 4vw, 2.5rem); } .qc-dienststatus__kopf { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); } .qc-dienststatus__lampe { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; color: var(--qc-st-farbe); } .qc-dienststatus__lampe svg { position: relative; width: 52px; height: 52px; overflow: visible; filter: drop-shadow(0 0 12px var(--qc-st-glut)); } .qc-dienststatus__kern { fill: currentColor; fill-opacity: 0.14; stroke: currentColor; stroke-width: 2; } .qc-dienststatus__z { display: none; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } .qc-dienststatus[data-zustand="ok"] .qc-dienststatus__z--ok, .qc-dienststatus[data-zustand="gestoert"] .qc-dienststatus__z--gestoert, .qc-dienststatus[data-zustand="ausfall"] .qc-dienststatus__z--ausfall, .qc-dienststatus[data-zustand="unbekannt"] .qc-dienststatus__z--unbekannt { display: inline; } .qc-dienststatus__lampe i { position: absolute; inset: 10px; border: 2px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none; } .qc-dienststatus--puls .qc-dienststatus__lampe i { animation: qcs-ring 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) 1 both; } .qc-dienststatus--puls .qc-dienststatus__lampe i:nth-child(2) { animation-delay: 0.35s; } .qc-dienststatus--puls .qc-dienststatus__lampe i:nth-child(3) { animation-delay: 0.7s; } @keyframes qcs-ring { 0% { transform: scale(0.75); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } } .qc-dienststatus--prueft .qc-dienststatus__kern { animation: qcs-atmen 0.9s ease-in-out infinite alternate; } @keyframes qcs-atmen { from { fill-opacity: 0.08; } to { fill-opacity: 0.3; } } .qc-dienststatus__text { min-width: 0; } .qc-dienststatus .qc-dienststatus__h2 { margin: 0; } /* Farbe: cyan wie jede Kennzeile im dunklen Kasten (.qc-dunkel) */ .qc-dienststatus__titel { margin-top: 6px; font-family: var(--qc-sans-108); font-stretch: 108%; font-weight: 600; font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; } .qc-dienststatus__zeit { display: flex; flex-wrap: wrap; margin-top: 8px; font-family: var(--qc-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-dienststatus__vor { font-variant-numeric: tabular-nums; } .qc-dienststatus__vor:not(:empty)::after { content: "·"; margin-inline: 0.6em; color: var(--wp--preset--color--tinte-3); } /* Spur: ruhige Linie, bei jeder Prüfung zeichnet sich ein Herzschlag von links nach rechts (clip-path, die Strichstärke * bleibt mit non-scaling-stroke in jeder Breite gleich). */ .qc-dienststatus__spur { display: block; width: 100%; height: 44px; margin-block: clamp(14px, 3vw, 24px) clamp(10px, 2vw, 16px); color: var(--qc-st-farbe); overflow: visible; } .qc-dienststatus__grund { fill: none; stroke: #1E2A3A; stroke-width: 1; vector-effect: non-scaling-stroke; } .qc-dienststatus[data-zustand="unbekannt"] .qc-dienststatus__grund { stroke: #5A6878; stroke-dasharray: 4 6; } .qc-dienststatus__puls { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--qc-st-glut)); } .qc-dienststatus[data-zustand="unbekannt"] .qc-dienststatus__puls { display: none; } .qc-dienststatus--puls .qc-dienststatus__puls { animation: qcs-spur 2.6s cubic-bezier(0.35, 0, 0.25, 1) 1 both; } @keyframes qcs-spur { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Dienste: am Handy untereinander, ab 768 px zwei, ab 1100 px drei Spalten. */ .qc-dienststatus__dienste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } @media (min-width: 768px) { .qc-dienststatus__dienste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .qc-dienststatus__dienste { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-dienst { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; min-height: 52px; box-sizing: border-box; padding: 10px 14px; border: 1px solid #1E2A3A; border-radius: 8px; background: rgba(12, 19, 32, 0.9); } .qc-dienst__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--qc-st-farbe); box-shadow: 0 0 0 4px var(--qc-st-glut); } .qc-dienst[data-zustand="gestoert"] .qc-dienst__punkt { border-radius: 1px; transform: rotate(45deg) scale(0.9); } .qc-dienst[data-zustand="ausfall"] .qc-dienst__punkt { border-radius: 1px; } .qc-dienst[data-zustand="unbekannt"] .qc-dienst__punkt, .qc-dienst[data-zustand="bald"] .qc-dienst__punkt { box-sizing: border-box; background: transparent; border: 2px solid var(--qc-st-farbe); box-shadow: none; } .qc-dienst__name { min-width: 0; font-weight: 500; font-size: 0.9375rem; line-height: 1.35; color: var(--wp--preset--color--tinte); } .qc-dienst__wert { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .qc-dienst__zustand { font-family: var(--qc-mono); font-weight: 600; font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qc-st-farbe); white-space: nowrap; } .qc-dienst[data-zustand="bald"] .qc-dienst__zustand { color: inherit; } .qc-dienst__seit { font-family: var(--qc-mono); font-size: 0.6875rem; line-height: 1.3; color: var(--wp--preset--color--tinte-2); } .qc-dienst__seit:empty { display: none; } /* Sehr schmal (unter 360 px): Zustand unter den Namen, damit lange Namen („Vermittlungsdienst“) nicht dreifach trennen. */ @media (max-width: 359px) { .qc-dienst { grid-template-columns: 12px minmax(0, 1fr); row-gap: 4px; } .qc-dienst__wert { grid-column: 2; align-items: flex-start; text-align: left; } } /* Kontrastmodus (forced-colors): Hintergründe setzt das System, gefüllte Punkte verschwänden sonst. Die Form (Kreis, * Raute, Quadrat) bleibt, die Farbe ist die des Textes; Ringe (unbekannt, bald) zeichnet das System selbst. */ @media (forced-colors: active) { .qc-dienst:not([data-zustand="unbekannt"]):not([data-zustand="bald"]) .qc-dienst__punkt { forced-color-adjust: none; background: CanvasText; box-shadow: none; } } /* Sicherheit und Release Notes: Kopf links, rechts die rote Karte bzw. die Gruppen Apps und Server & Dienste (Kennzeile * als H3, darunter die Zeitleiste von Download mit den Versionen als H4, alle offen; die neueste mit Titel und Satz). */ .qc-teil--rn + .qc-teil--rn { padding-top: 0; } .qc-teil--rn .qc-teil__kopf .qc-weiter { margin-top: 0.75rem; } .qc-rn-gruppe { margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); color: var(--wp--preset--color--signal); } .qc-zeitleiste + .qc-rn-gruppe { margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--wp--preset--color--linie); } .qc-aenderung__titel { display: block; margin-bottom: 2px; font-weight: 600; color: var(--wp--preset--color--tinte); } /* Der kritische Eintrag (PHP2Shell): rote Karte, Marke „Kritisch“ mit Warnzeichen, Fakten, Quellen. */ .qc-kritisch { --qc-rot: #B42318; --qc-rot-grund: #FEF3F2; --qc-rot-rand: #F1B5AF; --qc-art-farbe: var(--qc-rot); } @media (prefers-color-scheme: dark) { .qc-kritisch { --qc-rot: #FF7A70; --qc-rot-grund: #1A1014; --qc-rot-rand: #5C2421; } } .qc-kritisch { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--qc-rot-rand); border-left: 4px solid var(--qc-rot); border-radius: 10px; background: var(--qc-rot-grund); scroll-margin-top: 16px; } /* Goldenes Band „Behoben“ mit grünem Schloss (oben in der Karte, über die volle Breite). */ .qc-kritisch { --qc-karte-rand: clamp(1.25rem, 3vw, 2rem); } .qc-kritisch__behoben { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: calc(-1 * var(--qc-karte-rand)) calc(-1 * var(--qc-karte-rand)) 18px; padding: 12px var(--qc-karte-rand); border-radius: 0 9px 0 0; border-bottom: 1px solid #A87A12; background: linear-gradient(100deg, #B8860B 0%, #E9B730 28%, #FFE08A 50%, #E9B730 72%, #B8860B 100%); color: #241800; } .qc-kritisch__behoben strong { font-family: var(--qc-mono); font-weight: 700; font-size: 0.875rem; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; } .qc-kritisch__behoben > span:last-child { font-size: 0.9375rem; line-height: 1.4; font-weight: 500; } .qc-kritisch__schlosskreis { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; color: #15803D; box-shadow: inset 0 0 0 2px #15803D, 0 1px 3px rgba(36, 24, 0, 0.35); } .qc-kritisch__schloss { display: block; } .qc-kritisch__behoben::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%); animation: qc-glanz 2.2s ease-out 0.5s 1 both; } @keyframes qc-glanz { to { transform: translateX(110%); } } @media (prefers-reduced-motion: reduce) { .qc-kritisch__behoben::after { display: none; animation: none; } } @media (forced-colors: active) { .qc-kritisch__behoben { border: 1px solid CanvasText; } .qc-kritisch__schlosskreis { box-shadow: none; border: 2px solid CanvasText; } } .qc-kritisch__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; } .qc-kritisch__marke { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 2px; background: #B42318; color: #FFFFFF; font-family: var(--qc-mono); font-weight: 600; font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } .qc-kritisch__zeichen { flex: none; display: block; } .qc-art.qc-art--sicherheit { border-color: var(--qc-rot-rand); } .qc-kritisch__tag time { font-family: var(--qc-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--wp--preset--color--tinte-2); } .qc-kritisch h3 { font-family: var(--qc-sans); font-weight: 600; font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); line-height: 1.25; letter-spacing: 0; font-variant-numeric: normal; color: var(--wp--preset--color--tinte); } .qc-kritisch__text { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--tinte-2); max-width: 40rem; } .qc-kritisch__fakten { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; } @media (min-width: 640px) { .qc-kritisch__fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qc-kritisch__fakten > div { min-width: 0; padding-top: 12px; border-top: 1px solid var(--qc-rot-rand); } .qc-kritisch__fakten dt { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qc-rot); } .qc-kritisch__fakten dd { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte); } .qc-kritisch__versionen { margin-top: 16px; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-kritisch__quellen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--qc-rot-rand); } .qc-kritisch__quellen ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; } .qc-kritisch__quellen li { margin: 0; font-family: var(--qc-mono); font-size: 0.8125rem; line-height: 1.4; color: var(--wp--preset--color--tinte-3); } .qc-kritisch__quellen a { display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { .qc-dienststatus__lampe i { display: none; } .qc-dienststatus--puls .qc-dienststatus__puls, .qc-dienststatus--prueft .qc-dienststatus__kern { animation: none; } } @media print { .qc-teil--status { display: none; } } /* ---------------------------------------------------------------- Presse */ .qc-kurztexte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } @media (min-width: 1024px) { .qc-kurztexte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .qc-kurztext { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--wp--preset--color--signal); } .qc-kurztext h3 { font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-kurztext p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.6; max-width: 42rem; } .qc-fakten { margin: 0; max-width: 64rem; border-top: 1px solid var(--wp--preset--color--tinte-3); } .qc-fakten > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding-block: 12px; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-fakten dt { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); padding-top: 0.2em; } .qc-fakten dd { margin: 0; max-width: 46rem; } @media (min-width: 600px) { .qc-fakten > div { grid-template-columns: 12rem minmax(0, 1fr); } } .qc-fakten + .qc-weiter { margin-top: 12px; } .qc-ueber { font-size: 1.125rem; max-width: 40rem; } .qc-pressebilder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--qc-raster-luecke); } @media (min-width: 600px) { .qc-pressebilder { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .qc-pressebilder { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-pressebild { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .qc-pressebild__vorschau { box-sizing: border-box; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border-radius: 8px; border: 1px solid var(--wp--preset--color--linie); background: var(--qc-fenster); } .qc-pressebild__vorschau img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } .qc-pressebild__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: 100%; } .qc-pressebild__paar img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; image-rendering: pixelated; } .qc-pressebild--pixel .qc-pressebild__vorschau { place-items: start; } .qc-pressebild--pixel .qc-pressebild__vorschau img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: none; object-position: 0 0; image-rendering: pixelated; } .qc-pressebild__leer { font: 600 1.125rem/1 var(--qc-mono); letter-spacing: 0.08em; color: #7D90A3; } .qc-pressebild figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; line-height: 1.45; } .qc-pressebild__text { font-weight: 600; } .qc-pressebild figcaption > span:not(.qc-pressebild__text) { font-family: var(--qc-mono); font-size: 0.8125rem; color: var(--wp--preset--color--tinte-3); } .qc-pressedatei { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--qc-mono); font-size: 0.8125rem; letter-spacing: 0.02em; } .qc-teil--pressebilder .qc-logos { margin-top: 40px; } .qc-teil--pressebilder > .qc-weiter { margin-top: 24px; } .qc-teil--pressebilder > .qc-klein { margin-top: 8px; } /* ---------------------------------------------------------------- Hilfe & Kontakt */ .qc-kontakt__mail { font-size: 1.25rem; font-weight: 600; } .qc-kontakt__adresse { font-style: normal; color: var(--wp--preset--color--tinte-2); line-height: 1.6; } /* Unter der Anschrift: Enterprise, Interesse melden (Hinweis 4, 17.10.2026). */ .qc-kontakt__adresse + .qc-weiter { margin-top: 0.5rem; } /* Sicherheit (#security, Ziel von security.txt): Band mit Schloss, Kennzeile, Frage, Mail und zwei Links zwischen * Fragen und Kontakt (Hinweis 1, 17.10.2026; vorher ein kleiner Abschnitt ganz am Ende). */ .qc-band--sicher { background: var(--wp--preset--color--flaeche); border-color: var(--wp--preset--color--linie); border-left: 3px solid var(--wp--preset--color--signal); } .qc-band__text { flex: 1 1 22rem; min-width: 0; } .qc-band__text > .qc-teil__kopf { margin-bottom: 0; } .qc-band__text > .qc-weiter { margin-top: 12px; } @media (prefers-reduced-motion: reduce) { .qc-vergleich__flaeche { animation: none; } .qc-bildkachel .qc-rahmen img, .qc-bildkachel .qc-rahmen { transition: none; } .qc-bildkachel:hover .qc-rahmen img { transform: none; } } /* ================================================================ Datenblatt-Tabellen */ .qc-datenblatt-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; } .qc-datenblatt, .qc-inhalt .wp-block-table table, .qc-recht__text table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; } .qc-datenblatt th, .qc-inhalt .wp-block-table th, .qc-recht__text th { text-align: left; vertical-align: bottom; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--tinte-3); padding: 0 16px 10px 0; border-bottom: 1px solid var(--wp--preset--color--tinte-3); } .qc-datenblatt td, .qc-inhalt .wp-block-table td, .qc-recht__text td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-datenblatt th[scope="row"] { font-family: var(--qc-sans); font-size: 0.9375rem; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--tinte); font-weight: 500; vertical-align: top; padding-top: 12px; border-bottom-color: var(--wp--preset--color--linie); } .qc-wert, .qc-datenblatt .qc-wert { font-family: var(--qc-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .qc-fussnote { font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); max-width: 40rem; } .qc-datenblatt caption { text-align: left; } /* Zweispaltige Datenblätter: feste erste Spalte, damit die Beschreibung in * jedem Abschnitt an derselben Stelle beginnt (strenges Raster). */ @media (min-width: 600px) { .qc-datenblatt--sp2 { table-layout: fixed; } .qc-datenblatt--sp2 tr > :first-child { width: 11rem; } } /* Ab drei Spalten gestapelt statt seitlich scrollend, sobald die Hülle * schmaler als 600 px ist (Containerabfrage: Die Hardware-Tabelle braucht * gut 586 px, bei 600 px Fensterbreite bleiben ihr nur 568): der Zeilenkopf * als Überschrift, darunter Kennwort (data-label) und Wert. Die Kennwörter * hängen links als Float, so passt jeder Zelleninhalt daneben. */ .qc-datenblatt-huelle { container-type: inline-size; } @container (max-width: 599px) { .qc-datenblatt--gestapelt, .qc-datenblatt--gestapelt tbody, .qc-datenblatt--gestapelt tr { display: block; width: 100%; } .qc-datenblatt--gestapelt thead { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .qc-datenblatt--gestapelt tbody { border-top: 1px solid var(--wp--preset--color--tinte-3); } .qc-datenblatt--gestapelt tr { padding-block: 14px 10px; border-bottom: 1px solid var(--wp--preset--color--linie); } /* 6 px rechts: Die gestrichelten Prüfmarken (box-decoration-break: clone) * ragen am Zeilenende sonst ein paar Pixel über die Zelle hinaus. */ .qc-datenblatt--gestapelt th[scope="row"] { display: block; padding: 0 6px 6px 0; border: 0; font-weight: 600; } .qc-datenblatt--gestapelt td { display: flow-root; padding: 3px 6px 3px calc(8.5rem + 16px); border: 0; } .qc-datenblatt--gestapelt td::before { content: attr(data-label); float: left; width: 8.5rem; margin-left: calc(-8.5rem - 16px); padding-top: 0.25em; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.45; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--tinte-3); hyphens: manual; -webkit-hyphens: manual; } } /* ================================================================ Kästen und Platzhalter */ .qc-kasten { border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; padding: 20px 24px; max-width: 40rem; background: var(--wp--preset--color--flaeche); } .qc-kasten > * + * { margin-top: 0.75rem; } .qc-status { border-left: 2px solid var(--wp--preset--color--signal); } .qc-platzhalter { border: 1px dashed var(--wp--preset--color--platzhalter); background: var(--wp--preset--color--platzhalter-grund); color: var(--wp--preset--color--platzhalter); border-radius: 2px; padding: 0.05em 0.4em; font-family: var(--qc-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; hyphens: manual; } .qc-platzhalter__label { letter-spacing: 0.08em; } .qc-platzhalter--block { display: block; padding: 12px 16px; margin-block: 1rem; max-width: 40rem; } .qc-platzhalter--block .qc-platzhalter__label { display: block; margin-bottom: 4px; } /* ================================================================ Kaufseite (Kasse) */ /* Aufbau „Bühne + Klar“ (19.10.2026) am Ende der Datei (Abschnitt „Kaufseite: Bühne + Klar“). Hier nur, was auch die * Testseiten der Kasse (qc-arbeit/kasse-test, nur der Inhalt von [qc_kauf]) und andere Seiten brauchen. */ .qc-kauf [hidden] { display: none !important; } .qc-kauf__ansicht:focus { outline: none; } .qc-knopf:disabled, .qc-knopf:disabled:hover { opacity: 0.45; cursor: not-allowed; color: var(--qc-knopf-text); } .qc-knopf--zweit:disabled, .qc-knopf--zweit:disabled:hover { color: var(--wp--preset--color--tinte); } .qc-testmodus { border-left: 2px solid var(--wp--preset--color--platzhalter); } .qc-testmodus .qc-label { color: var(--wp--preset--color--platzhalter); } /* Testkauf (Sandbox): auch die Erfolgsansicht trägt sichtbar „Testmodus“. */ .qc-kauf--test .qc-kauf__testmarke { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 6px 12px; border-radius: 2px; border: 1px dashed var(--wp--preset--color--platzhalter); background: var(--wp--preset--color--platzhalter-grund); color: var(--wp--preset--color--platzhalter); } /* ================================================================ Angebote (Preisseite) */ /* Drei Karten: Einmalkauf (mit Einführungspreisen und Zähler), Abo monatlich, Abo * jährlich, als Liste mit je einem Knopf zur Kaufseite. Die Kaufseite hat seit dem * 19.10.2026 eigene Karten (qc-tarif, Abschnitt „Kaufseite: Bühne + Klar“). */ .qc-angebote { list-style: none; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .qc-angebote > legend { padding: 0; margin-bottom: 12px; } /* Einführungspreise und Zähler sind bis zur Antwort des Lizenzservers versteckt; * display: flex der Karten-Teile darf das hidden-Attribut nicht aufheben. */ .qc-angebote [hidden] { display: none !important; } @media (min-width: 1100px) { .qc-angebote { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-angebot { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; background: var(--wp--preset--color--papier); } .qc-angebot > * { margin: 0; } .qc-angebot--einmal { border-top: 2px solid var(--wp--preset--color--tinte); } .qc-angebot__kopf { display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; line-height: 1.35; } .qc-angebot__kopf label { cursor: pointer; } .qc-angebot__kopf input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--wp--preset--color--tinte); cursor: pointer; } .qc-angebot__name { font-weight: 600; } .qc-angebot__art { display: block; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-angebot__preis { display: flex; flex-direction: column; gap: 2px; } .qc-angebot__betrag { font-size: 1.75rem; font-weight: 600; font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.2; font-variant-numeric: tabular-nums; } .qc-angebot__alt { font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--tinte-2); margin-inline-start: 0.35em; } .qc-angebot__preis small { font-size: 0.875rem; color: var(--wp--preset--color--tinte-2); } .qc-angebot__aktion { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-left: 2px solid var(--wp--preset--color--signal); background: var(--wp--preset--color--flaeche); } .qc-angebot__aktion .qc-label { color: var(--wp--preset--color--tinte); } .qc-angebot__zaehler { font-size: 0.9375rem; font-variant-numeric: tabular-nums; } .qc-angebot__balken { display: block; height: 4px; background: var(--wp--preset--color--linie); border-radius: 2px; overflow: hidden; } .qc-angebot__balken > span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--signal); } .qc-angebot__liste { padding-inline-start: 1.1rem; font-size: 0.9375rem; color: var(--wp--preset--color--tinte-2); } .qc-angebot__liste li + li { margin-block-start: 0.3rem; } .qc-angebot__knopf { margin-top: auto; padding-top: 4px; } .qc-angebot__knopf .qc-knopf { width: 100%; justify-content: center; flex-wrap: wrap; gap: 2px 0.6em; padding-block: 8px; text-align: center; } .qc-angebot__knopf .qc-knopf__text { white-space: nowrap; } .qc-angebot__knopf .qc-bald-kasten { width: 100%; justify-content: center; } /* „Testmodus“ im Zweitknopf: Farbe der Schrift statt der des Hauptknopfs. */ .qc-knopf--zweit .qc-bald { color: var(--wp--preset--color--tinte-2); } /* ================================================================ Preiskarten und Kasse (Umbau Teil B) */ /* Preisseite: drei Karten */ .qc-angebote > .qc-angebot { padding: 24px; border-radius: 10px; background: var(--wp--preset--color--flaeche); gap: 14px; } .qc-angebote > .qc-angebot--einmal { border-color: var(--wp--preset--color--tinte); box-shadow: inset 0 3px 0 var(--wp--preset--color--signal); } .qc-angebote > .qc-angebot > .qc-sym { width: 36px; height: 36px; } .qc-angebote .qc-angebot__kopf { flex-direction: column; gap: 4px; font-size: 1.25rem; } .qc-angebot__preis > span:not([hidden]) { display: flex; flex-direction: column; gap: 2px; } .qc-angebote .qc-angebot__betrag { font-size: clamp(2.25rem, 2vw + 1.5rem, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; } .qc-angebot__bedingung { font-size: 0.875rem; line-height: 1.45; color: var(--wp--preset--color--tinte-2); } .qc-angebot__vorteil { width: fit-content; padding: 3px 8px; border: 1px solid var(--wp--preset--color--hdr); border-radius: 2px; font-family: var(--qc-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--hdr); } .qc-angebote .qc-angebot__liste { list-style: none; padding: 0; margin-top: 4px; } .qc-angebote .qc-angebot__liste li { position: relative; padding-left: 24px; } .qc-angebote .qc-angebot__liste li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 5px; border-left: 2px solid var(--wp--preset--color--signal); border-bottom: 2px solid var(--wp--preset--color--signal); transform: rotate(-45deg); } /* Einführungspreis an/aus (kaufen.js): Die Fassung, die gerade nicht gilt, hält ihren Platz, nur * unsichtbar (visibility, auch für Screenreader weg). So springt nichts, wenn der Zähler antwortet * (Review 12.10.: CLS 0,13 auf der Kaufseite; dort seit 19.10.2026 qc-stapel). Auf der Preisseite haben beide Preise * dieselbe Höhe, Bedingung und Zähler halten Platz. */ .qc-angebote .qc-angebot__bedingung[data-aktion][hidden] { display: block !important; visibility: hidden; } .qc-angebote .qc-angebot__aktion[data-aktion][hidden] { display: flex !important; visibility: hidden; } /* Schwelle des Zählers (Robert, 29.10.2026): Unter ZAEHLER_AB vergebenen Plätzen steht der Kasten mit dem Kopf der * Stufe; Restzahl und Balken (data-zaehler) halten darin ihren Platz unsichtbar, damit nichts springt, wenn sie kommen. */ .qc-angebote .qc-angebot__aktion > [data-zaehler][hidden] { display: block !important; visibility: hidden; } /* Stufen der Einführungspreise (Founders Deal, Early Bird; kaufen.js zeigt die, die der Lizenzserver meldet): * Bedingungen und Köpfe des Zählers liegen je übereinander, die Zelle ist so hoch wie die längste Fassung. */ .qc-angebot__bedingungen, .qc-angebot__stufen { display: grid; } .qc-angebot__bedingungen > *, .qc-angebot__stufen > * { grid-area: 1 / 1; } .qc-angebote .qc-angebot__stufen > [data-aktion][hidden] { display: block !important; visibility: hidden; } /* ================================================================ 404 */ .qc-404 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: clamp(3rem, 8vw, 6rem) var(--qc-abschnitt); align-items: center; } .qc-404__text > * + * { margin-top: 1.5rem; } .qc-404__text > .qc-knoepfe { margin-top: 2rem; } .qc-404__zeichen { display: flex; justify-content: center; } .qc-404__zeichen .qc-logo { width: min(240px, 56vw); height: auto; } @media (min-width: 1024px) { .qc-404 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } /* ================================================================ Rechtstexte */ .qc-haupt--recht .qc-inhalt { padding-block: clamp(3rem, 8vw, 5rem) var(--qc-abschnitt); } .qc-recht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .qc-recht__inhalt { display: none; } .qc-recht__text { max-width: 40rem; } .qc-recht__text > * + * { margin-block-start: 1rem; } .qc-recht__text h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); font-stretch: 108%; font-family: var(--qc-sans-108); } .qc-recht__text h2 { font-size: 1.375rem; font-stretch: 104%; margin-block-start: 2.75rem; scroll-margin-top: 16px; } .qc-recht__text h3 { font-size: 1.0625rem; margin-block-start: 1.75rem; } .qc-recht__text ol, .qc-recht__text ul { padding-inline-start: 1.25rem; } .qc-recht__text li + li { margin-top: 0.5rem; } /* Unterpunkte a), b) … in einem nummerierten Absatz (AGB 7.3), hängend eingerückt */ .qc-recht__text .qc-punkt { display: block; margin-top: 0.5rem; padding-inline-start: 1.5em; text-indent: -1.5em; } .qc-stand { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } @media (min-width: 1024px) { .qc-recht { grid-template-columns: 14rem minmax(0, 40rem); column-gap: 64px; } .qc-recht__inhalt { display: block; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; } .qc-recht__inhalt ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--wp--preset--color--linie); } .qc-recht__inhalt li { margin: 0; } .qc-recht__inhalt a { display: block; padding: 5px 0 5px 12px; font-family: var(--qc-mono); font-size: 0.75rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); text-decoration: none; } .qc-recht__inhalt a:hover { color: var(--wp--preset--color--signal); } } /* ================================================================ Fuß */ .qc-fuss { position: relative; background: var(--wp--preset--color--papier); padding-block: 64px 32px; } .qc-fuss::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(var(--wp--preset--color--linie), var(--wp--preset--color--linie)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 64px) 0 0 / 100% 8px no-repeat; } .qc-fuss__spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } @media (min-width: 600px) { .qc-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--qc-raster-luecke); } } /* Ab 1024 px vier Spalten in einer Reihe: Produkt, Einsatz, QuadChroma, Soziale Projekte (25.10.2026). */ @media (min-width: 1024px) { .qc-fuss__spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Knopfleiste ganz oben im Fuß: „Verträge hier kündigen“ und „Vertrag widerrufen“ * (§ 312k, § 356a BGB). Echte Knöpfe mit Kontrastrahmen und Eckklammern in der * Signalfarbe, auf jeder Seite gleich; unter 600 px volle Breite, untereinander. */ .qc-fuss__knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 48px; } .qc-fuss__knopf { --c: var(--wp--preset--color--signal); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 24px; border: 1px solid var(--wp--preset--color--signal); border-radius: 2px; background-color: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--tinte); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; text-align: center; background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-size: 10px 3px, 3px 10px, 10px 3px, 3px 10px, 10px 3px, 3px 10px, 10px 3px, 3px 10px; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; } .qc-fuss__knopf:hover { color: var(--wp--preset--color--signal); text-decoration: underline; text-underline-offset: 0.2em; } @media (max-width: 599px) { .qc-fuss__knoepfe { flex-direction: column; } .qc-fuss__knopf { width: 100%; } } .qc-fuss__spalte ul { list-style: none; margin: 12px 0 0; padding: 0; } .qc-fuss__spalte li { margin: 0; } .qc-fuss__spalte a { display: inline-flex; align-items: center; min-height: 36px; color: var(--wp--preset--color--tinte); text-decoration: none; font-size: 0.9375rem; } .qc-fuss__spalte a:hover { color: var(--wp--preset--color--signal); text-decoration: underline; } /* Instagram (24.10.2026): eigenes Inline-Symbol in currentColor vor dem Text, folgt Hell/Dunkel und Hover */ .qc-fuss__spalte a.qc-fuss__sozial { gap: 8px; } .qc-fuss__sozial .qc-instagram { flex: none; } /* Zeile der Rechtstexte unter den Spalten */ .qc-fuss__recht { margin-top: 32px; } .qc-fuss__recht ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; } .qc-fuss__recht li { margin: 0; } .qc-fuss__recht a { display: inline-flex; align-items: center; min-height: 36px; color: var(--wp--preset--color--tinte); text-decoration: none; font-size: 0.9375rem; } .qc-fuss__recht a:hover { color: var(--wp--preset--color--signal); text-decoration: underline; } .qc-fuss__unten { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--linie); font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--tinte-3); } .qc-fuss__unten > p { max-width: 48rem; } .qc-fuss__unten > * + * { margin-top: 8px; } .qc-fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 20px !important; } .qc-fuss__urheber { display: inline-flex; align-items: center; gap: 8px; } .qc-fuss__sprache { font-family: var(--qc-mono); font-size: 0.75rem; letter-spacing: 0.12em; } .qc-fuss__sprache a { color: var(--wp--preset--color--tinte-3); text-decoration: none; display: inline-block; padding: 12px 4px; } .qc-fuss__sprache a.is-aktiv { color: var(--wp--preset--color--tinte); } /* NVIDIA Inception (Robert, 29.10.2026; Regeln: README, „NVIDIA Inception“): QuadChroma-Zeichen mit * Wortmarke, daneben das Badge. Badge 44 px hoch, davon der sichtbare Rahmen 33,6 px (NVIDIA: mindestens 30 px) und das * grüne Augenquadrat 13,7 px. So viel Freiraum braucht der Rahmen rundum: 5,2 px bringt die SVG als transparenten Rand * mit, den Rest geben Lücke und Abstände (überall mindestens 16 px um das Bild). Das Zeichen (36 px) ist höher als der * Rahmen, das Lockup fast doppelt so breit: Das Badge ist nie größer als das Logo. Hell und dunkel dieselbe Farbfassung * mit eigenem weißen Feld, nie Filter oder Deckkraft darauf. Wird es eng, rutscht das Badge unter das Logo. */ .qc-fuss__marken { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; } .qc-fuss__marke { min-height: 0; } .qc-fuss__inception { flex: none; display: block; width: auto; height: 44px; max-width: none; } /* Bestätigungsseiten Kündigen und Widerrufen (patterns/fuss.php, qc_formularseite()): nur die Zeile * „Impressum · Datenschutz“, klein und direkt unter dem Knopf, auf Widerrufen davor „Verträge hier kündigen“. * Kein Lineal, kein Abstand nach oben (den Abstand zum Knopf gibt .qc-formular-seite). */ .qc-fuss--formular { padding-block: 0 48px; } .qc-fuss--formular::before { content: none; } .qc-fuss--formular .qc-fuss__knoepfe { margin-bottom: 16px; } .qc-fuss__recht--zeile { margin-top: 0; } .qc-fuss__recht--zeile ul { gap: 0; } .qc-fuss__recht--zeile li { display: inline-flex; align-items: center; } .qc-fuss__recht--zeile li + li::before { content: "·"; padding-inline: 10px; color: var(--wp--preset--color--tinte-3); } .qc-fuss__recht--zeile a { font-size: 0.8125rem; color: var(--wp--preset--color--tinte-2); } /* ================================================================ Abzeichen, Sandbox-Zeile */ .qc-abzeichen { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--wp--preset--color--hdr); border-radius: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--hdr); white-space: nowrap; } .qc-sandbox { font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--tinte-3); max-width: 40rem; } .qc-angebot__einfuehrung { font-size: 0.875rem; line-height: 1.45; color: var(--wp--preset--color--tinte-2); } .qc-angebot__abo { font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--tinte-2); } /* ================================================================ Patentanmeldungen (Robert, 17.10.2026) */ /* Alles nur bei PATENT_ANGEMELDET = '1' (inc/werte.php; werkzeug/seiten.py, „Patentanmeldungen“). Statisches HTML ohne * Skript: nichts springt beim Laden. */ /* Abzeichen „Patents pending“ / „Zum Patent angemeldet“ in der Signalfarbe (Funktionen #technology). */ .qc-abzeichen--patent { border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); } /* Band direkt unter dem Kopf der Startseite: dunkel wie die Bildrahmen, eine Zeile in Mono, „Patents pending.“ in * App-Cyan, ganz ein Link auf Funktionen #technology. Am Handy zwei Zeilen. Kontrast #D7E3EC und #00E5FF auf #05070D * über 12 : 1. */ .qc-patentband { background: var(--qc-fenster); border-bottom: 1px solid var(--qc-fenster-rand); } .qc-patentband__innen { margin-block: 0; } .qc-patentband a { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 48px; padding-block: 10px; font-family: var(--qc-mono); font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--qc-fenster-text); text-decoration: none; hyphens: manual; -webkit-hyphens: manual; } .qc-patentband a > span { min-width: 0; } .qc-patentband strong { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qc-cyan); white-space: nowrap; } .qc-patentband a:hover > span, .qc-patentband a:focus-visible > span { text-decoration: underline; text-underline-offset: 0.2em; } .qc-patentband a:focus-visible { outline-color: var(--qc-cyan); outline-offset: -2px; } .qc-patentband__zeichen { flex: none; display: block; width: 18px; height: 18px; } .qc-patentband .qc-pfeil { flex: none; margin: 0; color: var(--qc-cyan); } @media (max-width: 599px) { .qc-patentband a { gap: 10px; font-size: 0.8125rem; } } /* Schmalste Handys (320 px): ohne das Zeichen passt „Neuartige Übertragungstechnik,“ in die erste Zeile (sonst stand * „Neuartige“ allein, vier Zeilen); die Schrift bleibt 13 px. */ @media (max-width: 359px) { .qc-patentband__zeichen { display: none; } } /* Funktionen #technology: Band mit dem 4:4:4-Zeichen, Abzeichen, H2 (der abgestimmte Satz) und Einladung zur Lizenzierung. */ .qc-band--technik { background: var(--wp--preset--color--flaeche); border-color: var(--wp--preset--color--linie); border-left: 3px solid var(--wp--preset--color--signal); } .qc-technik__zeichen { flex: none; display: block; width: 56px; height: 56px; } .qc-technik__abzeichen { display: flex; } .qc-teil__kopf > .qc-technik__abzeichen + h2 { margin-top: 0.875rem; } /* Einladung zur Lizenzierung (mailto): Funktionen (Presse seit 19.10.2026 mit der Firmen-Karte im Block #technology). */ .qc-lizenzierung { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; max-width: 40rem; hyphens: manual; -webkit-hyphens: manual; } .qc-lizenzierung a { font-weight: 600; } .qc-band__text > .qc-lizenzierung { margin-top: 16px; } .qc-lizenzierung + .qc-weiter { margin-top: 8px; } /* Fuß: „Patents pending“ in der Urheberzeile, Link auf die Technik-Seite. */ .qc-fuss__patent { font-family: var(--qc-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--signal); text-decoration: none; white-space: nowrap; } .qc-fuss__patent:hover { text-decoration: underline; text-underline-offset: 0.2em; } /* Punkt und Link brechen nur zusammen um; am Handy eigene Zeile ohne Punkt (sonst hing der Punkt am Zeilenende). */ .qc-fuss__anmeldung { white-space: nowrap; } @media (max-width: 599px) { .qc-fuss__anmeldung { display: block; } .qc-fuss__trenner { display: none; } } /* ================================================================ Technik (Robert, 17.10.2026) */ /* Seite /technology/ (/de/technik/, dunkel wie Gaming), Band auf Start, Aufhänger auf Presse. Alles statisch bis auf die * beiden Illustrationen (assets/js/technik.js über dem Standbild im HTML): feste Seitenverhältnisse, nichts springt. * Patent-Bezüge nur über [qc_nur] im Inhalt. */ /* Menü: „Technology“ / „Technik“ ganz vorn mit dem Vier-Felder-Zeichen davor. Das Zeichen steht außerhalb des Textflusses * (absolut, in der Lücke zum Logo), die Breite des Menüs bleibt wie mit sechs Punkten. Im Overlay ohne Zeichen. */ .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-seite--technik > .wp-block-navigation-item__content::before { content: ""; position: absolute; left: -15px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: linear-gradient(#00E5FF, #00E5FF) 0 0 / 4px 4px no-repeat, linear-gradient(#FF2FB9, #FF2FB9) 5px 0 / 4px 4px no-repeat, linear-gradient(#FFB300, #FFB300) 0 5px / 4px 4px no-repeat, linear-gradient(var(--wp--preset--color--tinte-3), var(--wp--preset--color--tinte-3)) 5px 5px / 4px 4px no-repeat; } /* Kopf der Technik-Seite: „Patents pending.“ als zweite Zeile des H1 in App-Cyan (nur mit dem Schalter). */ .qc-h1-patent { display: block; color: var(--qc-cyan); } .qc-held--technik h1 { max-width: 11.916em; } /* Ab 1024 px steht der Kopf zweispaltig: Die Schrift folgt der Spalte, damit „angemeldet.“ (Technik) und „Reinzoomen“ * (Funktionen) bis etwa 1190 px nicht mitten im Wort umbrechen (Review 18.10.: bei 1024 px „angemelde / t.“); danach wieder * die volle Größe. */ @media (min-width: 1024px) { .qc-held--technik h1, .qc-held--funktionen h1 { font-size: clamp(2.75rem, 5.7vw, 4.25rem); } } /* Illustration: Bühne immer dunkel, zwei Bahnen (je Name und SVG 5 : 1), darunter „Illustration“ und Pause. */ .qc-demo { margin: 0; min-width: 0; display: grid; gap: 12px; } .qc-demo__buehne { display: grid; gap: clamp(12px, 2.4vw, 22px); padding: clamp(14px, 3vw, 26px); border-radius: 10px; color-scheme: dark; background: #070B13; border: 1px solid #243042; box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.04); } .qc-demo__bahn { min-width: 0; } .qc-demo__name { margin: 0 0 8px; font: 500 0.6875rem/1.3 var(--qc-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8A9BAD; } .qc-demo__bahn--mit .qc-demo__name { color: #00E5FF; } .qc-demo__svg { display: block; width: 100%; height: auto; overflow: visible; } /* Im Takt: Das Zeichen taucht in der Bahn auf und verschwindet dort wieder (weiche Ränder), nie über die Bühne hinaus. */ .qct { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .qc-demo__legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; line-height: 1.4; color: #A3B3C2; } .qc-demo__legende li { margin: 0; display: flex; align-items: center; gap: 8px; } .qc-demo__legende svg { display: block; flex: none; } .qc-demo__unten { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px; } .qc-demo__marke { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; font: 500 0.6875rem/1.3 var(--qc-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte-2); } .qc-demo__halt { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } .qc-demo__pause { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; cursor: pointer; border: 1px solid var(--wp--preset--color--linie-ui); background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--tinte); } .qc-demo__pause:hover { color: var(--wp--preset--color--signal); border-color: var(--wp--preset--color--signal); } .qc-demo__pause:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 3px; } .qc-demo__pause svg { display: block; fill: currentColor; } .qc-demo__spiel-zeichen, .qc-demo__pause:has(input:checked) .qc-demo__halt-zeichen { display: none; } .qc-demo__pause:has(input:checked) .qc-demo__spiel-zeichen { display: inline; } /* Ohne Skript gibt es nichts anzuhalten: der Knopf behält seinen Platz (kein Sprung, wenn das Skript ihn zeigt). */ .qc-demo:not(.qc-demo--js) .qc-demo__pause { visibility: hidden; } @supports not selector(:has(*)) { .qc-demo__pause { display: none; } } @media (prefers-reduced-motion: reduce) { .qc-demo__pause { display: none; } } /* Kennziffer: große Zahl, was sie misst, der Vergleich und der Beleg direkt darunter. */ .qc-kennziffer { min-width: 0; padding-top: 18px; border-top: 1px solid var(--wp--preset--color--linie); display: flex; flex-direction: column; gap: 10px; } .qc-kennziffer > p { margin: 0; } .qc-kennziffer__kopf { display: flex; flex-direction: column; gap: 10px; } .qc-kennziffer__wert { font-weight: 600; font-stretch: 112%; font-family: var(--qc-sans-112); letter-spacing: -0.02em; line-height: 1; font-size: clamp(2.75rem, 4.5vw + 1rem, 4.5rem); font-variant-numeric: tabular-nums; color: var(--qc-cyan); white-space: nowrap; } .qc-kennziffer__was { font-family: var(--qc-mono); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte); } .qc-kennziffer__ohne { font-size: 0.9375rem; line-height: 1.45; font-weight: 500; color: var(--wp--preset--color--tinte-2); } .qc-kennziffer__beleg { font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--tinte-3); max-width: 34rem; } /* Band auf Start und Aufhänger auf Presse: dunkle Fläche wie „Kommt in 1.x“. */ .qc-technik { border-radius: 10px; overflow: hidden; border: 1px solid var(--qc-fenster-rand); } .qc-technik__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 56px; padding: clamp(1.5rem, 4vw, 3.5rem); } /* Unten so viel Luft wie oben (sonst gälte der Abschnittsabstand der dunklen Seiten, .qc-dunkel > :last-child). */ .qc-technik.qc-dunkel > .qc-technik__innen { padding-bottom: clamp(1.5rem, 4vw, 3.5rem); } .qc-technik__text { min-width: 0; } .qc-technik__text > .qc-teil__kopf { margin-bottom: 0; } .qc-technik__text > .qc-knoepfe, .qc-technik__text > .qc-weiter { margin-top: 1.75rem; } .qc-technik__zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 28px var(--qc-raster-luecke); } /* Presse: die Kennziffern unter dem Text (bis 1023 px) bzw. rechts daneben. */ .qc-technik__innen--geschichte > .qc-technik__zahlen { grid-column: 1 / -1; } @media (min-width: 1024px) { .qc-technik__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .qc-technik__zahlen { grid-column: 1 / -1; } .qc-technik__innen--geschichte { grid-template-columns: 56px minmax(0, 6fr) minmax(0, 5fr); gap: 32px 40px; align-items: start; } .qc-technik__innen--geschichte > .qc-technik__zahlen { grid-column: auto; grid-template-columns: minmax(0, 1fr); } } .qc-teil--geschichte .qc-teil__kopf { max-width: 50rem; } .qc-teil--geschichte h2 { max-width: 20em; } /* Erfindungen: Text links, Kennziffern bzw. Illustration rechts (ab 1024 px). */ .qc-erfindung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 0; } .qc-erfindung__text > .qc-teil__kopf { margin-bottom: 0; } .qc-erfindung__text > .qc-chips { margin-top: 1.5rem; } .qc-erfindung__zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 28px var(--qc-raster-luecke); align-content: start; } @media (min-width: 1024px) { .qc-erfindung { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; } .qc-erfindung--bild { grid-template-areas: "text bild" "zahlen bild"; row-gap: 40px; } .qc-erfindung--bild .qc-erfindung__text { grid-area: text; } .qc-erfindung--bild .qc-erfindung__bild { grid-area: bild; align-self: center; } .qc-erfindung--bild .qc-erfindung__zahlen { grid-area: zahlen; } } .qc-teil--erfindung + .qc-teil--erfindung { border-top: 1px solid var(--wp--preset--color--linie); } /* Von Grund auf gebaut: Fläche mit Text und dem Umriss von Deutschland (Delitzsch markiert). */ .qc-heimat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: center; box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); } .qc-heimat__text > .qc-teil__kopf { margin-bottom: 0; } .qc-heimat__text > .qc-chips { margin-top: 1.5rem; } .qc-heimat__karte { width: min(220px, 64%); justify-self: center; } .qc-heimat__ort { margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: 500 0.75rem/1.4 var(--qc-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte); } .qc-heimat__koordinaten { color: var(--qc-cyan); letter-spacing: 0.04em; } @media (min-width: 768px) { .qc-heimat { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); } .qc-heimat__karte { width: 100%; } } /* Ringe um Delitzsch: dreimal, dann still (unter 5 s, WCAG 2.2.2); bei reduzierter Bewegung gar nicht. */ .qch-ring { transform-box: fill-box; transform-origin: center; animation: qch-ring 1.6s ease-out 3; } .qch-ring--2 { animation-delay: 0.4s; } @keyframes qch-ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.25); opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .qch-ring { animation: none; } } /* Presse und Firmen: zwei Karten. */ .qc-gespraeche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qc-raster-luecke); } @media (min-width: 768px) { .qc-gespraeche { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qc-gespraech { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 10px; background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); } .qc-gespraech > * { margin: 0; } .qc-gespraech .qc-kennzeile { font-size: 0.75rem; line-height: 1.4; color: var(--wp--preset--color--signal); } .qc-gespraech h3 { font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem); font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.15; } .qc-gespraech p:not(.qc-kennzeile) { font-size: 1.0625rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } .qc-gespraech .qc-weiter { margin-top: auto; padding-top: 8px; } .qc-gespraech--firmen { border-left: 3px solid var(--wp--preset--color--signal); } /* Presse #technology (19.10.2026): die zwei Erfindungen als Karten, darunter patent.line (nur mit dem Schalter) und die Firmen-Karte. Ohne den Satz stehen die beiden Listen mit dem Rasterabstand untereinander. */ .qc-teil--presse-technik .qc-gespraeche + .qc-gespraeche { margin-top: var(--qc-raster-luecke); } .qc-presse-patent { margin: 28px 0; padding-left: 16px; border-left: 2px solid var(--wp--preset--color--signal); max-width: 40rem; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; } .qc-presse-patent strong { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--signal); white-space: nowrap; } /* ================================================================ Formulare */ /* Bestätigungsseiten (Kündigen, Widerrufen): nur H1 und Formular; darunter folgt gleich die Rechtszeile im Fuß. */ .qc-formular-seite { padding-block: 0 24px; } .qc-formular-seite > * + * { margin-block-start: 2rem; } .qc-hash { font-family: var(--qc-mono); font-size: 0.75rem; overflow-wrap: anywhere; } .qc-formular-huelle { max-width: 40rem; } .qc-formular-huelle [hidden] { display: none !important; } .qc-formular-huelle > * + * { margin-block-start: 1.5rem; } .qc-formular { display: flex; flex-direction: column; gap: 1.5rem; } .qc-formular > * { margin: 0; } .qc-feld { display: flex; flex-direction: column; gap: 6px; margin: 0; } .qc-feld > label, .qc-gruppe > legend { font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--tinte); } .qc-feld__hinweis { font-size: 0.875rem; line-height: 1.45; color: var(--wp--preset--color--tinte-2); } .qc-formular input[type="text"], .qc-formular input[type="email"], .qc-formular input[type="url"], .qc-formular input[type="date"], .qc-formular select, .qc-formular textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--tinte); font-family: var(--qc-sans); font-size: 1rem; line-height: 1.4; } .qc-formular textarea { min-height: 9rem; resize: vertical; } .qc-formular input[type="date"] { max-width: 16rem; } .qc-formular :is(input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 2px; } .qc-formular [aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) { border-color: var(--wp--preset--color--chroma); box-shadow: inset 0 0 0 1px var(--wp--preset--color--chroma); } .qc-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qc-gruppe > legend { padding: 0; margin-bottom: 6px; } .qc-wahl { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; } .qc-wahl input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--wp--preset--color--tinte); cursor: pointer; } .qc-wahl label { cursor: pointer; padding-block: 10px; line-height: 1.35; } .qc-feld--folge { margin: 4px 0 8px 32px; } .qc-feld__fehler { display: block; font-size: 0.875rem; line-height: 1.45; font-weight: 500; color: var(--wp--preset--color--chroma); } @media (prefers-color-scheme: dark) { .qc-wahl input { accent-color: #00E5FF; } } /* Honigtopf: für Menschen unsichtbar und nicht erreichbar, für Formular-Roboter ein Feld. */ .qc-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .qc-formular__fehlerliste, .qc-formular__meldung { border: 1px solid var(--wp--preset--color--linie-ui); border-left: 2px solid var(--wp--preset--color--chroma); border-radius: 2px; padding: 16px 20px; background: var(--wp--preset--color--flaeche); } .qc-formular__fehlerliste:focus { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 2px; } .qc-formular__fehlerliste ul { margin: 8px 0 0; padding-inline-start: 1.25rem; } .qc-formular__fehlerliste li + li { margin-top: 4px; } .qc-formular__meldung > * + * { margin-top: 0.75rem; } .qc-formular__stand { color: var(--wp--preset--color--tinte-2); } .qc-formular__danke { border-left: 2px solid var(--wp--preset--color--signal); } .qc-formular__danke h2, .qc-beleg h2 { font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem); } .qc-formular__danke h2:focus, .qc-beleg h2:focus { outline: none; } .qc-formular__adresse { font-style: normal; } /* Beleg einer Kündigung bzw. eines Widerrufs: Messfenster-Rahmen mit Eckwinkeln. */ .qc-beleg { position: relative; box-sizing: border-box; max-width: 44rem; padding: 32px 24px 24px; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; background: var(--wp--preset--color--flaeche); --ecke: var(--wp--preset--color--signal); } .qc-beleg::after { content: ""; position: absolute; inset: 6px; pointer-events: none; background-image: linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)), linear-gradient(var(--ecke), var(--ecke)); background-repeat: no-repeat; background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; } .qc-beleg > * + * { margin-top: 1rem; } .qc-beleg__inhalt { margin: 1.5rem 0 0; border-top: 1px solid var(--wp--preset--color--tinte-3); } .qc-beleg__inhalt > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding-block: 10px; border-bottom: 1px solid var(--wp--preset--color--linie); } .qc-beleg__inhalt dt { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); padding-top: 0.2em; } .qc-beleg__inhalt dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; } @media (min-width: 600px) { .qc-beleg__inhalt > div { grid-template-columns: 11rem minmax(0, 1fr); } } .qc-beleg__knoepfe { margin-top: 1.5rem !important; } /* ================================================================ Druck */ @media print { .qc-kopf-teil, .qc-fuss-teil, .qc-recht__inhalt, .qc-sprung, .qc-sprungmarken { display: none !important; } /* Nach einer Kündigung bzw. einem Widerruf druckt die Seite nur den Beleg. */ .qc-beleg-aktiv body * { visibility: hidden; } .qc-beleg-aktiv .qc-beleg, .qc-beleg-aktiv .qc-beleg * { visibility: visible; } .qc-beleg-aktiv .qc-beleg { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; background: #fff; color: #000; } .qc-beleg__knoepfe { display: none !important; } body { background: #fff; color: #000; } .qc-recht { display: block; } .qc-recht__text { max-width: none; } a { color: #000; } .qc-platzhalter { border: 1px dashed #000; background: none; color: #000; } /* Kurzfassung der Datenschutzerklärung: gedruckt eine Seite. Nur sie trägt die Überschrift #daten; ohne :has() druckt sie länger. */ .qc-haupt--recht:has(#daten) .qc-inhalt { padding-block: 0; } .qc-recht__text:has(> #daten) { font-size: 7.85pt; line-height: 1.18; } .qc-recht__text:has(> #daten) > * + * { margin-block-start: 0.6mm; } .qc-recht__text:has(> #daten) h1 { font-size: 13pt; } .qc-recht__text:has(> #daten) h2 { font-size: 9pt; margin-block-start: 1.3mm; } .qc-recht__text:has(> #daten) li + li { margin-top: 0.2mm; } .qc-recht__text:has(> #daten) table { font-size: 7.1pt; line-height: 1.14; table-layout: fixed; } .qc-recht__text:has(> #daten) th, .qc-recht__text:has(> #daten) td { font-size: 7.1pt; padding: 0.3mm 1.2mm 0.3mm 0; letter-spacing: 0; } .qc-recht__text:has(> #daten) th:nth-child(1) { width: 8%; } .qc-recht__text:has(> #daten) th:nth-child(2) { width: 44%; } .qc-recht__text:has(> #daten) th:nth-child(3) { width: 14%; } .qc-recht__text:has(> #daten) th:nth-child(4) { width: 34%; } } /* Feinschliff nach Sichtprüfung */ .qc-datenblatt .qc-wert { white-space: nowrap; } /* Overlay-Menü: Einträge links, Sprachwahl in einer Zeile, Download darunter */ .qc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; width: 100%; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start !important; width: 100%; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { flex-direction: row !important; align-items: center !important; justify-content: flex-start; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-sprache { flex: 0 0 auto; width: auto; margin-top: 24px; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-sprache--de { margin-inline-start: 0; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-nav-download { flex: 0 0 100%; margin-top: 16px; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-nav-download > .wp-block-navigation-item__content { min-height: 48px; padding: 0 20px; } @media (min-width: 1024px) { .qc-recht.qc-recht--ohne { grid-template-columns: 14rem minmax(0, 40rem); } .qc-recht--ohne .qc-recht__text { grid-column: 2; } } /* Zeilenabstand im offenen Menü 16 statt 24 px: Mit dem sechsten Punkt („Relay-Server“, 16.10.2026) steht der Knopf * „Kostenlos testen“ bei 375 × 812 so noch ganz im Bild. Mit weniger Höhe (Browserleisten echter Handys) scrollt * das Overlay ohnehin; 12 px brächten dort nichts. */ .qc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { column-gap: 0 !important; row-gap: 16px !important; } /* Im Overlay steht „DE“ bündig unter den Menünummern: Der 44 px breite Link * ragt dafür 13 px nach links in den Rand, so bleiben „DE / EN“ gleich weit. */ .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-sprache--de { margin-inline-start: -13px; } .qc-nav .wp-block-navigation__responsive-container.is-menu-open .qc-sprache > .wp-block-navigation-item__content { justify-content: center; padding-inline: 8px; } /* Formulare: Kästchengruppen (Interessen) */ .qc-gruppe__teil { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; } .qc-gruppe__teil > legend { padding: 0; margin-bottom: 2px; } .qc-gruppe__spalten { columns: 2 16rem; column-gap: 24px; } .qc-gruppe__spalten > .qc-gruppe__teil { break-inside: avoid; } .qc-gruppe__spalten > .qc-gruppe__teil:first-child { margin-top: 0; } .qc-gruppe__teil .qc-wahl { align-items: flex-start; } .qc-gruppe__teil .qc-wahl input { margin-top: 11px; } .qc-formular input[type="checkbox"] { flex: none; } .qc-logos { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 768px) { .qc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .qc-logo-karte { margin: 0; min-width: 0; border: 1px solid var(--wp--preset--color--linie-ui); border-radius: 2px; overflow: hidden; background: var(--wp--preset--color--flaeche); } .qc-logo-karte__flaeche { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .qc-logo-karte__flaeche--hell { background: #F5F6F7; } .qc-logo-karte__flaeche--dunkel { background: #05070D; } .qc-logo-karte__flaeche img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; } .qc-logo-karte__text { padding: 12px 16px 8px; } .qc-logo-karte__titel { font-weight: 600; margin-bottom: 2px !important; } .qc-logo-karte__text p { margin: 0; } /* ================================================================ Seitenvariante qc-dunkel (Gaming, Hero Film & Medien) */ /* Nur der Inhaltsbereich: Messfenster-Hintergrund, App-Farben Cyan/Magenta als * Akzente. Die Farb-Tokens werden lokal umgesetzt, darum passen alle Bausteine * von selbst. Kontrast: Text #D7E3EC/#A3B3C2/#7D90A3 auf #05070D ab 6,5 : 1. */ .qc-dunkel { --wp--preset--color--papier: #05070D; --wp--preset--color--flaeche: #0C1320; --wp--preset--color--tinte: #D7E3EC; --wp--preset--color--tinte-2: #A3B3C2; --wp--preset--color--tinte-3: #8A9BAD; --wp--preset--color--linie: #1E2A3A; --wp--preset--color--linie-ui: #5A6878; --wp--preset--color--signal: #00E5FF; --wp--preset--color--chroma: #FF5CC8; --wp--preset--color--hdr: #FFD24A; --qc-knopf-text: #05070D; --qc-knopf-hover: #05070D; --qc-fenster-rand: #243042; color-scheme: dark; position: relative; color: var(--wp--preset--color--tinte); background-color: #05070D; background-image: linear-gradient(to right, rgba(12, 19, 32, 0.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(12, 19, 32, 0.9) 1px, transparent 1px); background-size: 16px 16px; } /* Logofarben als Leiste am oberen Rand */ .qc-dunkel::before { content: ""; display: block; height: 4px; background: linear-gradient(to right, #00E5FF 0 25%, #FF2FB9 25% 50%, #FFB300 50% 75%, #D7E3EC 75% 100%); } .qc-dunkel .qc-kennzeile { color: #00E5FF; } .qc-dunkel .qc-knopf:not(.qc-knopf--zweit) { background-color: #00E5FF; color: #05070D; } .qc-dunkel .qc-knopf:not(.qc-knopf--zweit):hover { background-color: #D7E3EC; color: #05070D; } .qc-dunkel .qc-knopf--zweit:hover { color: #00E5FF; } .qc-dunkel .qc-wahl input, .qc-dunkel .qc-kauf__zustimmung input { accent-color: #00E5FF; } .qc-dunkel .qc-kasten { background: #0C1320; } .qc-dunkel > .qc-seitenkopf { padding-top: clamp(2.5rem, 7vw, 5rem); } .qc-dunkel > :last-child { padding-bottom: var(--qc-abschnitt); } @media print { .qc-dunkel { background: none; color: #000; } .qc-dunkel::before { display: none; } } .qc-dunkel > * { margin-block: 0; } /* Kopf mit sieben Menüpunkten, Konto, Sprache und Knopf „Kostenlos testen“ / „Try it free“: zwischen * 1024 und 1279 px enger setzen, damit alles in einer Zeile bleibt (Deutsch ist die längere Fassung). Nur das * geschlossene Menü: Im Overlay (bis 1159 px bzw. 1089 px, siehe unten) gelten die Abstände des Overlays, sonst * rückte „EN“ dort 12 px aus der Fluchtlinie der Menüpunkte. */ @media (min-width: 1024px) and (max-width: 1279px) { .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { column-gap: 12px; } .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-nav-konto > .wp-block-navigation-item__content { padding-inline-start: 12px; } .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-sprache--en { margin-inline-start: -12px; } .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-nav-download > .wp-block-navigation-item__content { padding: 0 14px; } .qc-wortmarke { letter-spacing: 0.16em; } } /* Deutsch auch ab 1280 px mit den engen Abständen: Der Inhalt endet bei 75rem, mit den weiten Abständen bliebe dem * deutschen Menü dort zu wenig Luft (mit sechs Punkten und „Relay-Server“ 5 px; mit den engen Abständen und sieben * Punkten 126 px, Messung 18.10.2026). */ @media (min-width: 1280px) { .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { column-gap: 12px; } .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-nav-konto > .wp-block-navigation-item__content { padding-inline-start: 12px; } .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-sprache--en { margin-inline-start: -12px; } .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .qc-nav-download > .wp-block-navigation-item__content { padding: 0 14px; } } /* Sieben Menüpunkte seit 18.10.2026 (Technik vorn, Enterprise wieder im Kopf, „Relay“ statt „Relay-Server“; Robert: * „Wir kürzen auf Relay“). In Chrome gemessen passt das Menü in eine Zeile: Englisch ab 1048 px, mit klassischem * Scrollbalken (Windows, 17 px) ab 1065 px; Deutsch ab 1120 px, mit Scrollbalken ab 1137 px. Darum zeigt der Kopf auf * englischen Seiten bis 1089 px, auf deutschen bis 1159 px den Menüknopf mit Sprachwahl daneben, wie bis 1023 px * (danach mit 17-px-Scrollbalken 25 bzw. 23 px Luft, ohne 42 bzw. 40 px; vorher bis 1039 bzw. 1139 px). Die Schrift * bleibt, nur der Umschaltpunkt wandert. */ @media (min-width: 1024px) and (max-width: 1089px) { .qc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .qc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .qc-kopf__sprache:not(.qc-kopf__sprache--immer) { display: flex; } } @media (min-width: 1090px) and (max-width: 1159px) { .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .qc-sprache-de .qc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .qc-sprache-de .qc-kopf__sprache:not(.qc-kopf__sprache--immer) { display: flex; } } /* ================================================================ Kaufseite: Bühne + Klar (Entwurf B+C, 19.10.2026) */ /* Robert, 19.10.2026: „Ja, perfekt“. Bauliste und Messungen: qc-arbeit/rework-kasse-mails/entwurf-bc/NOTIZEN.md; * Markup: werkzeug/seiten.py (kaufen()). Dunkle Bühne (Kennzeile, H1, Szene, Schritte, Zusicherungen), darunter links * die Angebotskarten, rechts das dunkle Pult, nach dem Kauf Lizenzkarte und drei Schritte. Bühne, Pult und Lizenzkarte * nehmen die Farben von .qc-dunkel; der Abschnitt steht am Ende der Datei, damit seine Abstände bei gleicher * Spezifität vor denen von .qc-dunkel gelten. * Bewegung: jede läuft von selbst nur einmal und endet nach höchstens 5 s (WCAG 2.2.2, darum kein Pause-Knopf; * pruefen.py rechnet nach: Dauer × Wiederholungen + Verzögerung), unter prefers-reduced-motion keine. Endlos nur die * Ladeanzeigen (qc-puls, qc-schimmer), und die stehen nur da, solange wirklich geladen wird. * Platz halten (CLS): Die Antwort des Lizenzservers kommt bis zu 8 s nach dem Laden. Preis- und Bedingungsfassungen * liegen übereinander (qc-stapel), Leiter und Zähler halten ihren Platz auch versteckt (visibility statt display). */ :root { --qc-leiste: linear-gradient(to right, #00E5FF 0 25%, #FF2FB9 25% 50%, #FFB300 50% 75%, #D7E3EC 75% 100%); --qc-signal-hauch: rgba(0, 112, 138, 0.07); --qc-chroma-hauch: rgba(176, 22, 124, 0.07); --qc-wahl-rand: #0B1017; --qc-glanz-breite: 2px; } @media (prefers-color-scheme: dark) { :root:root { --qc-signal-hauch: rgba(0, 229, 255, 0.06); --qc-chroma-hauch: rgba(255, 92, 200, 0.08); --qc-wahl-rand: #D7E3EC; --qc-glanz-breite: 1.5px; } } .qc-buehne, .qc-pult, .qc-lizenzkarte { --wp--preset--color--linie: #243042; --wp--preset--color--linie-ui: #7D90A3; --wp--preset--color--raster: #131C2A; --wp--preset--color--platzhalter: #FFB35C; --wp--preset--color--platzhalter-grund: #241805; --qc-signal-hauch: rgba(0, 229, 255, 0.07); --qc-chroma-hauch: rgba(255, 92, 200, 0.08); } /* Winkel des Leuchtrands; ohne @property steht der Rand still (−330° und 30° zeigen dasselbe). */ @property --qc-winkel { syntax: ''; inherits: false; initial-value: 30deg; } .qc-zeichensatz { position: absolute; width: 0; height: 0; overflow: hidden; } .qc-kz { display: block; flex: none; width: 20px; height: 20px; } /* 1-px-Linie mit Strichen wie .qc-lineal-oben, als eigener Block (Pult, „Gut zu wissen“). */ .qc-pult__lineal, .qc-kauf-gut__lineal { height: 8px; background: linear-gradient(var(--wp--preset--color--linie), var(--wp--preset--color--linie)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(to right, var(--wp--preset--color--linie) 0 1px, transparent 1px 64px) 0 0 / 100% 8px no-repeat; } /* ---------------------------------------------------------------- Bühne: dunkel, Raster, Vierfarbleiste, Szene */ .qc-buehne { border-bottom: 1px solid #1E2A3A; } .qc-buehne::before { transform-origin: left; animation: qc-leiste 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1 backwards; } @keyframes qc-leiste { from { transform: scaleX(0); } to { transform: none; } } .qc-buehne > .qc-buehne__innen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "szene" "schritte" "zusagen"; gap: 10px; padding-block: 12px 10px; } .qc-buehne__text { grid-area: text; } .qc-buehne h1 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); line-height: 1.04; } .qc-buehne h1 > .qc-kennzeile { margin-block-end: 10px; } .qc-buehne .qc-einleitung { margin-top: 8px; max-width: 34rem; font-size: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem); line-height: 1.5; } /* Schrittleiste: kaufen.js setzt aria-current am laufenden Schritt und .fertig an den erledigten (schritt()). */ .qc-kaufschritte { grid-area: schritte; list-style: none; margin: 0; padding: 0; max-width: 36rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .qc-kaufschritte[hidden] { display: none; } .qc-kaufschritte li { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding-top: 10px; border-top: 2px solid #243042; font-size: 0.875rem; line-height: 1.3; color: var(--wp--preset--color--tinte-3); transition: color 0.3s; } .qc-kaufschritte li::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--wp--preset--color--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .qc-kaufschritte__nr { display: flex; align-items: center; gap: 6px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1; letter-spacing: 0.12em; } .qc-kaufschritte__nr .qc-kz { display: none; width: 12px; height: 12px; } .qc-kaufschritte li[aria-current="step"], .qc-kaufschritte li.fertig { color: var(--wp--preset--color--tinte); } .qc-kaufschritte li[aria-current="step"] { font-weight: 500; } .qc-kaufschritte li[aria-current="step"]::before, .qc-kaufschritte li.fertig::before { transform: none; } .qc-kaufschritte li[aria-current="step"] .qc-kaufschritte__nr, .qc-kaufschritte li.fertig .qc-kaufschritte__nr { color: var(--wp--preset--color--signal); } .qc-kaufschritte li.fertig { color: var(--wp--preset--color--tinte-2); } .qc-kaufschritte li.fertig .qc-kz { display: block; } /* Szene: zwei Rechner, ein Schlüssel (werkzeug/svg/kaufen-szene.svg). Licht nur als Linie, keine Lichtkegel. Am Handy * ohne Kopfzeile und flacher (Bild höchstens 300 px breit), damit die Kasse höher steht. */ .qc-szene { grid-area: szene; position: relative; min-width: 0; margin: 0; padding: 8px 8px 6px; border: 1px solid #1E2A3A; border-radius: 10px; background: rgba(7, 11, 19, 0.92); } .qc-szene::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.75), transparent); } .qc-szene__kopf { display: none; position: absolute; top: 6px; left: 10px; right: 10px; justify-content: space-between; gap: 12px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.625rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #8A9BAD; } .qc-szene svg { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; } .qc-szene__hosts { display: none; } .qc-szene figcaption { margin-top: 4px; text-align: center; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--wp--preset--color--tinte-2); } @media (min-width: 400px) { .qc-szene figcaption { letter-spacing: 0.06em; } } @media (min-width: 640px) { .qc-szene { padding-top: 24px; } .qc-szene__kopf { display: flex; } .qc-szene svg { max-width: none; } .qc-szene__hosts { display: flex; justify-content: space-around; gap: 12px; margin-top: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #8A9BAD; } .qc-szene__hosts span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .qc-szene__hosts i { width: 6px; height: 6px; border-radius: 50%; background: #00E5FF; } } /* Verbindungslinien laufen viermal (3,6 s), der Ring zweimal (3,6 s), die LEDs gehen an, die Spur fährt einmal ein. */ .qc-szene .qcs-fluss { stroke-dasharray: 3 6; animation: qcs-fluss 0.9s linear 4; } .qc-szene .qcs-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: qcs-ring 1.6s ease-out 0.4s 2; } .qc-szene .qcs-led { animation: qcs-led 0.5s ease-out 0.9s 1 backwards; } .qc-szene .qcs-led--b { animation-delay: 1.2s; } .qc-szene .qcs-spur { animation: qcs-spur 3.6s cubic-bezier(0.4, 0, 0.2, 1) 1 backwards; } @keyframes qcs-fluss { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } } @keyframes qcs-ring { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } } @keyframes qcs-led { from { fill: #243042; } to { fill: #00E5FF; } } @keyframes qcs-spur { from { transform: translateX(-96px); } to { transform: none; } } /* Drei Zusicherungen: am Handy fließend ohne Unterzeile („Details“ zur Garantie), ab 1024 px drei Spalten mit Unterzeile. */ .qc-zusagen { grid-area: zusagen; list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; border-top: 1px solid #1E2A3A; } .qc-zusagen li { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0; } .qc-zusagen .qc-zusagen__zeichen { width: 18px; height: 18px; color: var(--wp--preset--color--tinte); } .qc-zusagen b { font-weight: 500; font-size: 0.875rem; line-height: 1.35; } .qc-zusagen b a { display: inline-block; padding-block: 3px; margin-left: 2px; font-weight: 400; } .qc-zusagen small { display: none; } @media (min-width: 1024px) { .qc-zusagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding-top: 14px; } .qc-zusagen li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; } .qc-zusagen .qc-zusagen__zeichen { margin-top: 1px; } .qc-zusagen b { display: block; } .qc-zusagen b a { display: none; } .qc-zusagen small { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); } /* Kompakt (Befund 19.10.): Zusicherungen in der linken Spalte unter den Schritten, der erste Preis steht bei * 1366 × 650 über dem Falz. */ .qc-buehne > .qc-buehne__innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto; grid-template-areas: "text szene" "schritte szene" "zusagen szene"; column-gap: 56px; row-gap: 18px; align-items: end; padding-block: 28px 24px; } .qc-szene { align-self: center; padding: 30px 14px 10px; } .qc-szene__kopf { top: 9px; left: 14px; right: 14px; } } /* Nach dem Kauf und bei offener Zahlung eine schmale Leiste (kaufen.js setzt data-kompakt). */ .qc-buehne[data-kompakt] :is(.qc-szene, .qc-zusagen, .qc-einleitung) { display: none; } .qc-buehne[data-kompakt] > .qc-buehne__innen { grid-template-areas: "text" "schritte"; grid-template-rows: none; gap: 14px; padding-block: 18px 16px; } .qc-buehne[data-kompakt] h1 { font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); } .qc-buehne[data-kompakt] h1 > .qc-kennzeile { margin-block-end: 4px; } @media (min-width: 1024px) { .qc-buehne[data-kompakt] > .qc-buehne__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); grid-template-areas: "text schritte"; padding-block: 24px 20px; } } /* ---------------------------------------------------------------- Kasse: Karten links, Pult rechts (ab 1024 px) */ .qc-kasse { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 7vw, 5.5rem); } .qc-kauf__ansicht--kauf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .qc-kauf__form { display: contents; } @media (min-width: 1024px) { .qc-kauf__ansicht--kauf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; row-gap: 20px; align-items: start; } .qc-kauf__wahl, .qc-kauf__zahlung { grid-column: 1; grid-row: 1 / span 2; } /* Das Pult klebt nicht (Befund 19.10.): Ein klebendes Pult wandert im ganzen Raster mit und lag über den Meldungen * direkt darunter („Lädt …“, Ladefehler), gerade dann, wenn man den Knopf eben angeklickt hat. */ .qc-kauf__summe { grid-column: 2; grid-row: 1; } .qc-kauf__meldungen { grid-column: 2; grid-row: 2; } /* Ohne Formular (Version unbekannt, Kasse nicht eingerichtet, offene Zahlung): Meldungen links, bei offener Zahlung * unter dem Zahlungsblock, nicht allein rechts neben einer leeren Spalte. */ .qc-kauf__form[hidden] ~ .qc-kauf__meldungen { grid-column: 1; grid-row: auto; max-width: 44rem; } } /* „01 Angebot wählen“ bleibt die Legende; ab 1024 px nennt die Schrittleiste darüber den Schritt, dann nur für Screenreader. */ .qc-kauf__teilkopf { display: flex; align-items: baseline; gap: 12px; float: left; width: 100%; margin: 0; padding: 0 0 16px; font-family: var(--qc-sans-108); font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); font-weight: 600; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.2; color: var(--wp--preset--color--tinte); } .qc-kauf__nr { font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1; letter-spacing: 0.12em; color: var(--wp--preset--color--signal); transform: translateY(-3px); } @media (min-width: 1024px) { .qc-kauf__teilkopf { position: absolute; float: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } } /* Angebotskarten: Einmalkauf über die ganze Breite, Monat und Jahr nebeneinander. Die ganze Karte wählt (kaufen.js). */ .qc-tarife { min-width: 0; margin: 0; padding: 0; border: 0; } .qc-tarife__raster { clear: both; display: grid; gap: 14px; } @media (min-width: 640px) { .qc-tarife__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .qc-tarif--einmal { grid-column: 1 / -1; } } .qc-tarif { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 20px 18px; border: 1px solid var(--wp--preset--color--linie); border-radius: 10px; background: var(--wp--preset--color--flaeche); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } @media (min-width: 640px) { .qc-tarif { padding: 22px; column-gap: 16px; } } .qc-tarif:hover { border-color: var(--wp--preset--color--linie-ui); } .qc-tarif > * { grid-column: 2; } .qc-tarif > .qc-tarif__wahl { grid-column: 1; grid-row: 1; } .qc-tarif > .qc-tarif__glanz, .qc-tarif > .qc-tarif__jetzt { grid-column: auto; grid-row: auto; } /* Auswahl eindeutig rund: leer ein Ring, gewählt ein dunkler Punkt, in dem das Vier-Felder-Zeichen aufspringt. */ .qc-tarif__wahl { -webkit-appearance: none; appearance: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 3px 0 0; border: 1.5px solid var(--wp--preset--color--linie-ui); border-radius: 50%; background: var(--wp--preset--color--flaeche); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .qc-tarif__wahl::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1); background: linear-gradient(#00E5FF, #00E5FF) 0 0 / 4.5px 4.5px no-repeat, linear-gradient(#FF2FB9, #FF2FB9) 100% 0 / 4.5px 4.5px no-repeat, linear-gradient(#FFB300, #FFB300) 0 100% / 4.5px 4.5px no-repeat, linear-gradient(#D7E3EC, #D7E3EC) 100% 100% / 4.5px 4.5px no-repeat; } .qc-tarif:hover .qc-tarif__wahl:not(:checked) { border-color: var(--wp--preset--color--tinte); } .qc-tarif__wahl:checked { border-color: var(--qc-wahl-rand); background-color: #05070D; } .qc-tarif__wahl:checked::before { transform: none; } .qc-tarif__wahl:focus-visible { outline: none; } /* Kontrastmodus (forced-colors): Hintergrund und Schatten setzt dort das System, Ring und Punkt sähen alle gleich aus. * Dann der Auswahlknopf des Systems, der die Wahl zeigt (WCAG 1.4.11, Befund 19.10.). */ @media (forced-colors: active) { .qc-tarif__wahl { -webkit-appearance: radio; appearance: auto; } .qc-tarif__wahl::before { display: none; } } .qc-tarif__kopf { display: flex; flex-direction: column; min-width: 0; cursor: pointer; } .qc-tarif__name { font-family: var(--qc-sans-108); font-size: 1.1875rem; font-weight: 600; font-stretch: 108%; line-height: 1.3; } .qc-tarif__marke { margin-top: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-tarif__preis { margin-top: 14px; font-family: var(--qc-sans-108); font-size: clamp(2.25rem, 2vw + 1.5rem, 2.75rem); font-weight: 600; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } .qc-tarif__einheit { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-tarif__bedingung { max-width: 30rem; margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--wp--preset--color--tinte); } .qc-tarif__punkt { display: flex; gap: 8px; margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; color: var(--wp--preset--color--tinte-2); } .qc-tarif__punkt .qc-kz { width: 16px; height: 16px; margin-top: 3px; color: var(--wp--preset--color--signal); } .qc-tarif > .qc-tarif__vorteil { justify-self: start; margin-top: 12px; white-space: normal; line-height: 1.45; text-wrap: balance; } .qc-tarif__mehr { position: relative; min-width: 0; margin-top: 18px; } /* Leiter rechts neben Preis und Bedingung nur, wo sie Platz hat (Befund 19.10.: von 1024 bis etwa 1150 px ragte Text aus * den Kacheln); von 1024 bis 1199 px steht sie wie am Handy unter dem Preis, über die ganze Kartenbreite. */ @media (min-width: 900px) and (max-width: 1023.98px), (min-width: 1200px) { .qc-tarif--einmal { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 28px; } .qc-tarif--einmal > .qc-tarif__mehr { grid-column: 3; grid-row: 1 / span 3; align-self: end; margin-top: 8px; } } /* Leuchtrand der Einmalkauf-Karte, nur bei gezeigter Stufe (data-aktion="an" data-stufe): 2 px in den Logofarben, läuft * einmal um (4,5 s), kein Schein. Dazu die Marke der Stufe auf der Kante, deren LED dreimal ausstrahlt (4,8 s). */ .qc-tarif__glanz { --qc-winkel: 30deg; position: absolute; inset: -1px; padding: var(--qc-glanz-breite); border-radius: 10px; pointer-events: none; background: conic-gradient(from var(--qc-winkel), #00E5FF, #FF2FB9, #FFB300, #D7E3EC, #00E5FF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: qc-umlauf 4.5s cubic-bezier(0.45, 0, 0.2, 1) 1; } @keyframes qc-umlauf { from { --qc-winkel: -330deg; } to { --qc-winkel: 30deg; } } .qc-tarif > .qc-tarif__jetzt { position: absolute; top: -11px; right: 14px; z-index: 1; gap: 8px; border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--signal); background: var(--wp--preset--color--flaeche); } .qc-led { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--wp--preset--color--signal); animation: qc-led 1.6s ease-out 3; } @keyframes qc-led { from { outline: 1px solid var(--wp--preset--color--signal); outline-offset: 0; } to { outline: 1px solid transparent; outline-offset: 7px; } } /* Preisfassungen übereinander: versteckte Fassungen belegen Platz, bleiben unsichtbar (auch für Screenreader). */ .qc-stapel { display: grid; } .qc-stapel > * { grid-area: 1 / 1; } .qc-kauf .qc-stapel > [hidden] { display: block !important; visibility: hidden; } /* Leiter klein in der Karte (preisleiter(), Kopf und Stufen wie auf der Preisseite). Mindesthöhen über dem längsten Inhalt: * Blendet kaufen.js eine Stufe aus, werden die anderen breiter, aber nicht niedriger (CLS, Befund 19.10.). */ .qc-leiter--karte { container-type: inline-size; } .qc-leiter--karte .qc-leiter__kopf { margin-bottom: 12px; font-size: 0.6875rem; color: var(--wp--preset--color--tinte-3); } .qc-leiter--karte .qc-leiter__stufen { gap: 6px; } .qc-leiter--karte .qc-leiter__stufe { gap: 2px; min-height: 7.25rem; padding: 12px 9px 9px; background: var(--wp--preset--color--papier); } .qc-leiter--karte .qc-leiter__stufe--2 { min-height: 8rem; } .qc-leiter--karte .qc-leiter__stufe--3 { min-height: 8.75rem; } .qc-leiter--karte .qc-leiter__name { font-size: 0.625rem; line-height: 1.3; color: var(--wp--preset--color--tinte-3); } .qc-leiter--karte .qc-leiter__preis { font-size: 1.375rem; line-height: 1.1; } .qc-leiter--karte .qc-leiter__bedingung { font-size: 0.8125rem; line-height: 1.3; } .qc-leiter--karte .qc-leiter__jetzt { top: -10px; left: 8px; padding: 1px 6px; font-size: 0.625rem; background: var(--wp--preset--color--flaeche); } /* Breite Leiter (ab 26rem, etwa 1024 bis 1199 px unter dem Preis): Kacheln breit, Inhalt kurz, die flachere Treppe reicht. */ @container (min-width: 26rem) { .qc-leiter--karte .qc-leiter__stufe { min-height: 5.5rem; } .qc-leiter--karte .qc-leiter__stufe--2 { min-height: 6.25rem; } .qc-leiter--karte .qc-leiter__stufe--3 { min-height: 7rem; } } /* Von 375 bis 399 px bleiben es Kacheln (die Preisseite stellt dort schon um): Die Kartenbreite reicht für „purchases“. */ @media (min-width: 375px) and (max-width: 399px) { .qc-leiter--karte .qc-leiter__stufen { grid-auto-flow: column; grid-template-columns: none; gap: 6px; } .qc-leiter--karte .qc-leiter__stufe { display: flex; align-items: stretch; min-height: 7.25rem; padding: 12px 9px 9px; } .qc-leiter--karte .qc-leiter__stufe--2 { min-height: 8rem; } .qc-leiter--karte .qc-leiter__stufe--3 { min-height: 8.75rem; } .qc-leiter--karte :is(.qc-leiter__name, .qc-leiter__bedingung, .qc-leiter__preis) { grid-column: auto; grid-row: auto; } .qc-leiter--karte .qc-leiter__bedingung { margin-top: auto; } } /* Unter 375 px Stufen als Zeilen (Name und Bedingung links, Preis rechts; Befund 19.10.: Text ragte bei 320 bis 340 px aus der Kachel). */ @media (max-width: 374.98px) { .qc-leiter--karte .qc-leiter__stufen { gap: 8px; } .qc-leiter--karte .qc-leiter__stufe { min-height: 0; padding: 10px 12px 9px; column-gap: 12px; } } /* Die Leiter hält ihren Platz, auch wenn kaufen.js sie ausblendet: Im Zustand „regulär“ bleibt die Fläche leer, bis * seiten.py sie mit KASSE_AKTION = False gar nicht mehr baut. Ebenso der Zähler (erscheint, ohne etwas zu verschieben). */ .qc-kauf .qc-leiter--karte[hidden] { display: block !important; visibility: hidden; } .qc-kauf .qc-leiter--karte[hidden] .qc-leiter__stufe[hidden] { display: flex !important; } @media (max-width: 399px) { .qc-kauf .qc-leiter--karte[hidden] .qc-leiter__stufe[hidden] { display: grid !important; } } @media (min-width: 375px) and (max-width: 399px) { .qc-kauf .qc-leiter--karte[hidden] .qc-leiter__stufe[hidden] { display: flex !important; } } .qc-kauf .qc-zaehler[hidden] { display: flex !important; visibility: hidden; } /* Zähler ohne Kopf (welche Stufe gilt, sagt die Leiter mit „Jetzt“): nur ohne Sandbox, Balken = vergebene Plätze. */ .qc-angebot__aktion.qc-zaehler { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 14px; padding: 0; border: 0; background: none; } .qc-zaehler__zahl { font-family: var(--qc-mono); font-weight: 500; font-size: 0.8125rem; line-height: 1.3; color: var(--wp--preset--color--tinte-2); font-variant-numeric: tabular-nums; } .qc-zaehler__zahl strong { font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--tinte); } .qc-zaehler__balken { flex: 1 0 100%; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--wp--preset--color--raster); overflow: hidden; } .qc-zaehler__balken > span { display: block; width: 0; height: 100%; background: var(--qc-leiste); background-size: 400px 100%; transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); } .qc-kauf__pflicht { clear: both; display: grid; gap: 10px; max-width: 44rem; margin-top: 18px; } .qc-kauf__pflicht .qc-klein { max-width: none; } /* ---------------------------------------------------------------- Pult: Zusammenfassung als dunkles Messfenster */ .qc-pult { overflow: hidden; padding: 26px clamp(18px, 3vw, 26px) 22px; border: 1px solid #243042; border-radius: 10px; } .qc-pult::before { position: absolute; inset: 0 0 auto; } .qc-pult > :last-child { padding-bottom: 0; } /* Grundzustand (auch ohne @supports selector(), ohne Skript, ohne :has()): kein Angebot, nur der neutrale Satz. Ein * Angebot erscheint erst, wenn einer der beiden Blöcke unten weiß, welches gewählt ist; dann geht der Satz weg. So * zeigt das Pult nie einen anderen Preis als den gewählten. */ .qc-pult__plan { display: none; } .qc-pult__leer { display: block; margin-top: 12px; color: var(--wp--preset--color--tinte-2); } .qc-pult__name { margin-top: 10px; font-family: var(--qc-sans-108); font-size: 1.1875rem; font-weight: 600; font-stretch: 108%; line-height: 1.3; } .qc-pult__name .qc-label { margin-left: 8px; font-size: 0.6875rem; } .qc-pult__preis { margin-top: 12px; font-family: var(--qc-sans-112); font-size: clamp(3rem, 2.5vw + 1.75rem, 4rem); font-weight: 600; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: #FFFFFF; } .qc-pult__einheit { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-pult__bedingung { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; } .qc-pult__fakten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 18px 0 0; font-size: 0.9375rem; line-height: 1.45; } .qc-pult__fakten dt { font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 2.05; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-pult__fakten dd { margin: 0; } .qc-pult__lineal { margin: 22px 0 20px; } .qc-kauf__zustimmung { display: flex; align-items: flex-start; gap: 6px; font-size: 1rem; line-height: 1.45; } .qc-kauf__zustimmung label { cursor: pointer; } /* Kästchen 22 px in einer Tippfläche von 44 × 44 px. */ .qc-kauf__haken { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -11px 0 -11px -11px; } .qc-kauf__haken input { -webkit-appearance: none; appearance: none; grid-area: 1 / 1; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--wp--preset--color--linie-ui); border-radius: 2px; background: var(--wp--preset--color--flaeche); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .qc-kauf__haken input:hover { border-color: var(--wp--preset--color--tinte); } .qc-kauf__haken input:checked { border-color: var(--wp--preset--color--signal); background: var(--wp--preset--color--signal); } .qc-kauf__haken .qc-kz { grid-area: 1 / 1; width: 14px; height: 14px; color: #05070D; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .qc-kauf__haken input:checked + .qc-kz { opacity: 1; } .qc-kauf__hinweis { margin: 8px 0 0 33px; } .qc-pult__kasse { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--wp--preset--color--signal); background: var(--qc-signal-hauch); font-size: 0.9375rem; line-height: 1.5; } /* Satz zur Kasse je Stufe und Hinweis „unbekannt“ übereinander (qc-stapel, seiten.py kasse_pult()): Sie erscheinen erst * mit der Antwort des Lizenzservers und halten ihren Platz auch versteckt, der Knopf darunter springt nicht (CLS, Befund * 19.10.). Der sichtbare steht unten, direkt über dem Knopf. Ganz weg ist der Block nur, wenn kein Einmalkauf gewählt * ist (unten, mit und ohne :has()): eine eigene Wahl, keine Verschiebung von selbst. */ .qc-pult__vorab { margin-top: 16px; } .qc-pult__vorab > * { align-self: end; } .qc-pult .qc-pult__vorab > :is(.qc-pult__kasse, .qc-kauf__kasten) { margin-top: 0; } .qc-kauf .qc-pult__vorab > .qc-kauf__kasten[hidden] { display: grid !important; visibility: hidden; } /* Hinweise und Meldungen: Status in der Signalfarbe, Fehler in Chroma, je mit Zeichen. */ .qc-kauf__kasten { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 8px; background: var(--qc-signal-hauch); font-size: 0.9375rem; line-height: 1.5; } .qc-kauf__kasten > .qc-kz { margin-top: 2px; color: var(--wp--preset--color--signal); } .qc-kauf__kasten--fehler { background: var(--qc-chroma-hauch); } .qc-kauf__kasten--fehler > .qc-kz { color: var(--wp--preset--color--chroma); } .qc-pult .qc-kauf__kasten { margin-top: 16px; } /* Kassenknopf: volle Breite mit Pfeil. Gesperrt lesbar (Fläche, Schrift tinte-2, 1-px-Linie) statt 45 % Deckkraft; beim * Freigeben läuft einmal ein Linienring aus. */ .qc-kasse-knopf { width: 100%; min-height: 56px; padding: 0 22px; justify-content: space-between; font-size: 1.0625rem; } .qc-kasse-knopf .qc-pfeil { width: 20px; height: 20px; margin: 0; transition: transform 0.2s; } .qc-kasse-knopf:hover .qc-pfeil { transform: translateX(3px); } .qc-kasse-knopf:not(:disabled) { animation: qc-freigabe 0.7s ease-out 1; } @keyframes qc-freigabe { from { outline: 1px solid var(--wp--preset--color--signal); outline-offset: 0; } to { outline: 1px solid transparent; outline-offset: 8px; } } .qc-kauf .qc-knopf.qc-kasse-knopf:disabled, .qc-kauf .qc-knopf.qc-kasse-knopf:disabled:hover { opacity: 1; background: var(--wp--preset--color--raster); color: var(--wp--preset--color--tinte-2); box-shadow: inset 0 0 0 1px var(--wp--preset--color--linie); } .qc-kasse-knopf:disabled .qc-pfeil { opacity: 0.5; transform: none; } .qc-pult .qc-kasse-knopf { margin-top: 18px; } .qc-kauf__knopfhinweis { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-kauf__knopfhinweis .qc-kz { width: 16px; height: 16px; color: var(--wp--preset--color--signal); } .qc-kasse-knopf:not(:disabled) + .qc-kauf__knopfhinweis { display: none; } .qc-kauf .qc-sandbox { display: inline-block; max-width: 100%; margin-top: 14px; padding: 5px 10px; border-left: 2px solid var(--wp--preset--color--platzhalter); background: var(--wp--preset--color--platzhalter-grund); color: var(--wp--preset--color--platzhalter); font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.04em; } .qc-kauf__paddle { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); } .qc-kauf__paddle .qc-kz { width: 18px; height: 18px; margin-top: 1px; color: var(--wp--preset--color--tinte-3); } /* Das Pult folgt dem gewählten Angebot: mit :has() aus der Auswahl selbst, ohne :has() über data-gewaehlt (setzt allein * kaufen.js, in waehle() und im change-Handler). Ohne beides (kein Skript, sehr alter Browser) bleibt der neutrale Satz. */ @supports selector(:has(*)) { .qc-kauf__form:has(#qc-angebot-einmal:checked) .qc-pult__plan[data-fuer="einmal"], .qc-kauf__form:has(#qc-angebot-monat:checked) .qc-pult__plan[data-fuer="monat"], .qc-kauf__form:has(#qc-angebot-jahr:checked) .qc-pult__plan[data-fuer="jahr"] { display: block; } .qc-kauf__form:has(input[name="angebot"]:checked) .qc-pult__leer { display: none; } .qc-tarif:has(.qc-tarif__wahl:checked) { border-color: var(--wp--preset--color--tinte); box-shadow: inset 0 3px 0 var(--wp--preset--color--signal); } .qc-tarif:has(.qc-tarif__wahl:focus-visible) { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 3px; } .qc-leiter--karte .qc-leiter__stufe:has(> .qc-leiter__jetzt:not([hidden])) { background: var(--wp--preset--color--flaeche); box-shadow: inset 0 2px 0 var(--wp--preset--color--signal); } .qc-kauf__form:not(:has(#qc-angebot-einmal:checked)) .qc-pult__vorab { display: none; } /* Meldungsblock nur mit einer sichtbaren Meldung. Der noscript-Kasten zählt, wenn er Inhalt hat: Ohne Skript ist sein * Inhalt ein Element, mit Skript nur Text (Befund 19.10.: ohne JavaScript war der Kasten sonst unsichtbar). */ .qc-kauf__meldungen:not(:has(> :not([hidden]):not(noscript), > noscript > *)) { display: none; } /* Mit Haken kein „Hak oben das Kästchen an“, auch solange der Knopf beim Laden der Kasse gesperrt ist. */ .qc-pult:has([data-zustimmung]:checked) .qc-kauf__knopfhinweis { display: none; } /* Ohne fertige Kasse ([qc_kauf] zeigt „Bald möglich“, kein #kauf, kein kaufen.js) keine Schrittleiste: Es gibt kein * Angebot zu wählen (Befund 19.10.). */ body:not(:has(#kauf)) [data-schritte] { display: none; } } @supports not selector(:has(*)) { .qc-kauf__form[data-gewaehlt="einmal"] .qc-pult__plan[data-fuer="einmal"], .qc-kauf__form[data-gewaehlt="monat"] .qc-pult__plan[data-fuer="monat"], .qc-kauf__form[data-gewaehlt="jahr"] .qc-pult__plan[data-fuer="jahr"] { display: block; } .qc-kauf__form[data-gewaehlt="einmal"] .qc-pult__leer, .qc-kauf__form[data-gewaehlt="monat"] .qc-pult__leer, .qc-kauf__form[data-gewaehlt="jahr"] .qc-pult__leer { display: none; } .qc-kauf__form:not([data-gewaehlt="einmal"]) .qc-pult__vorab { display: none; } .qc-tarif__wahl:focus-visible { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 3px; } .qc-kauf__form[data-gewaehlt="einmal"] [data-angebot-karte="einmal"], .qc-kauf__form[data-gewaehlt="monat"] [data-angebot-karte="monat"], .qc-kauf__form[data-gewaehlt="jahr"] [data-angebot-karte="jahr"] { border-color: var(--wp--preset--color--tinte); box-shadow: inset 0 3px 0 var(--wp--preset--color--signal); } } /* ---------------------------------------------------------------- Meldungen, offene Zahlung */ .qc-kauf__meldungen { display: grid; gap: 12px; } .qc-kauf__laedt { display: flex; align-items: center; gap: 12px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.04em; color: var(--wp--preset--color--tinte-2); } .qc-puls { display: inline-grid; grid-template-columns: repeat(2, 6px); gap: 2px; flex: none; } .qc-puls i { width: 6px; height: 6px; border-radius: 1px; animation: qc-puls 1.2s infinite ease-in-out; } .qc-puls i:nth-child(1) { background: #00E5FF; } .qc-puls i:nth-child(2) { background: #FF2FB9; animation-delay: 0.15s; } .qc-puls i:nth-child(3) { background: #FFB300; animation-delay: 0.45s; } .qc-puls i:nth-child(4) { background: #D7E3EC; animation-delay: 0.3s; } @keyframes qc-puls { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } .qc-kauf__zahlung { display: grid; gap: 16px; max-width: 36rem; align-content: start; } .qc-kauf__zahlung .qc-kasse-knopf { max-width: 26rem; } .qc-kauf__zahlung :is(.qc-sandbox, .qc-kauf__paddle) { justify-self: start; margin-top: 0; } .qc-kauf__titel { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); } /* ---------------------------------------------------------------- Erfolg: Lizenzkarte links, drei Schritte rechts */ .qc-kauf__erfolg > .qc-sandbox { margin: 0 0 16px; } .qc-kauf__erfolgkopf { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); } .qc-kauf__erfolgkopf h2 { font-size: clamp(1.625rem, 2.5vw + 1rem, 2.5rem); } /* Das Zeichen setzt sich zusammen (Felder nacheinander, unter 1 s). */ .qc-feier { display: grid; grid-template-columns: repeat(2, 14px); gap: 3px; flex: none; padding: 5px; border: 1px solid #243042; border-radius: 7px; background: #05070D; } .qc-feier i { display: block; width: 14px; height: 14px; border-radius: 2px; animation: qc-feld 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.4) 1 both; } .qc-feier i:nth-child(1) { background: #00E5FF; animation-delay: 0.05s; } .qc-feier i:nth-child(2) { background: #FF2FB9; animation-delay: 0.15s; } .qc-feier i:nth-child(3) { background: #FFB300; animation-delay: 0.35s; } .qc-feier i:nth-child(4) { background: #D7E3EC; animation-delay: 0.25s; } @keyframes qc-feld { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } } .qc-kauf__erfolgraster { display: grid; gap: 36px; } @media (min-width: 1024px) { .qc-kauf__erfolgraster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: start; } } .qc-kauf__stand { display: grid; gap: 14px; } .qc-kauf__fertig > .qc-klein { margin-top: 14px; } .qc-kauf__fertig > .qc-klein + .qc-klein { margin-top: 8px; } .qc-kauf__schluesselteil > .qc-klein { margin-top: 10px; } .qc-lizenzkarte { overflow: hidden; padding: 28px clamp(14px, 3vw, 26px) 20px; border: 1px solid #243042; border-radius: 10px; } .qc-lizenzkarte::before { position: absolute; inset: 0 0 auto 0; transform-origin: left; animation: qc-leiste 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1 both; } .qc-lizenzkarte > :last-child { padding-bottom: 0; } .qc-lizenzkarte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #00E5FF; } .qc-lizenzkarte__zeichen { display: block; flex: none; width: 22px; height: 22px; } /* Schlüssel: 32 Zeichen (QC- und 5 × 5 mit 4 Bindestrichen). Größe nach der Breite der Karte (Containerabfrage), damit er ab * 360 px auf eine Zeile passt (32 × 0,62 em = 19,84 em, 4,8cqi ≈ 95 % der Breite; ohne Containerabfragen 1rem). Darunter * bricht er nach der dritten Gruppe: kaufen.js setzt zwei nicht umbrechende Hälften mit , textContent bleibt ganz. */ .qc-lizenzkarte__schluessel { margin-top: 16px; container-type: inline-size; } .qc-lizenzkarte__schluessel code { display: block; font-family: var(--qc-mono); font-weight: 500; font-size: 1rem; font-size: clamp(0.9375rem, 4.8cqi, 1.625rem); line-height: 1.3; letter-spacing: 0.02em; color: #FFFFFF; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; animation: qc-auftauchen 0.6s 0.2s 1 both; } .qc-lizenzkarte__schluessel code > span { white-space: nowrap; } @keyframes qc-auftauchen { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } } .qc-lizenzkarte__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #1E2A3A; } .qc-lizenzkarte__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .qc-lizenzkarte__chips li { margin: 0; padding: 5px 9px; border: 1px solid #3A4859; border-radius: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.04em; color: #A3B3C2; } .qc-lizenzkarte__kopieren { display: flex; align-items: center; gap: 10px; } .qc-lizenzkarte__kopieren .qc-kz { width: 16px; height: 16px; } .qc-lizenzkarte__kopiert { font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #00E5FF; } .qc-lizenzkarte__platz { display: block; width: min(100%, 18em); height: 1.6rem; margin-top: 16px; border-radius: 2px; background: linear-gradient(90deg, #1E2A3A 0 40%, #2A3B52 50%, #1E2A3A 60% 100%); background-size: 300% 100%; animation: qc-schimmer 1.6s linear infinite; } @keyframes qc-schimmer { to { background-position: -300% 0; } } .qc-lizenzkarte--wartet .qc-kauf__laedt { margin-top: 18px; color: #A3B3C2; } .qc-kauf__aktivieren h3 { font-size: 1.25rem; line-height: 1.3; } .qc-aktivieren { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; } .qc-aktivieren li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 16px; border: 1px solid var(--wp--preset--color--linie); border-radius: 10px; background: var(--wp--preset--color--flaeche); } .qc-aktivieren .qc-aktivieren__zeichen { width: 44px; height: 44px; } .qc-aktivieren__nr { display: block; margin-bottom: 4px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.12em; color: var(--wp--preset--color--signal); } .qc-aktivieren p { font-size: 1rem; line-height: 1.5; } .qc-aktivieren .qc-knopf { max-width: 100%; margin-top: 14px; padding-inline: 16px; } .qc-aktivieren .qc-knopf .qc-pfeil { flex: none; margin-inline-start: 0; } /* Schmalste Handys: Zeichen kleiner, damit „Download QuadChroma“ in eine Zeile passt (sonst bricht der Knopftext um). */ @media (max-width: 374.98px) { .qc-aktivieren li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 12px; } .qc-aktivieren .qc-aktivieren__zeichen { width: 32px; height: 32px; } } .qc-kauf__aktivieren > .qc-klein { margin-top: 18px; } .qc-kauf__aktivieren > .qc-knoepfe { margin-top: 20px; } /* ---------------------------------------------------------------- Gut zu wissen (Wortlaut unverändert) */ .qc-kauf-gut { padding-bottom: clamp(3rem, 7vw, 5.5rem); } .qc-kauf-gut h2 { margin-top: clamp(2rem, 5vw, 3rem); font-size: clamp(1.5rem, 2vw + 1rem, 2rem); line-height: 1.15; } .qc-kauf-gut__liste { display: grid; margin: 20px 0 0; padding: 0; list-style: none; } .qc-kauf-gut__liste li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; margin: 0; padding: 18px 0; border-top: 1px solid var(--wp--preset--color--linie); } .qc-kauf-gut__liste .qc-sym { width: 36px; height: 36px; } .qc-kauf-gut__liste h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; } .qc-kauf-gut__liste p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } @media (min-width: 900px) { .qc-kauf-gut__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } } .qc-kauf-gut > .qc-weiter { margin-top: 24px; } @media (prefers-reduced-motion: reduce) { .qc-buehne::before, .qc-buehne *, .qc-buehne *::before, .qc-buehne *::after, .qc-kasse *, .qc-kasse *::before, .qc-kasse *::after { animation: none !important; transition: none !important; } } /* ================================================================ QC-Phone (soziales Projekt, 25.10.2026) */ /* Seite /qc-phone/ (werkzeug/seiten.py, qcphone()). Bildschirmfotos aus werkzeug/qc_phone_bilder.py, je ein : * AVIF in 4:4:4, hell oder dunkel nach prefers-color-scheme wie die Seite. Ecken wie der Bildschirm eines iPhone * (55 von 402 pt Breite) bzw. iPad (18 pt). Das App-Symbol trägt feste Markenfarben und folgt nicht hell/dunkel. */ .qc-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .qc-app__symbol { display: block; flex: none; width: 64px; height: 64px; border-radius: 22.4%; box-shadow: 0 0 0 1px var(--wp--preset--color--linie); } .qc-held--app .qc-held__text > h1 { margin-top: 1.75rem; } .qc-held--app h1 { max-width: 10.5em; } .qc-held--app .qc-held__text > .qc-klein { margin-top: 1rem; } .qc-telefone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(14px, 3vw, 36px); max-width: 600px; margin-inline: auto; } .qc-telefone > .qc-telefon:nth-child(2) { margin-top: 18%; } /* „Kann dein iPhone das nicht schon?“ (#iphone, Robert 29.10.2026): Textabschnitt direkt unter dem Kopf, darunter Stand * und Quelle der Angaben zu Apple klein. */ .qc-teil--iphone .qc-teil__kopf { max-width: 46rem; } .qc-teil--iphone .qc-teil__kopf > p { max-width: 44rem; } .qc-teil--iphone .qc-teil__kopf > .qc-klein { font-size: 0.875rem; line-height: 1.5; max-width: 40rem; } /* Schluss: Atom-Feed des Blogs klein unter dem Knopf (nur bei SUCHMASCHINEN_FREI = '1'). */ .qc-schluss > .qc-schluss__feed { margin-top: 1.25rem; font-size: 0.875rem; } .qc-telefon { margin: 0; min-width: 0; } .qc-telefon picture { display: block; } .qc-telefon img { display: block; width: 100%; height: auto; border-radius: 13.7% / 6.3%; background: var(--wp--preset--color--flaeche); box-shadow: 0 0 0 1px var(--wp--preset--color--linie), 0 28px 60px -34px rgba(5, 7, 13, 0.6); } .qc-abbildung.qc-telefon { width: 100%; max-width: 300px; margin-inline: auto; } .qc-abbildung.qc-telefon > figcaption { margin-top: 1.25rem; text-align: center; line-height: 1.5; } .qc-tablet { max-width: 960px; margin-inline: auto; } .qc-tablet picture { display: block; } .qc-tablet img { display: block; width: 100%; height: auto; border-radius: 1.3% / 1.75%; background: var(--wp--preset--color--flaeche); box-shadow: 0 0 0 1px var(--wp--preset--color--linie), 0 28px 60px -34px rgba(5, 7, 13, 0.6); } .qc-zweier__text > .qc-chips { margin-top: 1.5rem; } /* Haken-Liste in der Textspalte eines Zweiers: immer einspaltig. */ .qc-liste-haken.qc-liste-haken--eng { grid-template-columns: minmax(0, 1fr); max-width: 36rem; } .qc-band__text > .qc-chips { margin-top: 1.25rem; } .qc-band--app { background: var(--wp--preset--color--flaeche); border-color: var(--wp--preset--color--linie); border-left: 3px solid var(--wp--preset--color--signal); } .qc-band--app > .qc-app__symbol { width: 56px; height: 56px; } /* Live-Übersetzung (#translation, Robert 25.10.2026: „ganz oben als Super-Feature“): dunkler Kasten wie das Technik-Band * der Startseite, aber Text, Zahlen, Hinweis und Sprachliste untereinander über die volle Breite. Die drei Zahlen in den * Logofarben Cyan, Magenta, Gelb; ab etwa 600 px nebeneinander. Alle 47 Sprachen in details (zugeklappt). */ .qc-technik__innen--uebersetzung { grid-template-columns: minmax(0, 1fr); } .qc-technik__innen--uebersetzung .qc-teil__kopf { max-width: 46rem; } .qc-technik__innen--uebersetzung > .qc-technik__zahlen { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } .qc-technik__innen--uebersetzung .qc-kennziffer:nth-child(2) .qc-kennziffer__wert { color: var(--wp--preset--color--chroma); } .qc-technik__innen--uebersetzung .qc-kennziffer:nth-child(3) .qc-kennziffer__wert { color: var(--wp--preset--color--hdr); } .qc-uebersetzung__hinweis { margin: 0; max-width: 46rem; font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--tinte-3); } .qc-sprachliste { border-top: 1px solid var(--wp--preset--color--linie); } .qc-sprachliste > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; padding-top: 12px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; } .qc-sprachliste > summary::-webkit-details-marker { display: none; } .qc-sprachliste > summary::after { content: "+"; font-family: var(--qc-mono); font-weight: 400; font-size: 1.25rem; color: var(--wp--preset--color--signal); } .qc-sprachliste[open] > summary::after { content: "\2212"; } .qc-sprachliste > summary:hover { color: var(--wp--preset--color--signal); } .qc-sprachliste__gruppe { margin-top: 1.5rem; } .qc-sprachliste__gruppe > h3 { margin: 0 0 0.875rem; font-family: var(--qc-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-2); } .qc-sprachliste .qc-chips li { padding: 6px 10px; font-size: 0.875rem; } @media (max-width: 599px) { .qc-app__symbol { width: 56px; height: 56px; } .qc-abbildung.qc-telefon { max-width: 260px; } } /* ================================================================ Blog (Robert, 27.10.2026) */ /* Übersicht /blog/: Beiträge als Liste (Datum, Titel als Link, Autorenzeile, Anreißer), neueste zuerst, darunter der * Atom-Feed. Beitrag: Lesespalte wie die Rechtstexte (40rem, ab 1024 px Inhaltsverzeichnis links), Autorenzeile und Datum * oben, Diagramme als Inline-SVG nur über die Farb-Tokens (hell und dunkel ohne eigene Regeln), „Variants“ als offenes * details in kleinerer, ruhigerer Schrift, Lizenzzeile unter einer Linie, danach ggf. der Abschnitt „Changes“ * (werkzeug/seiten.py, Abschnitt „Blog“). */ .qc-beitraege { list-style: none; margin: 0; padding: 0; max-width: 48rem; border-top: 1px solid var(--wp--preset--color--linie-ui); } .qc-beitrag { padding-block: 28px; border-bottom: 1px solid var(--wp--preset--color--linie-ui); } .qc-beitrag > * { margin: 0; } .qc-beitrag > * + * { margin-top: 12px; } .qc-beitrag__datum { font-family: var(--qc-mono); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tinte-3); } .qc-beitrag h2 { max-width: 40rem; font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem); font-stretch: 104%; line-height: 1.2; } .qc-beitrag h2 a { color: inherit; text-decoration: none; } .qc-beitrag h2 a:hover { color: var(--wp--preset--color--signal); text-decoration: underline; text-decoration-thickness: 2px; } /* Autorenzeile unter dem Titel (Robert, 27.10.2026), näher am Titel als am Anreißer. */ .qc-beitrag h2 + .qc-beitrag__autor { margin-top: 6px; } .qc-beitrag__autor { font-size: 0.9375rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); } .qc-beitrag > p:last-child { max-width: 40rem; font-size: 1.0625rem; line-height: 1.55; color: var(--wp--preset--color--tinte-2); } .qc-beitraege__feed { margin: 20px 0 0; font-size: 0.875rem; } .qc-artikel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: clamp(3rem, 8vw, 5rem) var(--qc-abschnitt); } .qc-artikel > * { margin-block: 0; } .qc-artikel__inhalt { display: none; } .qc-artikel__text { max-width: 40rem; min-width: 0; } .qc-artikel__text > * { margin-block: 0; } .qc-artikel__text > * + * { margin-block-start: 1rem; } .qc-artikel__text p, .qc-artikel__text li { line-height: 1.6; } .qc-artikel__text > .qc-kennzeile a { color: inherit; text-decoration: none; } .qc-artikel__text > .qc-kennzeile a:hover { color: var(--wp--preset--color--signal); text-decoration: underline; } .qc-artikel__text h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); font-stretch: 108%; font-family: var(--qc-sans-108); line-height: 1.1; } .qc-artikel__text h2 { font-size: 1.375rem; font-stretch: 104%; scroll-margin-top: 16px; } .qc-artikel__text > h2 { margin-block-start: 2.75rem; } .qc-artikel__text ol, .qc-artikel__text ul { padding-inline-start: 1.25rem; } .qc-artikel__text li + li, .qc-artikel__text li > ul { margin-top: 0.5rem; } .qc-artikel__text > .qc-artikel__stand { margin-block-start: 1.25rem; color: var(--wp--preset--color--tinte-2); } /* Autorenzeile (Robert, 27.10.2026) zwischen Titel und Datumszeile: Abstand zum Titel wie bisher die Datumszeile, die * Datumszeile rückt dicht darunter. */ .qc-artikel__text > .qc-artikel__autor { margin-block-start: 1.25rem; color: var(--wp--preset--color--tinte-2); } .qc-artikel__text > .qc-artikel__autor + .qc-artikel__stand { margin-block-start: 0.25rem; } .qc-artikel__text > .qc-artikel__varianten { margin-block-start: 2.75rem; border-top: 1px solid var(--wp--preset--color--linie); } .qc-artikel__varianten > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-top: 1.5rem; } .qc-artikel__varianten > summary::-webkit-details-marker { display: none; } .qc-artikel__varianten > summary::after { content: "+"; font-family: var(--qc-mono); font-weight: 400; font-size: 1.25rem; color: var(--wp--preset--color--tinte-3); } .qc-artikel__varianten[open] > summary::after { content: "\2212"; } .qc-artikel__varianten > summary:hover h2 { color: var(--wp--preset--color--signal); } .qc-artikel__varianten-text { margin-top: 1rem; font-size: 0.9375rem; color: var(--wp--preset--color--tinte-2); } .qc-artikel__varianten-text > * { margin: 0; } .qc-artikel__varianten-text > * + * { margin-top: 0.875rem; } .qc-artikel__varianten-text > ol > li + li { margin-top: 0.875rem; } .qc-artikel__varianten-text li { line-height: 1.55; } .qc-artikel__varianten-text strong { color: var(--wp--preset--color--tinte); } .qc-artikel__text > .qc-artikel__lizenz { margin-block-start: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--linie); font-size: 0.875rem; color: var(--wp--preset--color--tinte-2); } /* Sichtbare Änderungen nach der Veröffentlichung („Changes“ / „Änderungen“), am Ende nach der Lizenzzeile. */ .qc-artikel__text > .qc-artikel__aenderungen { margin-block-start: 2.75rem; } .qc-artikel__aenderungen > * { margin: 0; } .qc-artikel__aenderungen > * + * { margin-top: 1rem; } /* Dankblock unter dem Dank-Absatz (Robert, 30.10.2026, „Twice as fast“; seiten.py BLOG_DANK): Scaleways weißes Logo auf * einer glatten dunklen Fläche, in hellem und dunklem Modus gleich (--qc-fenster #05070D, Weiß darauf 20,14 : 1; der Rand * ist im hellen Modus so dunkel wie die Fläche). Die Fläche bleibt auch beim Drucken ohne Hintergrundgrafiken und im * Kontrastmodus (forced-colors) dunkel, sonst verschwände das weiße Logo (print-color-adjust, forced-color-adjust; Befund * der Prüfung 30.10.2026). Das Logo steht fest 40 px hoch und wird nie gestreckt (max-width: none), * Freiraum rundherum 20 px oben und unten, 24 px seitlich (Scaleway verlangt ein Drittel der Logohöhe, 13,3 px). Kein * Raster, kein Verlauf, keine Effekte am Logo (Filter, Deckkraft, Schatten, Kontur; blog_dank_pruefen()). Darunter klein die * Urheber- und Markenzeile (Tinte 2 wie die Lizenzzeile, AA hell und dunkel). */ .qc-artikel__text > .qc-artikel__dank { margin: 2rem 0 0; } .qc-artikel__dank-flaeche { display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; padding: 20px 24px; background: var(--qc-fenster); border: 1px solid var(--qc-fenster-rand); border-radius: 10px; forced-color-adjust: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .qc-artikel__dank-logo { display: block; flex: none; width: auto; height: 40px; max-width: none; } .qc-artikel__dank > figcaption { margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--tinte-2); hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; } /* Reel unter den Messwerten (Robert, 30.10.2026, „Twice as fast“; seiten.py BLOG_REEL): Hochkant-Video 9 : 16, links bündig * wie die übrigen Abbildungen des Beitrags, höchstens 360 px breit (dazu 1 px Rand je Seite), auf dem Handy so breit wie die * Textspalte. Feste Seitenverhältnisse (aspect-ratio und width/height am Element): kein Sprung, wenn Startbild oder Video * laden. Die dunkle Fläche steht nur, bis das Startbild da ist; Rand und Rundung wie die Bildfenster der Website. Beim * Drucken entfällt das Reel (auf Papier bliebe nur ein leerer Rahmen; @media print unten). */ .qc-artikel__text > .qc-artikel__reel { margin: 1.5rem 0 0; box-sizing: border-box; width: 100%; max-width: 362px; border: 1px solid var(--qc-fenster-rand); border-radius: 10px; overflow: hidden; background: var(--qc-fenster); } .qc-artikel__reel-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: var(--qc-fenster); } @media (min-width: 1024px) { .qc-artikel { grid-template-columns: 14rem minmax(0, 40rem); column-gap: 64px; } .qc-artikel__inhalt { display: block; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; } .qc-artikel__inhalt ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--wp--preset--color--linie); } .qc-artikel__inhalt li { margin: 0; } .qc-artikel__inhalt a { display: block; padding: 5px 0 5px 12px; font-family: var(--qc-mono); font-size: 0.75rem; line-height: 1.4; color: var(--wp--preset--color--tinte-2); text-decoration: none; } .qc-artikel__inhalt a:hover { color: var(--wp--preset--color--signal); } /* Beitrag ohne Zwischenüberschriften (Teil 2, 29.10.2026): kein Inhaltsverzeichnis, der Text steht an der Kante der * Seite wie die Übersicht des Blogs. */ .qc-artikel--ohne-inhalt { grid-template-columns: minmax(0, 40rem); } } /* Sequenzdiagramme: breite Fassung ab 640 px, darunter die schmale (höchstens 440 px breit, sonst würde die Schrift zu * groß). Beschriftungen über Linien mit einem Rand in der Papierfarbe; die Linie „Ton fließt direkt“ in Chroma. */ .qc-ablauf { margin-inline: 0; } .qc-artikel__text > .qc-ablauf { margin-block-start: 1.5rem; } .qc-ablauf__svg { display: block; width: 100%; height: auto; } .qc-ablauf__svg--breit { display: none; } .qc-ablauf__svg--schmal { max-width: 440px; } @media (min-width: 640px) { .qc-ablauf__svg--breit { display: block; } .qc-ablauf__svg--schmal { display: none; } } .qc-ablauf__text { font-family: var(--qc-sans); fill: var(--wp--preset--color--tinte); } .qc-ablauf__name { font-weight: 600; } .qc-ablauf__halo { paint-order: stroke; stroke: var(--wp--preset--color--papier); stroke-width: 5px; stroke-linejoin: round; } .qc-ablauf__kopf rect { fill: var(--wp--preset--color--flaeche); stroke: var(--wp--preset--color--linie-ui); stroke-width: 1; } .qc-ablauf__leben { stroke: var(--wp--preset--color--linie-ui); stroke-width: 1; stroke-dasharray: 2 3; } .qc-ablauf__notiz rect { fill: var(--wp--preset--color--raster); stroke: var(--wp--preset--color--linie); stroke-width: 1; } .qc-ablauf__notiz .qc-ablauf__text { fill: var(--wp--preset--color--tinte-2); } .qc-ablauf__linie { stroke: var(--wp--preset--color--tinte-2); stroke-width: 1.5; } .qc-ablauf__linie--gestrichelt { stroke-dasharray: 5 4; } .qc-ablauf__linie--direkt { stroke: var(--wp--preset--color--chroma); stroke-width: 2; } .qc-ablauf__spitze { fill: var(--wp--preset--color--tinte-2); } @media print { .qc-artikel__inhalt, .qc-beitraege__feed { display: none !important; } .qc-artikel { display: block; padding-block: 0; } .qc-artikel__text { max-width: none; } .qc-artikel__varianten > summary::after { content: none; } .qc-ablauf { break-inside: avoid; } .qc-artikel__reel { display: none !important; } .qc-ablauf__svg--breit { display: block !important; max-width: 640px; } .qc-ablauf__svg--schmal { display: none !important; } } /* ================================================================ Blog: Kopf im Stil der Vorschaubilder (29.10.2026) */ /* Robert, 29.10.2026, zum OG-Bild von Teil 2: „Das finde ich echt Cool. Wäre cool wenn die Überschriften oder Titel im Blog * so cool aussehen würden.“ Vorbild og/og-blog-zweitanruf-en.png (Werkstatt qc-arbeit/website-blog2-belege/og/og-teil2.html): * dunkles feines Raster, Kennzeile „QuadChroma · Blog“ in Mono mit dem Vier-Felder-Zeichen, Titel groß in Archivo, Unterzeile * in Cyan-Mono, gelb umrandete Marke, rechts die große umrandete Ziffer mit „Part n“. Markup: werkzeug/seiten.py * (blog_kopf_deko(), blog_titel_html(), blog_index()). Nur Gestaltung, der Lesetext bleibt Zeichen für Zeichen gleich. * - Beitrag: Der Artikel ist ein Raster mit der Lesespalte „text“ (40rem wie bisher) und dem Rest bis zur Kante („voll“). * Kennzeile, H1, Autorenzeile und Datumszeile liegen in den Zeilen 1–4 über die volle Breite, der leere Grund * (.qc-blogkopf, aria-hidden) liegt genau hinter diesen vier Zeilen; der Lesetext folgt ab Zeile 5 in „text“, mit den * Abständen wie bisher (nur margin-block-start, nichts fällt zusammen). * - Bis 1023 px ein Band von Kante zu Kante direkt unter dem Seitenkopf, ab 1024 px eine Karte mit Rundung wie die * Messfenster, so breit wie die Hülle (Beitrag 1: rechts vom Inhaltsverzeichnis). * - Immer dunkel, in hellem und dunklem Modus gleich; nur die Farben der Vorschaubilder (Tokens qc-fenster*, qc-cyan, * qc-gold, neu qc-fenster-titel). Kontrast auf #05070D: Titel #FFF 20,14 : 1, Unterzeile #00E5FF 13 : 1, Autorenzeile * #D7E3EC 15 : 1, Kennzeile und Datumszeile #7D90A3 6,1 : 1 (auf den Rasterlinien #0C1320 5,6 : 1), Marke #FFD24A 13 : 1. * - Ziffer, „Part n“ und Marke kommen per CSS content aus data-Attributen (Zierde). Ist der Artikel mindestens 48rem breit, * steht die Ziffer groß rechts (der Kopftext hält ihr Platz frei), sonst klein oben rechts neben der Kennzeile. * - Übersicht: Datum und Titel jedes Beitrags auf einer dunklen Platte (.qc-beitrag__platte) mit Ziffer, Autorenzeile und * Anreißer darunter wie bisher. */ :root { --qc-fenster-titel: #FFFFFF; } .qc-artikel--kopf { padding-top: 0; } .qc-artikel--kopf > .qc-artikel__text { --qc-kopf-x: 0px; --qc-kopf-innen: var(--qc-rand); --qc-kopf-oben: clamp(2rem, 7vw, 3rem); --qc-kopf-unten: clamp(2rem, 7vw, 3rem); --qc-marke-h: 2.25rem; --qc-ziffer-platz: 0px; display: grid; grid-template-columns: [voll-start text-start] minmax(0, 40rem) [text-end] minmax(0, 1fr) [voll-end]; max-width: none; container: qc-beitrag / inline-size; } .qc-artikel--kopf > .qc-artikel__text > * { grid-column: text; } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__stand + * { margin-block-start: clamp(2.25rem, 6vw, 3rem); } /* Grund: Raster wie die Vorschaubilder (24 px, Linien #0C1320 auf #05070D) */ .qc-artikel--kopf > .qc-artikel__text > .qc-blogkopf { grid-column: voll; grid-row: 1 / 5; position: relative; z-index: 0; overflow: hidden; margin-inline: calc(-1 * var(--qc-rand)); border-bottom: 1px solid var(--qc-fenster-rand); background-color: var(--qc-fenster); background-image: linear-gradient(var(--qc-fenster-raster) 1px, transparent 1px), linear-gradient(90deg, var(--qc-fenster-raster) 1px, transparent 1px); background-size: var(--qc-raster-luecke) var(--qc-raster-luecke); background-position: -1px -1px; } .qc-artikel--kopf > .qc-artikel__text > :is(.qc-artikel__blog, h1, .qc-artikel__autor, .qc-artikel__stand) { grid-column: voll; position: relative; z-index: 1; padding-inline: var(--qc-kopf-x) calc(var(--qc-kopf-x) + var(--qc-ziffer-platz)); } /* Kennzeile: Vier-Felder-Zeichen, „QuadChroma ·“ (aria-hidden) und der Link „Blog“ */ .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__blog { grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 0.6em; min-height: 2.25rem; margin-top: 0; padding-top: var(--qc-kopf-oben); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--qc-fenster-text-2); } .qc-blogkopf__zeichen { display: inline-block; width: 1.75rem; height: 1.75rem; margin-inline-end: 0.875rem; vertical-align: middle; } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__blog a:hover { color: var(--qc-cyan); } .qc-artikel--kopf > .qc-artikel__text > :is(.qc-artikel__blog, h1, .qc-artikel__autor, .qc-artikel__stand) :focus-visible { outline-color: var(--qc-cyan); } /* Titel und Unterzeile (zwei spans im H1, blog_titel_html()) */ .qc-artikel--kopf > .qc-artikel__text > h1 { grid-row: 2; margin-top: clamp(1.5rem, 5vw, 2.5rem); font-family: var(--qc-sans-112); font-stretch: 112%; font-size: clamp(2.125rem, 4.4cqi + 1rem, 4.25rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--qc-fenster-titel); } .qc-blogtitel, .qc-blogtitel__unter { display: block; } .qc-blogtitel__unter { max-width: 40rem; margin-top: clamp(0.875rem, 2.5cqi, 1.375rem); font-family: var(--qc-mono); font-weight: 600; font-stretch: 100%; font-size: clamp(1rem, 0.9cqi + 0.8rem, 1.375rem); line-height: 1.45; letter-spacing: 0.005em; color: var(--qc-cyan); } /* Autorenzeile und Datumszeile im Band */ .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__autor { grid-row: 3; margin-top: clamp(1.5rem, 4vw, 2rem); color: var(--qc-fenster-text); } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__stand { grid-row: 4; margin-top: 0.25rem; padding-bottom: var(--qc-kopf-unten); color: var(--qc-fenster-text-2); } /* im Kopf wie Überschriften ohne Silbentrennung (die Wörter passen auch bei 320 px) */ .qc-artikel--kopf > .qc-artikel__text > :is(.qc-artikel__autor, .qc-artikel__stand) { hyphens: manual; -webkit-hyphens: manual; } .qc-artikel--marke > .qc-artikel__text > .qc-artikel__stand { padding-bottom: calc(var(--qc-kopf-unten) + var(--qc-marke-h) + 1.75rem); } /* Marke unten links */ .qc-blogkopf__marke { position: absolute; left: var(--qc-kopf-innen); bottom: var(--qc-kopf-unten); } .qc-blogkopf__marke::before { content: attr(data-marke); display: block; box-sizing: border-box; height: var(--qc-marke-h); padding: 0 0.875rem; border: 1px solid var(--qc-gold); border-radius: 2px; font-family: var(--qc-mono); font-weight: 500; font-size: 0.75rem; line-height: calc(var(--qc-marke-h) - 2px); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--qc-gold); } /* Ziffer mit „Part n“: klein oben rechts in einer Zeile mit der Kennzeile („PART 2“ links der Ziffer) … */ .qc-blogkopf__ziffer { position: absolute; right: var(--qc-kopf-innen); top: var(--qc-kopf-oben); height: 2.25rem; display: flex; align-items: center; gap: 0.625rem; } .qc-blogkopf__ziffer::before { content: attr(data-ziffer); display: block; font-family: var(--qc-sans-112); font-weight: 600; font-stretch: 112%; font-size: 3rem; line-height: 0.75; color: transparent; -webkit-text-stroke: 1.5px var(--qc-cyan); } .qc-blogkopf__ziffer::after { content: attr(data-teil); display: block; order: -1; font-family: var(--qc-mono); font-weight: 500; font-size: 0.6875rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--qc-fenster-text-2); } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__blog { padding-inline-end: calc(var(--qc-kopf-x) + 6rem); } /* sehr schmal (bis 22rem, etwa 320–350 px): nur die Ziffer, Marke etwas kleiner */ @container qc-beitrag (max-width: 22rem) { .qc-blogkopf__ziffer::after { display: none; } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__blog { padding-inline-end: 2.75rem; } .qc-blogkopf__marke::before { padding: 0 0.625rem; font-size: 0.6875rem; letter-spacing: 0.08em; } } /* … und groß rechts, wenn der Artikel breit genug ist (OG-Bild: Ziffer über „PART 2“, unten auf Höhe der Marke) */ @container qc-beitrag (min-width: 48rem) { .qc-artikel--kopf > .qc-artikel__text > :is(.qc-artikel__blog, h1, .qc-artikel__autor, .qc-artikel__stand) { --qc-ziffer-platz: calc(clamp(10rem, 26cqi, 22rem) * 0.66 + 3rem); } .qc-artikel--kopf > .qc-artikel__text > .qc-artikel__blog { padding-inline-end: var(--qc-kopf-x); } .qc-blogkopf__ziffer { top: auto; height: auto; bottom: var(--qc-kopf-unten); flex-direction: column; align-items: center; gap: 1.75rem; } .qc-blogkopf__ziffer::before { font-size: clamp(10rem, 26cqi, 22rem); line-height: 0.76; -webkit-text-stroke-width: 2px; } .qc-blogkopf__ziffer::after { order: 0; font-size: 0.8125rem; line-height: calc(var(--qc-marke-h) - 2px); } } /* Zierde statt Ziffer (Beiträge außerhalb einer Reihe, 'zier' in BLOG, 29.10.2026: „2ד mit „Faster builds“): Das Zeichen ist * breiter als eine Ziffer (Archivo „2ד ≈ 1,3 em) und steht darum kleiner; der Platz rechts reicht für Zeichen oder Zeile, * je nachdem, was breiter ist. Im kleinen Kopf (unter 48rem) nur das Zeichen, ohne die Zeile darunter. */ .qc-blogkopf .qc-blogkopf__ziffer--zier::before { font-size: 2.5rem; } .qc-blogkopf .qc-blogkopf__ziffer--zier::after { display: none; } @container qc-beitrag (min-width: 48rem) { .qc-artikel--zier > .qc-artikel__text > :is(.qc-artikel__blog, h1, .qc-artikel__autor, .qc-artikel__stand) { --qc-ziffer-platz: calc(max(clamp(6rem, 15cqi, 12.5rem) * 1.3, 10rem) + 3rem); } .qc-blogkopf .qc-blogkopf__ziffer--zier::before { font-size: clamp(6rem, 15cqi, 12.5rem); } .qc-blogkopf .qc-blogkopf__ziffer--zier::after { display: block; } } @media (min-width: 1024px) { .qc-artikel--kopf { padding-top: clamp(2rem, 3vw, 3rem); } .qc-artikel--kopf.qc-artikel--ohne-inhalt { grid-template-columns: minmax(0, 1fr); } .qc-artikel--kopf:not(.qc-artikel--ohne-inhalt) { grid-template-columns: 14rem minmax(0, 1fr); } .qc-artikel--kopf > .qc-artikel__text { --qc-kopf-x: clamp(2.5rem, 4.5vw, 4rem); --qc-kopf-innen: var(--qc-kopf-x); } .qc-artikel--kopf > .qc-artikel__text > .qc-blogkopf { margin-inline: 0; border: 1px solid var(--qc-fenster-rand); border-radius: 10px; } } /* Übersicht: Platte mit Datum, Titel, Unterzeile und Ziffer; Autorenzeile und Anreißer darunter wie bisher */ .qc-teil--blog .qc-beitraege { border-top: 0; display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); } .qc-teil--blog .qc-beitrag { --qc-platte-x: clamp(1.25rem, 4vw, 2rem); --qc-ziffer-platz: 0px; display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 0; border-bottom: 0; container: qc-karte / inline-size; } .qc-teil--blog .qc-beitrag > * { grid-column: 1; } .qc-beitrag__platte { grid-row: 1 / 3; position: relative; z-index: 0; overflow: hidden; border: 1px solid var(--qc-fenster-rand); border-radius: 10px; background-color: var(--qc-fenster); background-image: linear-gradient(var(--qc-fenster-raster) 1px, transparent 1px), linear-gradient(90deg, var(--qc-fenster-raster) 1px, transparent 1px); background-size: var(--qc-raster-luecke) var(--qc-raster-luecke); background-position: -1px -1px; } .qc-teil--blog .qc-beitrag > .qc-beitrag__datum { grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; min-height: 1.75rem; margin: 0; padding: var(--qc-platte-x) calc(var(--qc-platte-x) + 5.5rem) 0 var(--qc-platte-x); color: var(--qc-fenster-text-2); } .qc-teil--blog .qc-beitrag > h2 { grid-row: 2; position: relative; z-index: 1; max-width: none; margin: 0; padding: 0.875rem calc(var(--qc-platte-x) + var(--qc-ziffer-platz)) var(--qc-platte-x) var(--qc-platte-x); font-family: var(--qc-sans-112); font-stretch: 112%; font-size: clamp(1.5rem, 3cqi + 0.75rem, 2.25rem); line-height: 1.06; letter-spacing: -0.01em; color: var(--qc-fenster-titel); } .qc-teil--blog .qc-beitrag > h2 .qc-blogtitel__unter { margin-top: 0.625rem; font-size: clamp(0.875rem, 0.6cqi + 0.75rem, 1rem); line-height: 1.5; } .qc-teil--blog .qc-beitrag h2 a { color: inherit; text-decoration: none; } /* Die ganze Fläche des Titels samt Rand der Platte ist der Link */ .qc-teil--blog .qc-beitrag h2 a::after { content: ""; position: absolute; inset: 0; } .qc-teil--blog .qc-beitrag h2 a:hover .qc-blogtitel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; } .qc-teil--blog .qc-beitrag h2 a:hover { color: var(--qc-fenster-titel); } .qc-teil--blog .qc-beitrag h2 a:focus-visible { outline: none; } .qc-teil--blog .qc-beitrag h2 a:focus-visible::after { outline: 2px solid var(--qc-cyan); outline-offset: -4px; border-radius: 8px; } .qc-teil--blog .qc-beitrag > h2 + .qc-beitrag__autor { margin-top: 1rem; } .qc-beitrag__platte .qc-blogkopf__ziffer { right: var(--qc-platte-x); top: var(--qc-platte-x); height: 1.75rem; gap: 0.5rem; } .qc-beitrag__platte .qc-blogkopf__ziffer::before { font-size: 2.25rem; } @container qc-karte (max-width: 20rem) { .qc-beitrag__platte .qc-blogkopf__ziffer::after { display: none; } .qc-teil--blog .qc-beitrag > .qc-beitrag__datum { padding-right: calc(var(--qc-platte-x) + 2.25rem); } } @container qc-karte (min-width: 34rem) { .qc-teil--blog .qc-beitrag > :is(h2, .qc-beitrag__datum) { --qc-ziffer-platz: 9rem; } .qc-teil--blog .qc-beitrag > .qc-beitrag__datum { padding-right: var(--qc-platte-x); } .qc-beitrag__platte .qc-blogkopf__ziffer { top: auto; height: auto; bottom: var(--qc-platte-x); flex-direction: column; align-items: center; gap: 1rem; } .qc-beitrag__platte .qc-blogkopf__ziffer::before { font-size: 7.5rem; line-height: 0.76; } .qc-beitrag__platte .qc-blogkopf__ziffer::after { order: 0; } } /* Zierde in der Platte: kleiner als die Ziffer (breiteres Zeichen), die Zeile erst ab 26rem Kartenbreite */ .qc-beitrag__platte .qc-blogkopf__ziffer--zier::before { font-size: 1.75rem; } @container qc-karte (max-width: 26rem) { .qc-beitrag__platte .qc-blogkopf__ziffer--zier::after { display: none; } } @container qc-karte (min-width: 34rem) { .qc-beitrag__platte .qc-blogkopf__ziffer--zier::before { font-size: 4.5rem; } } @media print { .qc-blogkopf, .qc-beitrag__platte, .qc-blogkopf__vor { display: none !important; } .qc-artikel--kopf > .qc-artikel__text { display: block; } .qc-artikel--kopf > .qc-artikel__text > :is(.qc-artikel__blog, h1, .qc-artikel__autor, .qc-artikel__stand), .qc-teil--blog .qc-beitrag > :is(h2, .qc-beitrag__datum) { padding: 0; color: #000; } .qc-blogtitel__unter { color: #000; } }