/* ============================================================= Quizpoker Design System Verbindliche Regeln: siehe DESIGN.md im Repo-Root. Diese Datei wird global geladen, wirkt aber nur über :root und @font-face. Sichtbar wird sie erst über class="qp-page" am . Aktuell gesetzt auf: Startseite, Gamemode-Select, Einzelspieler. ============================================================= */ /* ------------------------------------------------------------- 1. Schriften — lokal gehostet, kein Google-CDN (DESIGN.md §3) ------------------------------------------------------------- */ @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url("../fonts/noto-sans-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url("../fonts/noto-sans-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/roboto-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/roboto-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------- 2. Tokens — die einzige Stelle mit Hex-Codes (DESIGN.md §2) ------------------------------------------------------------- */ :root { /* Grund — steigt in vier Stufen mit dem Aufdeck-Fortschritt */ --qp-bg-0: #191a1d; --qp-bg-1: #1f2024; --qp-bg-2: #26262b; --qp-bg-3: #292930; /* Flächen & Linien */ --qp-surface: #1f2024; --qp-hair: rgba(255, 255, 255, 0.11); /* Text */ --qp-ink: #ffffff; --qp-dim: rgba(255, 255, 255, 0.58); --qp-dimmer: rgba(255, 255, 255, 0.38); /* Akzent — der Verlauf ist die Marke */ --qp-accent: linear-gradient( 310deg, rgba(249, 197, 20, 1) 0%, rgba(243, 151, 17, 1) 50%, rgba(236, 98, 13, 1) 100% ); /* Einzelfarben, wo ein Verlauf technisch nicht geht */ --qp-accent-solid: #f39711; --qp-accent-hi: #f9c514; --qp-accent-lo: #ec620d; --qp-accent-mute: rgba(243, 151, 17, 0.7); --qp-accent-soft: rgba(243, 151, 17, 0.45); --qp-glow: rgba(243, 151, 17, 0.32); /* Erreichbarkeit des Supports — einziger Grünton, nur für den Chat-Status */ --qp-online: #3ecf8e; /* Die vier Lichtstufen der Fragenkarte (DESIGN.md §4) */ --qp-stage-0: #1f2024; --qp-stage-1: #212228; --qp-stage-2: #24252b; --qp-stage-3: #292930; /* Radien */ --qp-r-sm: 9px; --qp-r-md: 13px; --qp-r-lg: 20px; --qp-r-pill: 999px; /* Schriftrollen */ --qp-display: "Noto Sans", "Arial Black", system-ui, sans-serif; --qp-body: "Manrope", system-ui, -apple-system, sans-serif; --qp-mono: "Roboto", ui-monospace, "SF Mono", monospace; /* Bewegung */ --qp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --qp-light: 1100ms; --qp-appear: 600ms; } /* ------------------------------------------------------------- 3. Seitenrahmen und die Lichtstufe (DESIGN.md §4) Die Bühne ist die Fragenkarte, nicht die Seite: `data-step` steht an der Karte, mit jeder Stufe steigt ihr Grund und der Goldspot dreht auf. Alpine/JS schreibt nur diesen einen Wert, den Rest macht CSS. ------------------------------------------------------------- */ .qp-page { background-color: var(--qp-bg-0) !important; color: var(--qp-ink); font-family: var(--qp-body); min-height: 100dvh; padding-top: env(safe-area-inset-top); } .qp-stage { position: relative; /* clip statt hidden: die Karte darf kein eigener Scrollbereich werden, sonst scrollt scrollIntoView die Kopfzeile aus der Karte heraus. */ overflow: clip; flex-direction: column; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-lg); background-color: var(--qp-stage-0); transition: background-color 900ms var(--qp-ease); } .qp-stage:not(.qp-slide) { display: flex; } /* Kartendeck: eine Karte liegt oben, die anderen liegen still darunter. Beim Blättern kommt die neue Karte aus der Blätterrichtung herein. */ .qp-deck { position: relative; } .qp-slide { display: none; } .qp-slide.is-active { display: flex; flex-direction: column; animation: qp-slide-in 260ms var(--qp-ease) both; } .qp-slide.is-active[data-enter="prev"] { animation-name: qp-slide-in-back; } @keyframes qp-slide-in { from { opacity: 0; transform: translateX(18px); } } @keyframes qp-slide-in-back { from { opacity: 0; transform: translateX(-18px); } } .qp-stage[data-step="1"] { background-color: var(--qp-stage-1); } .qp-stage[data-step="2"] { background-color: var(--qp-stage-2); } .qp-stage[data-step="3"] { background-color: var(--qp-stage-3); } .qp-spot { position: absolute; inset: -40%; pointer-events: none; background: radial-gradient( 56% 40% at 50% 22%, var(--qp-accent-hi) 0%, rgba(236, 98, 13, 0.55) 42%, transparent 70% ); opacity: 0.045; transform: scale(0.72); transition: opacity var(--qp-light) var(--qp-ease), transform var(--qp-light) var(--qp-ease); } .qp-stage[data-step="1"] .qp-spot { opacity: 0.095; transform: scale(0.9); } .qp-stage[data-step="2"] .qp-spot { opacity: 0.155; transform: scale(1.05); } .qp-stage[data-step="3"] .qp-spot { opacity: 0.27; transform: scale(1.3); } /* Kopfzeile der Karte: Status links, Zähler rechts, darunter der Fortschritt als vier Balken. */ .qp-stage-top { position: relative; z-index: 2; padding: 18px 18px 0; display: flex; flex-direction: column; gap: 13px; } .qp-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .qp-pill { font-family: var(--qp-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--qp-bg-0); background: var(--qp-accent-solid); padding: 5px 10px; border-radius: var(--qp-r-pill); white-space: nowrap; } .qp-bars { display: flex; gap: 4px; } .qp-bar { height: 3px; flex: 1; border-radius: 2px; background: var(--qp-hair); transition: background-color var(--qp-appear) var(--qp-ease); } .qp-stage[data-step="1"] .qp-bar:nth-child(-n + 2), .qp-stage[data-step="2"] .qp-bar:nth-child(-n + 3), .qp-stage[data-step="3"] .qp-bar, .qp-bar:first-child { background: var(--qp-accent-soft); } .qp-stage[data-step="3"] .qp-bar:nth-child(4) { background: var(--qp-accent-solid); } .qp-stage-body { position: relative; z-index: 2; flex: 1; padding: 26px 18px 12px; display: flex; flex-direction: column; } .qp-stage-foot { position: relative; z-index: 2; padding: 10px 14px 14px; } /* Jede Stufe hat ihren Platz von Anfang an — sie erscheint, sie springt nicht ins Layout (DESIGN.md §4). */ .qp-slot { margin-top: 18px; opacity: 0; transform: translateY(12px); transition: opacity var(--qp-appear) ease, transform var(--qp-appear) var(--qp-ease); } .qp-slot.is-shown { opacity: 1; transform: none; } .qp-tip { border-left: 2px solid var(--qp-accent-soft); padding: 1px 0 1px 13px; } .qp-tip b, .qp-sol b { display: block; font-family: var(--qp-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qp-dim); margin-bottom: 5px; } .qp-sol { margin-top: auto; padding-top: 20px; } .qp-sol b { color: var(--qp-accent-mute); margin-bottom: 2px; } .qp-unit { display: block; font-family: var(--qp-display); font-variation-settings: "wdth" 100, "wght" 700; font-size: 17px; color: var(--qp-dim); margin-top: 7px; } /* Live-Demo im Hero: gleiche Bühne, aber kompakter — sie ist nur ein Appetizer, kein Spielbildschirm, und soll auf der Startseite weniger Höhe beanspruchen. */ #qp-demo.qp-stage { min-height: auto; } #qp-demo .qp-stage-top { padding: 14px 16px 0; gap: 9px; } #qp-demo .qp-stage-body { padding: 16px 16px 8px; } #qp-demo .qp-stage-foot { padding: 8px 14px 12px; } #qp-demo .qp-slot { margin-top: 12px; } #qp-demo .qp-sol { padding-top: 14px; } #qp-demo .sp-question-text { font-size: clamp(19px, 4.6vw, 24px) !important; } #qp-demo .qp-answer { font-size: clamp(34px, 9vh, 52px); } /* ------------------------------------------------------------- 4. Typografie (DESIGN.md §3) ------------------------------------------------------------- */ .qp-page h1, .qp-page h2, .qp-page h3, .qp-page h4, .qp-page h5 { font-family: var(--qp-display); color: var(--qp-ink); text-wrap: balance; letter-spacing: -0.015em; font-variation-settings: "wdth" 100, "wght" 840; line-height: 1.08; margin: 0; /* Lange Komposita brechen, statt bei 200 % Zoom abgeschnitten zu werden */ overflow-wrap: break-word; hyphens: auto; } .qp-page h1 { font-size: clamp(30px, 8vw, 46px); } .qp-page h2 { font-size: clamp(21px, 5.5vw, 28px); } .qp-page h3, .qp-page h4, .qp-page h5 { font-size: clamp(17px, 4.5vw, 21px); } .qp-page p, .qp-page li { color: var(--qp-dim); font-family: var(--qp-body); font-size: 15px; line-height: 1.55; margin: 0; } .qp-page a { color: var(--qp-ink); text-decoration: none; } /* Eyebrow / Mono-Label */ .qp-eyebrow { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--qp-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qp-dimmer); } .qp-eyebrow-accent { color: var(--qp-accent-solid); } /* Alle Zahlen sind Mono (DESIGN.md §3) */ .qp-num { font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--qp-ink); } /* Die Auflösungszahl — einer von zwei erlaubten Verläufen. Der .qp-page-Präfix ist nötig, damit die Größe die Fließtextregel für

schlägt. */ .qp-page .qp-answer, .qp-answer { display: block; font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(54px, 15vh, 92px); line-height: 0.88; letter-spacing: -0.045em; margin: 0; /* line-height < 1 macht die Zeilenbox kleiner als die Glyphen: Klammern und Unterlängen ragen heraus und die Karte (overflow: clip) schneidet sie ab. Der Innenabstand gibt ihnen den Platz zurück. */ padding-block: 0.18em; /* Zahlen stehen in einer Zeile; display.js passt die Größe an, wenn ein Wert breiter baut als die Karte. */ white-space: nowrap; color: var(--qp-accent-hi); /* Rückfall zuerst */ filter: drop-shadow(0 0 34px var(--qp-glow)); } @supports (-webkit-background-clip: text) or (background-clip: text) { .qp-page .qp-answer, .qp-answer { background: var(--qp-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } } @media (forced-colors: active) { .qp-page .qp-answer, .qp-answer { background: none; color: CanvasText; filter: none; } } /* Auflösungen sind nicht immer kurze Zahlen. Je länger der Wert, desto kleiner der Satz — er soll in einer Zeile stehen bleiben. */ .qp-page .qp-answer[data-len="mid"], .qp-answer[data-len="mid"] { font-size: clamp(40px, 11vh, 66px); letter-spacing: -0.035em; } /* Auflösungen aus Text dürfen umbrechen — sie sind keine Zahl */ .qp-page .qp-answer[data-len="long"], .qp-answer[data-len="long"] { font-size: clamp(24px, 6vh, 38px); line-height: 1.15; letter-spacing: -0.02em; /* Zeilenbox trägt die Glyphen hier selbst */ padding-block: 0.04em; white-space: normal; overflow-wrap: anywhere; } .qp-answer a { color: var(--qp-dim); } /* Quellenlink neben der Auflösung — Beleg, kein Blickfang */ .qp-page .qp-answer img { width: 14px; height: 14px; vertical-align: middle !important; opacity: 0.45; } /* ------------------------------------------------------------- 5. Flächen ------------------------------------------------------------- */ .qp-tile { display: block; position: relative; background: var(--qp-surface); border: 1px solid var(--qp-hair); border-radius: var(--qp-r-lg); padding: 18px; color: var(--qp-ink); } .qp-tile-sm { padding: 14px; border-radius: var(--qp-r-md); } a.qp-tile:active { transform: scale(0.985); transition: transform 130ms ease; } /* In der Kachel sitzt die Überschrift eine Stufe kleiner als im Fließtext, sonst wird jede zweispaltige Kachel dreizeilig. */ .qp-page .qp-tile h2, .qp-page .qp-tile h3 { font-size: clamp(17px, 4.6vw, 21px); } .qp-tile-title { margin-bottom: 6px; } .qp-tile-sm .qp-eyebrow { display: block; line-height: 1.5; } .qp-tile-icon { color: var(--qp-accent-solid); font-size: 1.35rem; line-height: 1; display: block; margin-bottom: 10px; } .qp-tile-go { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 12px; color: var(--qp-accent-solid); font-family: var(--qp-body); font-weight: 700; font-size: 14px; } /* Zahnrad liegt über der Kachel, ist aber kein Kind des Links */ .qp-tile-settings { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 8px 10px; line-height: 1; } .qp-rule { height: 1px; background: var(--qp-hair); border: 0; margin: 22px 0; opacity: 1; } /* ------------------------------------------------------------- 6. Aktionen (DESIGN.md §5: primäre Aktion unten, ≥56px) ------------------------------------------------------------- */ .qp-page .qp-btn, .qp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 56px; padding: 0 20px; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-md); background: var(--qp-surface); color: var(--qp-ink); font-family: var(--qp-display); font-variation-settings: "wdth" 100, "wght" 800; font-size: 16px; line-height: 1; cursor: pointer; text-align: center; transition: transform 130ms ease; } .qp-btn:active { transform: scale(0.975); } .qp-btn[disabled], .qp-btn.disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* Der zweite erlaubte Verlauf: die primäre Aktion. Text auf Verlaufsfläche immer --qp-bg-0, nie weiß (DESIGN.md §2). */ .qp-page .qp-btn-primary, .qp-btn-primary, .qp-page .qp-btn-accent, .qp-btn-accent { background: var(--qp-accent); border-color: transparent; color: var(--qp-bg-0); } /* Die Aufdeck-Aktion trägt den Verlauf erst, wenn sie die Auflösung aufdeckt — davor ist sie eine ruhige helle Fläche. */ .qp-page .qp-btn-ink, .qp-btn-ink { background: var(--qp-ink); border-color: transparent; color: var(--qp-bg-0); transition: transform 130ms ease, background-color 400ms var(--qp-ease); } .qp-stage[data-step="2"] .qp-btn-ink { background: var(--qp-accent); } .qp-page .qp-btn-quiet, .qp-btn-quiet { min-height: 44px; padding: 0 14px; font-family: var(--qp-body); font-variation-settings: normal; font-weight: 700; font-size: 14px; color: var(--qp-dim); border-radius: var(--qp-r-sm); } .qp-btn-icon { min-width: 56px; padding: 0; font-size: 20px; } .qp-btn-block { width: 100%; } .qp-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; display: flex; gap: 8px; max-width: 1000px; margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); /* Fläche statt Verlauf: im Projekt gibt es nur zwei Verläufe, den Akzent und den Radialspot (DESIGN.md, Anti-Defaults). */ background-color: var(--qp-bg-0); border-top: 1px solid var(--qp-hair); } /* Weicher Übergang statt harter Kante: der Inhalt verschwindet unter der Leiste, bevor der Rand ihn abschneidet — kein Markenverlauf, nur ein Schwarz-Transparent-Scrim. */ .qp-actionbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(to top, var(--qp-bg-0), transparent); pointer-events: none; } .qp-actionbar .qp-btn-block { flex: 1 1 auto; } /* Die Startaktion auf der Startseite darf stärker leuchten als eine gewöhnliche primäre Aktion — sie ist der einzige Call-to-Action auf dem Screen. */ #start-game-call-to-action.qp-btn-primary { box-shadow: 0 10px 32px -8px var(--qp-glow), 0 0 0 1px var(--qp-accent-soft) inset; } /* Platz, damit die Fußleiste nichts verdeckt */ .qp-page:has(.qp-actionbar) main { padding-bottom: 108px; } /* ------------------------------------------------------------- 7. Chips (Kategorienauswahl) ------------------------------------------------------------- */ .qp-chip { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 14px; margin: 0 6px 6px 0; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-pill); background: transparent; color: var(--qp-dim); font-family: var(--qp-body); font-size: 14px; cursor: pointer; user-select: none; } .qp-chip.is-on { border-color: var(--qp-accent-solid); color: var(--qp-ink); font-weight: 700; } .qp-chip-count { font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--qp-dimmer); } .qp-chip.is-on .qp-chip-count { color: var(--qp-accent-solid); } /* Auswahlkacheln (Feedback-Grund): ein Radio, das wie ein Chip aussieht. Der gewählte Zustand steht auch ohne Farbe fest — Rahmen und Gewicht. */ .qp-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; } .qp-choices legend { float: left; width: 100%; } .qp-choice { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-pill); color: var(--qp-dim); font-family: var(--qp-body); font-size: 14px; cursor: pointer; user-select: none; } .qp-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .qp-choice:has(input:checked) { border-color: var(--qp-accent-solid); color: var(--qp-ink); font-weight: 700; } .qp-choice:has(input:focus-visible) { outline: 3px solid var(--qp-accent-solid); outline-offset: 3px; } /* ------------------------------------------------------------- 7b. Startseite: Ablauf, Bedarf, Mehrspieler-Hinweis ------------------------------------------------------------- */ .qp-page .qp-hero h1 em { font-style: normal; color: var(--qp-accent-solid); } .qp-page .qp-lead { font-size: 16px; line-height: 1.5; color: var(--qp-dim); max-width: 34ch; } .qp-beats { display: flex; flex-direction: column; } /* Als Liste ausgezeichnete Schritte tragen keine Marker — die Ziffer steht als .qp-beat-n im Markup und ist Teil der Typografie. */ ol.qp-beats, ul.qp-beats { list-style: none; margin: 0; padding: 0; } .qp-beat { display: flex; gap: 15px; padding: 15px 0; border-top: 1px solid var(--qp-hair); } .qp-beat:last-child { border-bottom: 1px solid var(--qp-hair); } .qp-beat .qp-beat-n { font-family: var(--qp-mono); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--qp-accent-solid); flex: 0 0 26px; padding-top: 2px; } .qp-page .qp-beat h3 { font-variation-settings: "wdth" 100, "wght" 780; font-size: 16px; margin-bottom: 4px; } .qp-page .qp-beat p { font-size: 14.5px; } .qp-needs { display: flex; flex-wrap: wrap; gap: 8px; } /* Auch als Liste ausgezeichnet bleiben die Marker weg */ ul.qp-needs { list-style: none; margin: 0; padding: 0; } .qp-need { font-family: var(--qp-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; padding: 9px 13px; border-radius: var(--qp-r-sm); border: 1px solid var(--qp-hair); color: var(--qp-dim); } /* Der Mehrspieler-Modus ist ein Nebenweg, keine zweite Hauptaktion */ .qp-aside { display: block; padding: 19px 17px; border-radius: var(--qp-r-md); border: 1px dashed var(--qp-hair); } .qp-page .qp-aside h2 { font-variation-settings: "wdth" 100, "wght" 800; font-size: 17px; margin-bottom: 6px; } .qp-page .qp-aside h3 { font-variation-settings: "wdth" 100, "wght" 800; font-size: 17px; margin-bottom: 6px; } /* Betonte Variante — die durchgezogene Kante markiert den Einstieg */ .qp-aside-accent { border-style: solid; border-color: var(--qp-accent-soft); } .qp-page .qp-aside p { font-size: 14.5px; margin-bottom: 12px; } .qp-page .qp-aside .qp-tile-go { font-family: var(--qp-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--qp-accent-soft); padding-bottom: 2px; margin-top: 0; } /* ------------------------------------------------------------- 7c. Shop (DESIGN.md §8) Aufsteigend nach Preis, hervorgehoben ist genau ein Angebot, und nur dieses trägt eine Argumentzeile. ------------------------------------------------------------- */ .qp-plans { display: flex; flex-direction: column; gap: 9px; } .qp-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 17px; text-align: left; border: 2px solid var(--qp-hair); border-radius: var(--qp-r-md); background: var(--qp-surface); color: var(--qp-ink); cursor: pointer; transition: border-color 220ms ease, transform 130ms ease; } .qp-plan:active { transform: scale(0.985); } .qp-plan[disabled] { opacity: 0.5; cursor: not-allowed; } .qp-plan.is-featured { align-items: flex-start; padding: 21px 17px 19px; border-color: var(--qp-accent-solid); } .qp-plan-main { display: block; min-width: 0; } .qp-plan-title { display: block; font-family: var(--qp-display); font-variation-settings: "wdth" 100, "wght" 820; font-size: 19px; } .qp-plan.is-featured .qp-plan-title { font-size: 21px; } .qp-plan-sub { display: block; margin-top: 5px; font-family: var(--qp-mono); font-size: 11px; letter-spacing: 0.05em; line-height: 1.4; color: var(--qp-dimmer); } .qp-plan-argue { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: var(--qp-accent-solid); } .qp-plan-price { flex: 0 0 auto; font-size: 22px; font-weight: 800; white-space: nowrap; } /* Streichpreis: gedämpft, nie rot (DESIGN.md §8) */ .qp-plan-strike { display: block; font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--qp-dimmer); text-decoration-color: var(--qp-dimmer); } .qp-plan.is-featured .qp-plan-price { font-size: 25px; color: var(--qp-accent-hi); } .qp-page .qp-plan-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--qp-dimmer); } .qp-trust { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--qp-hair); border: 1px solid var(--qp-hair); border-radius: var(--qp-r-md); overflow: hidden; } .qp-trust > div { background: var(--qp-bg-0); padding: 14px 13px; } .qp-trust b { display: block; font-family: var(--qp-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--qp-accent-mute); margin-bottom: 5px; } .qp-page .qp-trust p { font-size: 13px; line-height: 1.4; } /* Kennzahl statt Fließtext — die Zahl trägt die Kachel */ .qp-page .qp-trust p.qp-stat { font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--qp-ink); } /* Kennzahlen mit Wortanteil („vor 4 Minuten", Datum) — gleiche Kachel, ruhigere Größe */ .qp-page .qp-trust p.qp-stat-text { font-size: 19px; } /* Ungerade Kachelzahl: die letzte nimmt die ganze Zeile, statt eine Lücke zu lassen. Einzelne Kacheln können serverseitig fehlen (Kennzahl nicht verfügbar). */ .qp-trust > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Schlichte Vertrauens-Liste (DESIGN.md §8) — Zeilen statt Kacheln */ .qp-trust-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .qp-trust-list li { display: flex; align-items: center; gap: 8px; } .qp-trust-list i { flex: 0 0 auto; margin-top: 2px; font-size: 14px; color: var(--qp-accent-mute); } .qp-page .qp-trust-list span { font-size: 13px; line-height: 1.4; color: var(--qp-dim); } .qp-trust-list b { color: var(--qp-ink); font-weight: 700; } /* Live-Chat-Einstieg — verweist auf die FAQ-Seite, wo der Chat liegt */ .qp-page .qp-chat-status { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-pill); background: var(--qp-surface); font-family: var(--qp-body); font-size: 13px; line-height: 1.4; color: var(--qp-dim); text-decoration: none; cursor: pointer; transition: border-color 160ms var(--qp-ease), background-color 160ms var(--qp-ease); } .qp-page .qp-chat-status:hover, .qp-page .qp-chat-status:focus-visible { border-color: var(--qp-accent-soft); background: var(--qp-bg-3); } .qp-page .qp-chat-status b { color: var(--qp-ink); font-weight: 700; } .qp-dot-live { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--qp-r-pill); background: var(--qp-dimmer); } .qp-dot-live.is-online { background: var(--qp-online); animation: qp-blink 2200ms var(--qp-ease) infinite; } @keyframes qp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .qp-dot-live.is-online { animation: none; } } /* Zugangs- und Einladungslink */ .qp-page .qp-code { font-family: var(--qp-mono); font-size: 12px; color: var(--qp-dim); word-break: break-all; padding: 10px 12px; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-sm); } /* ------------------------------------------------------------- 8. Einzelspieler — Fragenkarte und Aufdeck-Stufen Klassennamen sp-* bleiben, weil Store und Carousel darauf zeigen. ------------------------------------------------------------- */ /* Die Fragenkarte ist die Bühne — Aufbau wie in .qp-stage */ .qp-page .sp-card { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--qp-ink); padding: 0; } .qp-page #sp-deck .qp-slide.sp-card { min-height: min(66vh, 470px); } /* Die Frage — Sendungsgrafik, groß und breitlaufend. Sie steht in einem Textarea und muss mitwachsen, sonst schneidet sie bei langen Fragen ab. */ .qp-page .sp-question-text { font-family: var(--qp-display); font-variation-settings: "wdth" 100, "wght" 840; font-size: clamp(23px, 5.6vw, 29px) !important; line-height: 1.07; letter-spacing: -0.012em; text-align: left; color: var(--qp-ink); background: transparent; border: 0; padding: 0; resize: none; width: 100%; overflow: hidden; field-sizing: content; } /* Jede Stufe hält ihren Platz und erscheint an Ort und Stelle — die Karte springt beim Aufdecken nicht. */ .qp-page .sp-reveal-container { opacity: 0; transform: translateY(12px); transition: opacity var(--qp-appear) ease, transform var(--qp-appear) var(--qp-ease); } .qp-page .sp-reveal-container[state="show"] { opacity: 1; transform: none; } .qp-page .sp-reveal-content { filter: none; } /* Tipps sind unterschiedlich lang — der Kasten wächst mit, statt zu beschneiden. field-sizing dort, wo es der Browser kann; sonst misst display.js beim Aufdecken nach. */ .qp-page .sp-reveal-container .modern-textarea { font-family: var(--qp-body); font-size: 15px !important; line-height: 1.45; color: rgba(255, 255, 255, 0.88); text-align: left; background: transparent !important; border: 0; padding: 0; width: 100%; overflow: hidden; field-sizing: content; } .qp-page .result-style { background-color: transparent !important; } /* Daumen hoch / runter */ .qp-page .sp-feedback-group { display: flex; gap: 8px; } .qp-page .sp-feedback-btn { width: 44px; height: 44px; border-radius: var(--qp-r-pill); border: 1px solid var(--qp-hair); background: transparent; color: var(--qp-dimmer); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 130ms ease; } .qp-page .sp-feedback-btn:active { transform: scale(0.975); } .qp-page .sp-counter-badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0; border: 0; background: transparent; font-family: var(--qp-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qp-dimmer); } .qp-page .sp-interstitial { background: var(--qp-surface); border: 1px solid var(--qp-hair); border-radius: var(--qp-r-lg); padding: 18px; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--qp-ink); } /* Eingabefelder überall auf der Seite, auch in Dialogen */ .qp-page .form-control, .qp-page textarea.form-control { min-height: 48px; background-color: transparent; border: 1px solid var(--qp-hair); border-radius: var(--qp-r-sm); color: var(--qp-ink); font-family: var(--qp-body); font-size: 16px; } .qp-page .form-control:focus { background-color: transparent; border-color: var(--qp-accent-solid); box-shadow: none; color: var(--qp-ink); } .qp-page .form-control::placeholder { color: var(--qp-dimmer); } /* ------------------------------------------------------------- 9. Bestand neutralisieren (DESIGN.md §6) Bootstrap und Soft-UI liefern Verhalten, nicht Aussehen. ------------------------------------------------------------- */ .qp-page .card, .qp-page .modal-content { background: var(--qp-surface) !important; background-image: none !important; border: 1px solid var(--qp-hair) !important; border-radius: var(--qp-r-lg); box-shadow: none; } .qp-page .modal-header, .qp-page .modal-body, .qp-page .modal-footer { background-color: transparent !important; border-color: var(--qp-hair) !important; color: var(--qp-ink); } .qp-page .mask, .qp-page .bg-gradient-dark, .qp-page .bg-gradient-primary, .qp-page .bg-gradient-warning, .qp-page .bg-gradient-secondary { background-image: none !important; background-color: transparent !important; } /* Soft-UI färbt jede Verlinkung mit `!important` und einer Kette aus acht :not()-Ausschlüssen — Spezifität (0,9,1). Wo die Farbe Bedeutung trägt, heben wir uns mit :is(#specificity, …) darüber; :is() übernimmt die Spezifität seines stärksten Arguments, ohne dass die ID existieren muss. Betrifft nur -Elemente,