/* CH Selbsttest – Frontend im Website-Designsystem */ .ch-selftest { --ch-green: #29483a; --ch-green-hover: #1f3a2f; --ch-gold: #b18a4a; --ch-gold-text: #8a672d; --ch-ink: #27312c; --ch-body: #4f5a54; --ch-muted: #6b756f; --ch-ivory: #f8f5ee; --ch-sand: #f3ebdd; --ch-line: #e7e3da; --ch-white: #ffffff; --ch-radius: 14px; --ch-radius-large: 18px; --ch-shadow: 0 10px 30px rgba(41, 72, 58, 0.07); width: 100%; max-width: 980px; margin-inline: auto; color: var(--ch-body); font-family: "Open Sans", Arial, sans-serif; font-size: 18px; line-height: 1.7; } .ch-selftest *, .ch-selftest *::before, .ch-selftest *::after { box-sizing: border-box; } .ch-selftest [data-ch-selftest-results-list], .ch-selftest [data-ch-selftest-results-chart], .ch-selftest [data-ch-selftest-top] { display: none; } .ch-selftest .ch-selftest__form, .ch-selftest .ch-selftest__results, .ch-selftest .ch-selftest__top { margin: 0; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--ch-line); border-radius: var(--ch-radius-large); background: var(--ch-white); box-shadow: var(--ch-shadow); } .ch-selftest .ch-selftest__form { overflow: hidden; border-top: 4px solid var(--ch-gold); } .ch-selftest .ch-selftest__intro { max-width: 760px; margin: 0 0 28px; font-size: 20px; line-height: 1.65; } .ch-selftest .ch-selftest__intro:empty { display: none; } .ch-selftest .ch-selftest__progress { margin: 0 0 clamp(32px, 5vw, 50px); } .ch-selftest .ch-selftest__progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; } .ch-selftest .ch-selftest__progress-label { color: var(--ch-gold-text); font-family: Montserrat, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .ch-selftest .ch-selftest__progress-text { color: var(--ch-muted); font-family: Montserrat, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; } .ch-selftest .ch-selftest__progress-track { overflow: hidden; height: 8px; border-radius: 999px; background: var(--ch-sand); } .ch-selftest .ch-selftest__progress-bar { width: 0; height: 100%; border-radius: inherit; background: var(--ch-gold); transition: width 280ms ease; } .ch-selftest .ch-selftest__question-screen { margin: 0; } .ch-selftest .ch-selftest__question-text { max-width: 800px; margin: 0 0 26px; color: var(--ch-green); font-family: Montserrat, Arial, sans-serif; font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.28; } .ch-selftest .ch-selftest__question-text:focus { outline: none; } .ch-selftest .ch-selftest__answers { display: grid; gap: 12px; } .ch-selftest .ch-selftest__answer { position: relative; } .ch-selftest .ch-selftest__answer input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .ch-selftest .ch-selftest__answer label { position: relative; display: flex; min-height: 62px; align-items: center; padding: 15px 54px 15px 20px; border: 1px solid var(--ch-line); border-radius: 12px; background: var(--ch-white); color: var(--ch-ink); cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.45; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .ch-selftest .ch-selftest__answer label::after { position: absolute; top: 50%; right: 20px; width: 22px; height: 22px; border: 2px solid #c8cec9; border-radius: 50%; background: var(--ch-white); content: ""; transform: translateY(-50%); transition: 180ms ease; } .ch-selftest .ch-selftest__answer label:hover { border-color: rgba(41, 72, 58, 0.45); background: var(--ch-ivory); transform: translateY(-1px); } .ch-selftest .ch-selftest__answer input:focus-visible + label { outline: 3px solid rgba(177, 138, 74, 0.35); outline-offset: 3px; } .ch-selftest .ch-selftest__answer input:checked + label { border-color: var(--ch-green); background: rgba(41, 72, 58, 0.06); box-shadow: 0 8px 22px rgba(41, 72, 58, 0.08); } .ch-selftest .ch-selftest__answer input:checked + label::after { border: 6px solid var(--ch-green); } .ch-selftest .ch-selftest__nav, .ch-selftest .ch-selftest__actions, .ch-selftest .ch-selftest__restart-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .ch-selftest button { min-height: 50px; padding: 12px 24px; border: 2px solid var(--ch-green); border-radius: 999px; background: var(--ch-green); box-shadow: 0 12px 28px rgba(41, 72, 58, 0.16); color: var(--ch-white); cursor: pointer; font-family: Montserrat, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35; transition: 180ms ease; } .ch-selftest button:hover, .ch-selftest button:focus-visible { border-color: var(--ch-green-hover); background: var(--ch-green-hover); box-shadow: 0 16px 34px rgba(41, 72, 58, 0.22); color: var(--ch-white); transform: translateY(-1px); } .ch-selftest button:focus-visible { outline: 3px solid rgba(177, 138, 74, 0.38); outline-offset: 3px; } .ch-selftest button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .ch-selftest .ch-selftest__back, .ch-selftest .ch-selftest__reset { border-color: var(--ch-green); background: transparent; box-shadow: none; color: var(--ch-green); } .ch-selftest .ch-selftest__back:hover, .ch-selftest .ch-selftest__back:focus-visible, .ch-selftest .ch-selftest__reset:hover, .ch-selftest .ch-selftest__reset:focus-visible { background: var(--ch-green); } .ch-selftest .ch-selftest__actions { padding-top: 2px; } .ch-selftest .ch-selftest__submit { display: none; } .ch-selftest .ch-selftest__messages { margin-top: 18px; } .ch-selftest .ch-selftest__message { padding: 16px 18px; border-left: 4px solid var(--ch-gold); border-radius: 0 10px 10px 0; background: var(--ch-ivory); color: var(--ch-ink); } .ch-selftest .ch-selftest__results, .ch-selftest .ch-selftest__top { margin-top: 24px; } .ch-selftest .ch-selftest__headline { margin: 0 0 26px; color: var(--ch-green); font-family: Montserrat, Arial, sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .ch-selftest .ch-selftest__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ch-result; } .ch-selftest .ch-selftest__list-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--ch-line); counter-increment: ch-result; } .ch-selftest .ch-selftest__list-item:first-child { border-top: 1px solid var(--ch-line); } .ch-selftest .ch-selftest__list-item::before { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: var(--ch-ivory); color: var(--ch-gold-text); content: counter(ch-result, decimal-leading-zero); font-family: Montserrat, Arial, sans-serif; font-size: 12px; font-weight: 700; } .ch-selftest .ch-selftest__list-core { color: var(--ch-ink); font-weight: 600; } .ch-selftest .ch-selftest__list-points { color: var(--ch-green); font-family: Montserrat, Arial, sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; } .ch-selftest .ch-selftest__chart { display: grid; grid-template-columns: repeat(9, minmax(30px, 1fr)); gap: clamp(7px, 1.3vw, 14px); min-height: 280px; align-items: end; padding: 28px 18px 0; border-bottom: 2px solid var(--ch-line); border-radius: 12px 12px 0 0; background: linear-gradient(to top, rgba(231, 227, 218, 0.45) 1px, transparent 1px); background-size: 100% 25%; margin-bottom: 28px; } .ch-selftest .ch-selftest__bar { position: relative; min-height: 250px; } .ch-selftest .ch-selftest__bar-inner { position: absolute; right: 0; bottom: 0; left: 0; min-height: 3px; height: calc((var(--value) / var(--max)) * 100%); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--ch-gold), #947037); box-shadow: 0 8px 20px rgba(138, 103, 45, 0.16); } .ch-selftest .ch-selftest__bar-label, .ch-selftest .ch-selftest__bar-value { position: absolute; right: 0; left: 0; text-align: center; font-family: Montserrat, Arial, sans-serif; font-weight: 700; } .ch-selftest .ch-selftest__bar-label { bottom: -25px; color: var(--ch-green); font-size: 12px; } .ch-selftest .ch-selftest__bar-value { bottom: calc((var(--value) / var(--max)) * 100% + 7px); color: var(--ch-green); font-size: 13px; } .ch-selftest .ch-selftest__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin-top: 28px; } .ch-selftest .ch-selftest__legend-item { display: flex; align-items: flex-start; gap: 10px; color: var(--ch-body); font-size: 15px; line-height: 1.45; } .ch-selftest .ch-selftest__legend-swatch { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--ch-ivory); color: var(--ch-gold-text); font-family: Montserrat, Arial, sans-serif; font-size: 11px; font-weight: 700; } .ch-selftest .ch-selftest__top { border-top: 4px solid var(--ch-gold); background: radial-gradient(circle at 90% 0%, rgba(177, 138, 74, 0.14), transparent 30%), var(--ch-white); } .ch-selftest .ch-selftest__top-item + .ch-selftest__top-item { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ch-line); } .ch-selftest .ch-selftest__top-core { margin-bottom: 15px; color: var(--ch-green); font-family: Montserrat, Arial, sans-serif; font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; } .ch-selftest .ch-selftest__top-desc { max-width: 760px; } .ch-selftest .ch-selftest__top-desc > :first-child { margin-top: 0; } .ch-selftest .ch-selftest__top-desc > :last-child { margin-bottom: 0; } .ch-selftest .ch-selftest__top-desc a { color: var(--ch-green); font-weight: 700; text-underline-offset: 3px; } @media (max-width: 700px) { .ch-selftest { font-size: 17px; } .ch-selftest .ch-selftest__form, .ch-selftest .ch-selftest__results, .ch-selftest .ch-selftest__top { padding: 26px 20px; border-radius: var(--ch-radius); } .ch-selftest .ch-selftest__question-text { font-size: 25px; } .ch-selftest .ch-selftest__answer label { min-height: 58px; padding: 13px 48px 13px 16px; font-size: 16px; } .ch-selftest .ch-selftest__answer label::after { right: 16px; } .ch-selftest .ch-selftest__list-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; } .ch-selftest .ch-selftest__list-points { grid-column: 2; margin-top: -8px; } .ch-selftest .ch-selftest__results--chart { overflow: hidden; } .ch-selftest .ch-selftest__chart { grid-template-columns: repeat(9, minmax(22px, 1fr)); gap: 5px; min-height: 230px; padding-inline: 8px; } .ch-selftest .ch-selftest__bar { min-height: 200px; } .ch-selftest .ch-selftest__bar-label, .ch-selftest .ch-selftest__bar-value { font-size: 10px; } .ch-selftest .ch-selftest__legend { grid-template-columns: 1fr; } .ch-selftest .ch-selftest__nav, .ch-selftest .ch-selftest__actions, .ch-selftest .ch-selftest__restart-wrap { align-items: stretch; flex-direction: column; } .ch-selftest button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ch-selftest *, .ch-selftest *::before, .ch-selftest *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }