@font-face {
font-family: "GutQuiz Beispielfragen Cera Pro";
src: url(//gutquiz.de/wp-content/plugins/gutquiz-beispielfragen/assets/fonts/CeraPro-Regular.woff2) format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "GutQuiz Beispielfragen Cera Pro";
src: url(//gutquiz.de/wp-content/plugins/gutquiz-beispielfragen/assets/fonts/CeraPro-Medium.woff2) format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "GutQuiz Beispielfragen Cera Pro";
src: url(//gutquiz.de/wp-content/plugins/gutquiz-beispielfragen/assets/fonts/CeraPro-Bold.woff2) format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
.gqbf {
--gqbf-font-family: "GutQuiz Beispielfragen Cera Pro", Arial, sans-serif;
--gqbf-accent: #e07a5f;
--gqbf-text: #f1e3d3;
--gqbf-white: #fff;
--gqbf-icon-size: 82px;
--gqbf-radius: 7px;
color: var(--gqbf-text);
font: 400 17px/1.6 var(--gqbf-font-family);
text-align: left;
}
.gqbf,
.gqbf *,
.gqbf *::before,
.gqbf *::after { box-sizing: border-box; }
.gqbf button {
font-family: inherit;
cursor: pointer;
box-shadow: none;
letter-spacing: normal;
text-transform: none;
} .gqbf.gqbf-accordions button,
.gqbf.gqbf-notice button,
button.gqbf.gqbf-reopen {
font-family: var(--gqbf-font-family);
height: auto;
position: relative;
overflow: visible;
white-space: normal;
vertical-align: middle;
transform: none;
}
.gqbf button::before,
.gqbf button::after,
button.gqbf::before,
button.gqbf::after {
content: none;
display: none;
}
.gqbf button:focus-visible,
button.gqbf:focus-visible { outline: 3px solid #f7dd99 !important; outline-offset: 5px; }
.gqbf [hidden] { display: none !important; }
.gqbf-accordions {
display: flex;
flex-direction: column;
gap: 26px;
width: 100%;
padding-top: 23px;
}
.gqbf .gqbf-category { position: relative; margin: 0; padding: 0; border: 0; }
.gqbf .gqbf-category-heading { margin: 0; padding: 0; font-family: var(--gqbf-font-family); font-size: inherit; line-height: inherit; }
.gqbf .gqbf-category-header {
position: relative;
display: flex;
overflow: visible;
align-items: center;
gap: 14px;
width: 100%;
min-height: 64px;
margin: 0;
padding: 14px 24px 14px calc(var(--gqbf-icon-size) + 20px);
border: 0;
border-radius: var(--gqbf-radius);
background: var(--gqbf-accent);
color: var(--gqbf-white);
text-align: left;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
transition: border-radius 200ms ease, filter 180ms ease;
}
.gqbf .gqbf-category-header:hover { background: var(--gqbf-accent); color: var(--gqbf-white); filter: brightness(1.05); }
.gqbf .gqbf-category-header:focus { background: var(--gqbf-accent); color: var(--gqbf-white); }
.gqbf .gqbf-category.is-open .gqbf-category-header { border-radius: var(--gqbf-radius) var(--gqbf-radius) 0 0; }
.gqbf .gqbf-category-header.gqbf-without-icon { padding-left: 24px; }
.gqbf .gqbf-category-icon {
position: absolute;
left: 7px;
top: -23px;
width: var(--gqbf-icon-size);
height: var(--gqbf-icon-size);
max-width: none;
border: 0;
object-fit: contain;
pointer-events: none;
}
.gqbf .gqbf-category-title { flex: 1; min-width: 0; font-family: inherit; font-weight: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; white-space: normal; overflow-wrap: anywhere; }
.gqbf .gqbf-caret {
display: inline-block;
flex: 0 0 auto;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 260ms ease;
}
.gqbf .gqbf-category-header[aria-expanded="true"] .gqbf-caret { transform: rotate(225deg); }
.gqbf .gqbf-panel {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
border: 0;
border-radius: 0 0 var(--gqbf-radius) var(--gqbf-radius);
background: rgba(0, 0, 0, .6);
transition: grid-template-rows 280ms ease;
}
.gqbf .gqbf-category.is-open .gqbf-panel { grid-template-rows: 1fr; }
.gqbf .gqbf-panel-clip { min-height: 0; overflow: hidden; }
.gqbf .gqbf-question-list { list-style: none; margin: 0; padding: 7px 28px; }
.gqbf .gqbf-question { list-style: none; margin: 0; padding: 22px 0 18px; }
.gqbf .gqbf-question + .gqbf-question { border-top: 1px solid rgba(241, 227, 211, .14); }
.gqbf .gqbf-question-text { margin: 0; color: var(--gqbf-white); font-size: 17px; font-weight: 400; line-height: 1.6; white-space: pre-line; }
.gqbf .gqbf-answer {
display: flex;
align-items: baseline;
gap: 12px;
max-width: 100%;
min-height: 44px;
margin: 8px 0 0;
padding: 6px 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gqbf-white);
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 1.6;
transition: none;
}
.gqbf .gqbf-answer:hover,
.gqbf .gqbf-answer:focus { background: transparent; color: var(--gqbf-white); }
.gqbf .gqbf-answer-label {
flex: 0 0 auto;
color: var(--gqbf-text);
font-size: 12px;
font-weight: 500;
letter-spacing: .6px;
text-transform: uppercase;
}
.gqbf .gqbf-placeholder { display: inline-block; color: var(--gqbf-white); filter: blur(6px); letter-spacing: 1.5px; user-select: none; }
.gqbf .gqbf-answer:not(.is-revealed):hover .gqbf-placeholder { color: #fff5d7; }
.gqbf .gqbf-answer.is-revealed { color: #f6dfb5; cursor: default; }
.gqbf .gqbf-answer-text { min-width: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; animation: gqbf-answer-reveal 180ms ease-out; }
button.gqbf.gqbf-reopen {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gqbf-text);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(241, 227, 211, .5);
box-shadow: none;
text-transform: none;
transition: color 180ms ease, text-decoration-color 180ms ease;
}
button.gqbf.gqbf-reopen:hover,
button.gqbf.gqbf-reopen:focus { background: transparent; color: var(--gqbf-white); text-decoration-color: var(--gqbf-white); }
dialog.gqbf-notice {
position: fixed;
inset: 0;
width: min(570px, calc(100% - 28px));
max-width: 570px;
height: fit-content;
max-height: calc(100vh - 44px);
max-height: calc(100dvh - 44px);
margin: auto;
padding: 35px 40px 36px;
overflow-y: auto;
overscroll-behavior: contain;
border: 0;
border-radius: 7px;
background: #30271c;
color: var(--gqbf-text);
box-shadow: 0 24px 65px rgba(0, 0, 0, .4);
color-scheme: dark;
}
dialog.gqbf-notice:not([open]) { display: none; }
dialog.gqbf-notice::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); }
dialog.gqbf-notice.gqbf-dialog-fallback { z-index: 2147483647; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .78), 0 24px 65px rgba(0, 0, 0, .4); }
.gqbf .gqbf-notice-title { margin: 0 0 20px; padding: 0; color: var(--gqbf-white); font-family: var(--gqbf-font-family); font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: -.4px; }
.gqbf .gqbf-notice-copy p { margin: 0 0 15px; color: var(--gqbf-text); font-size: 17px; font-weight: 400; line-height: 1.6; }
.gqbf .gqbf-site-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
min-height: 48px;
margin: 10px 0 0;
padding: 0 32px;
border: 0;
border-radius: 5px;
background: #1b4d3e;
color: var(--gqbf-white);
font-size: 14px;
font-weight: 500;
line-height: 48px;
letter-spacing: .42px;
text-transform: uppercase;
transition: background 200ms ease, color 200ms ease;
}
.gqbf .gqbf-site-button:hover { background: #f1e3d3; color: #1b4d3e; }
.gqbf .gqbf-site-button .gqbf-caret { width: 7px; height: 7px; transform: rotate(-45deg); }
.gqbf .gqbf-noscript { margin: 0; padding: 12px 16px; border-radius: 7px; background: rgba(0, 0, 0, .6); color: var(--gqbf-text); }
@keyframes gqbf-answer-reveal {
from { opacity: .3; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.gqbf { --gqbf-icon-size: 70px; }
.gqbf-accordions { gap: 25px; padding-top: 19px; }
.gqbf .gqbf-category-header { min-height: 62px; padding-right: 19px; padding-left: calc(var(--gqbf-icon-size) + 14px); font-size: 18px; gap: 12px; }
.gqbf .gqbf-category-icon { top: -19px; left: 5px; }
.gqbf .gqbf-question-list { padding: 4px 21px; }
dialog.gqbf-notice { padding: 27px 25px 28px; }
.gqbf .gqbf-notice-title { font-size: 28px; }
}
@media (max-width: 380px) {
.gqbf .gqbf-category-header { font-size: 17px; }
.gqbf .gqbf-answer { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
dialog.gqbf-notice { padding: 24px 21px; }
.gqbf .gqbf-notice-copy p { margin-bottom: 12px; font-size: 16px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
.gqbf *, .gqbf *::before, .gqbf *::after { transition: none !important; animation: none !important; }
}