/*! * PZ Toolbox – RSS-Quiz Runtime Styles * Eigenständig, keine externen Fonts/Frameworks. Akzentfarbe über die * CSS-Variable --quiz-accent (wird per JS auf gesetzt, damit sowohl * #quiz-root als auch der Standalone-Hintergrund darauf zugreifen können). * * trägt außerdem die Klasse `quiz-standalone` oder `quiz-embedded` * (per JS gesetzt, siehe quiz-runtime.js: window.self !== window.top). * Direkt über den öffentlichen Link geöffnet -> `quiz-standalone`: das Quiz * füllt den gesamten Browser-Viewport inkl. dekorativem Verlaufshintergrund. * In eine fremde Seite eingebettet (iframe) -> `quiz-embedded`: schlichter, * flächiger Hintergrund, der sich in beliebige Seitenlayouts einfügt. */ :root { --quiz-accent: #005b9a; --quiz-accent-dark: color-mix(in srgb, var(--quiz-accent) 80%, black); --quiz-accent-light: color-mix(in srgb, var(--quiz-accent) 12%, white); --quiz-bg: #f4f6f9; --quiz-surface: #ffffff; --quiz-text: #1c2733; --quiz-text-muted: #5b6b7c; --quiz-border: #dde3ea; --quiz-success: #1a7f3c; --quiz-success-bg: #e6f6ea; --quiz-danger: #b3261e; --quiz-danger-bg: #fbe9e7; --quiz-radius: 20px; --quiz-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 20px 45px -12px rgba(20, 30, 40, .22); } @media (prefers-color-scheme: dark) { :root { --quiz-bg: #10161d; --quiz-surface: #1a232d; --quiz-text: #e9eef3; --quiz-text-muted: #a3b1bf; --quiz-border: #2a3742; --quiz-accent-light: color-mix(in srgb, var(--quiz-accent) 22%, #1a232d); --quiz-success-bg: rgba(26, 127, 60, .18); --quiz-danger-bg: rgba(179, 38, 30, .2); --quiz-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 45px -12px rgba(0, 0, 0, .55); } } html, body { background: var(--quiz-bg); } /* Standalone (öffentlicher Link, kein Embed): dekorativer, dezenter Verlauf in der Akzentfarbe des jeweiligen Quiz, damit der Viewport auch optisch "gefüllt" wirkt statt einer leeren Fläche um die Karte herum. */ html.quiz-standalone body { background: radial-gradient(1100px circle at 12% -8%, color-mix(in srgb, var(--quiz-accent) 20%, transparent), transparent 55%), radial-gradient(900px circle at 108% 112%, color-mix(in srgb, var(--quiz-accent) 16%, transparent), transparent 55%), var(--quiz-bg); background-attachment: fixed, fixed, fixed; } #quiz-root { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--quiz-text); padding: clamp(12px, 4vw, 40px); /* vh/dvh statt Vererbung über html/body: füllt zuverlässig sowohl die eigenständige Seite (öffentlicher Link, ganzer Browser-Viewport) als auch ein iframe-Embed (dort die iframe-Höhe) und zentriert die Karte darin – unabhängig davon, ob Vorfahren eine definierte Höhe haben. */ min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: center; } #quiz-root, #quiz-root * { box-sizing: border-box; } #quiz-root .quiz-card { width: 100%; max-width: 640px; /* Reserviert für Start-/Ergebnisbildschirm dieselbe Fläche wie für eine Frage, damit die Karte beim Durchklicken nicht spürbar in der Höhe springt. Kein max-height/overflow: längere Fragen dürfen weiterhin wachsen, nur kurze Screens werden nicht kleiner. */ min-height: min(560px, calc(100vh - 64px)); min-height: min(560px, calc(100dvh - 64px)); background: var(--quiz-surface); border-radius: var(--quiz-radius); box-shadow: var(--quiz-shadow); padding: clamp(20px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; position: relative; } /* Standalone: Glass-Karte über dem Verlaufshintergrund. Eingebettet bleibt die Karte deckend, da der Hintergrund der Gastseite unbekannt ist. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.quiz-standalone #quiz-root .quiz-card { background: color-mix(in srgb, var(--quiz-surface) 86%, transparent); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); } } html.quiz-standalone #quiz-root .quiz-card { border: 1px solid color-mix(in srgb, var(--quiz-border) 70%, transparent); } #quiz-root .quiz-card.quiz-anim-in { animation: quiz-card-in .5s cubic-bezier(.2, .8, .2, 1) both; } #quiz-root .quiz-header { display: flex; align-items: center; } #quiz-root .quiz-logo { max-height: 40px; width: auto; } #quiz-root .quiz-title-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: calc(var(--quiz-radius) - 8px); } #quiz-root h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; } #quiz-root h1:focus { outline: none; } #quiz-root .quiz-intro { color: var(--quiz-text-muted); margin: 0; line-height: 1.5; } #quiz-root .quiz-meta-line { color: var(--quiz-text-muted); font-size: .9rem; margin: 0; } /* Fortschritt */ #quiz-root .quiz-progress { display: flex; flex-direction: column; gap: 6px; } #quiz-root .quiz-progress-track { height: 8px; border-radius: 999px; background: var(--quiz-border); overflow: hidden; } #quiz-root .quiz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--quiz-accent), color-mix(in srgb, var(--quiz-accent) 60%, #fff)); border-radius: 999px; transform-origin: left center; } #quiz-root .quiz-progress-fill.quiz-anim-in { animation: quiz-progress-grow .6s cubic-bezier(.2, .8, .2, 1) both; } #quiz-root .quiz-progress-label { font-size: .85rem; color: var(--quiz-text-muted); } /* Frage */ #quiz-root .quiz-question-block { display: flex; flex-direction: column; gap: 14px; } #quiz-root .quiz-question { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } #quiz-root .quiz-question-text { font-size: 1.15rem; font-weight: 600; line-height: 1.4; padding: 0; margin: 0 0 4px; } #quiz-root .quiz-question-text:focus { outline: none; } #quiz-root .quiz-question.quiz-anim-in .quiz-question-text { animation: quiz-fade-slide .4s ease both; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer { animation: quiz-fade-slide .4s ease both; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(1) { animation-delay: .03s; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(2) { animation-delay: .07s; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(3) { animation-delay: .11s; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(4) { animation-delay: .15s; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(5) { animation-delay: .19s; } #quiz-root .quiz-question.quiz-anim-in .quiz-answer:nth-of-type(6) { animation-delay: .23s; } #quiz-root .quiz-answer { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--quiz-border); border-radius: 12px; cursor: pointer; background: var(--quiz-surface); transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; } #quiz-root .quiz-answer:hover { border-color: var(--quiz-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 30, 40, .08); } #quiz-root .quiz-answer.is-selected { border-color: var(--quiz-accent); background: var(--quiz-accent-light); animation: quiz-pop .3s ease; } #quiz-root .quiz-answer.is-correct { border-color: var(--quiz-success); background: var(--quiz-success-bg); animation: quiz-pop .35s ease; } #quiz-root .quiz-answer.is-incorrect { border-color: var(--quiz-danger); background: var(--quiz-danger-bg); animation: quiz-shake .35s ease; } #quiz-root .quiz-answer:has(.quiz-answer-input:focus-visible) { outline: 3px solid var(--quiz-accent); outline-offset: 2px; } #quiz-root .quiz-answer-input { width: 20px; height: 20px; min-width: 20px; accent-color: var(--quiz-accent); cursor: pointer; } #quiz-root .quiz-answer-text { line-height: 1.4; } #quiz-root .quiz-explanation, #quiz-root .quiz-source { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--quiz-accent-light); font-size: .95rem; line-height: 1.5; animation: quiz-fade-slide .35s ease both; } #quiz-root .quiz-source { color: var(--quiz-text-muted); background: transparent; border: 1px dashed var(--quiz-border); } /* Aktionen */ /* margin-top: auto schiebt die Buttons an den unteren Kartenrand, falls die Karte wegen min-height höher ist als der eigentliche Inhalt (siehe .quiz-card) – hält den Abstand zum Inhalt oben konsistent statt einer großen Lücke mittendrin. */ #quiz-root .quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: auto; } #quiz-root .quiz-btn { min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid transparent; font-size: 1rem; font-weight: 600; cursor: pointer; background: var(--quiz-border); color: var(--quiz-text); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; } #quiz-root .quiz-btn:focus-visible { outline: 3px solid var(--quiz-accent); outline-offset: 2px; } #quiz-root .quiz-btn:disabled { opacity: .5; cursor: not-allowed; } #quiz-root .quiz-btn:hover:not(:disabled) { transform: translateY(-1px); } #quiz-root .quiz-btn:active:not(:disabled) { transform: translateY(0) scale(.97); } #quiz-root .quiz-btn-primary { background: linear-gradient(135deg, var(--quiz-accent), var(--quiz-accent-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--quiz-accent) 60%, transparent); } #quiz-root .quiz-btn-primary:hover:not(:disabled) { box-shadow: 0 10px 22px -4px color-mix(in srgb, var(--quiz-accent) 70%, transparent); } #quiz-root .quiz-btn-secondary { background: transparent; border-color: var(--quiz-border); color: var(--quiz-text); } #quiz-root .quiz-btn-secondary:hover:not(:disabled) { border-color: var(--quiz-accent); } /* Startbildschirm */ #quiz-root .quiz-start { text-align: left; align-items: flex-start; } #quiz-root .quiz-start .quiz-btn { align-self: flex-start; margin-top: auto; } /* Ergebnis */ #quiz-root .quiz-result { text-align: center; align-items: center; } #quiz-root .quiz-result-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; } #quiz-root .quiz-result-icon { font-size: 3rem; line-height: 1; } #quiz-root .quiz-result-badge.quiz-anim-in .quiz-result-icon { animation: quiz-bounce-in .6s cubic-bezier(.2, .8, .2, 1) both; } #quiz-root .quiz-result-score { font-size: 1.05rem; margin: 0; } #quiz-root .quiz-result-percent { font-size: 2.4rem; font-weight: 800; margin: 0; background: linear-gradient(135deg, var(--quiz-accent), var(--quiz-accent-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; } #quiz-root .quiz-result-description, #quiz-root .quiz-result-message { margin: 0; color: var(--quiz-text-muted); max-width: 46ch; } #quiz-root .quiz-result .quiz-actions { justify-content: center; } @media (max-width: 480px) { #quiz-root .quiz-actions { justify-content: stretch; } #quiz-root .quiz-btn { flex: 1 1 auto; } } /* Animationen */ @keyframes quiz-card-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes quiz-fade-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes quiz-pop { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } } @keyframes quiz-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @keyframes quiz-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes quiz-bounce-in { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.1) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { #quiz-root, #quiz-root * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }