:root {
  --header-height: 88px;
  --ink: #382621;
  --burgundy: #792742;
  --burgundy-dark: #582033;
  --brown: #35231c;
  --paper: #fffaf3;
  --rose: #f1e2e3;
  --muted: #705b55;
  --line: #d8c9c3;
  --control-line: #9a7c75;
  --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:where(button, a, input, summary, textarea):focus-visible { outline: 3px solid var(--burgundy); outline-offset: 4px; box-shadow: 0 0 0 4px var(--paper); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: 1.1; letter-spacing: -.035em; }
h1 em, h2 em { font-weight: 400; }
h2 { font-size: clamp(36px, 4.1vw, 58px); }
h3, h4 { line-height: 1.35; font-weight: 500; letter-spacing: -.025em; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
p + p { margin-top: 15px; }
[hidden] { display: none !important; }
.wrap { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.skip { position: fixed; z-index: 20; top: -100px; left: 20px; background: var(--paper); padding: 12px 20px; }
.skip:focus { top: 12px; }
.header { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; min-height: var(--header-height); padding-inline: max(48px, calc((100% - 1440px) / 2)); display: flex; align-items: center; justify-content: flex-end; gap: 30px; color: var(--paper); }
.header nav { display: flex; gap: 32px; font-size: 13px; }
.header nav a { text-decoration: none; padding-block: 12px; }
.header nav a:hover { text-decoration: underline; text-underline-offset: 7px; }
.hero { position: relative; isolation: isolate; color: var(--paper); background: radial-gradient(ellipse at 12% 5%, #96345280, transparent 54%), radial-gradient(ellipse at 62% 74%, #96274b70, transparent 62%), linear-gradient(118deg, #711e3b, #500e25); padding: calc(var(--header-height) + 24px) 0 44px; }
/* Wenige ruhige Wellen; rein dekorativ, ohne Animation oder Touch-Fläche. */
.hero-waves { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-waves .wave-edge { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-inner { width: min(1440px, calc(100% - 96px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: .7fr auto auto 1.3fr; column-gap: clamp(24px, 3vw, 48px); min-height: clamp(420px, calc(100svh - 300px), 560px); }
.hero-copy { grid-column: 1; grid-row: 2; min-width: 0; }
.hero-action { grid-column: 1; grid-row: 3; align-self: start; }
.eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 2.3px; margin-bottom: 25px; }
.hero .eyebrow { color: #efd7dd; font-size: 9px; letter-spacing: 1.9px; margin-bottom: 32px; }
#hero-title { font-size: clamp(30px, 3.35vw, 54px); line-height: 1.22; letter-spacing: -.035em; }
#hero-title > span { display: block; }
#hero-title > span + span { margin-top: .12em; }
.lead { margin-top: 28px; color: #f4e4df; font-size: 15px; line-height: 1.8; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 12px 23px; border: 1px solid transparent; border-radius: 2px; text-decoration: none; font-size: 13px; line-height: 1.5; transition: background .15s; }
.hero-button { margin-top: 28px; border: 1px solid var(--paper); border-radius: 30px; background: var(--paper); color: var(--burgundy); padding-inline: 25px; }
.hero-button:hover { background: #efd9cf; border-color: #efd9cf; }
.hero-note { margin-top: 12px; font-size: 11px; color: #efd7dd; }
.newton-stage { grid-column: 2; grid-row: 1 / 5; margin: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; background: transparent; }
.newton-push { position: relative; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; line-height: 0; cursor: grab; touch-action: pan-y; }
.newton-push.is-dragging { cursor: grabbing; }
.newton-push.is-3d { touch-action: pinch-zoom; }
.newton-push:disabled { opacity: 1; cursor: default; }
.newton-art { width: 100%; height: auto; display: block; overflow: visible; }
.newton-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.newton-push.is-3d .newton-art { visibility: hidden; }
.newton-push.is-pointer-active:focus-visible { outline: none; }
.newton-push:focus-visible { outline: 1px solid var(--paper); outline-offset: -10px; box-shadow: none; }
.newton-caption { position: relative; margin: 0; min-height: 36px; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--paper); font-size: 11px; text-align: center; }
.hero :where(a, button):focus-visible, .header a:focus-visible { outline-color: var(--paper); box-shadow: none; }
.credential-strip { display: flex; justify-content: center; gap: 30px; padding-block: 22px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.credential-strip span:first-child { color: var(--burgundy); }
.section { padding-block: 100px; }
.offer { position: relative; isolation: isolate; padding: 28px 0 70px; background: #fff8f4; }
.offer-waves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.offer-inner { width: min(1440px, calc(100% - 96px)); }
.offer-nav { display: flex; justify-content: flex-end; gap: 30px; margin-bottom: 42px; color: var(--burgundy); font-size: 15px; }
.offer-nav a { padding-block: 8px; text-decoration: none; }
.offer-nav a:hover, .offer-nav a[aria-current] { text-decoration: underline; text-underline-offset: 8px; }
.offer-nav a[aria-current] { font-weight: 600; }
.offer-heading h2 { color: var(--burgundy); font-size: clamp(38px, 4.2vw, 64px); letter-spacing: -.025em; }
.offer-heading > p { font-size: clamp(15px, 1.6vw, 22px); line-height: 1.5; margin-top: 14px; }
.offer-heading .offer-instruction { font-size: 13px; color: var(--muted); margin-top: 10px; }
.offer-game { margin-top: 28px; }
.offer-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--burgundy); font-size: 13px; }
.offer-reset { min-height: 44px; padding: 8px 0 8px 16px; border: 0; background: none; color: var(--burgundy); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.offer-feedback { grid-column: 1 / -1; grid-row: 1; min-height: 44px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.offer-feedback[data-kind="success"], .offer-feedback[data-kind="retry"] { color: var(--burgundy); }
.offer-feedback[data-kind="success"] { font-weight: 600; }
.offer-feedback[data-kind="retry"] { font-weight: 600; }
.offer-board { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; gap: 18px 28px; }
.offer-targets { grid-column: 1; grid-row: 2; position: sticky; top: 16px; display: grid; gap: 16px; align-self: start; z-index: 2; }
.offer-target { display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; align-items: center; width: 100%; min-height: 102px; padding: 16px; border: 2px solid var(--burgundy); border-radius: 22px; background: var(--burgundy); color: var(--paper); text-align: left; }
.offer-target > span:first-child { font: 20px/1.2 Georgia, serif; overflow-wrap: anywhere; hyphens: auto; }
.offer-target-count { font: 10px/1.4 Arial, sans-serif; padding: 4px 6px; border: 1px solid #fffaf350; border-radius: 18px; white-space: nowrap; }
.offer-target-hint { grid-column: 1 / -1; font-size: 11px; line-height: 1.4; opacity: .8; }
.offer-target.is-ready { border-color: #c77491; }
.offer-target.is-over { background: var(--paper); color: var(--burgundy); border-color: var(--burgundy); box-shadow: 0 0 0 4px #79274220; }
.offer-target.is-over .offer-target-count { border-color: var(--burgundy); }
.offer-target.is-mismatch { outline: 2px dashed var(--burgundy); outline-offset: 4px; }
.offer-target.is-complete { background: #582033; border-color: #582033; }
.offer-pool { grid-column: 2; grid-row: 2; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.offer-notes { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 560px); min-width: 0; padding: 26px; margin-inline: auto; }
.offer-notes.has-second::before, .offer-notes.has-third::after { content: ''; position: absolute; inset: 26px; border-radius: 2px; box-shadow: 0 8px 12px -8px #6d343d50; pointer-events: none; }
.offer-notes.has-second::before { z-index: -1; background: var(--stack-second, #d8e7f0); transform: translate(-7px, 10px) rotate(-4deg); }
.offer-notes.has-third::after { z-index: -2; background: var(--stack-third, #fbdccd); transform: translate(10px, 19px) rotate(4deg); }
.offer-deck-count { color: var(--muted); font-size: 13px; text-align: center; margin-top: 18px; }
.offer-note { --note-color: #f9d4e3; --note-angle: -3deg; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 142px; padding: 20px 15px 15px; border: 0; border-radius: 2px; background: linear-gradient(140deg, #ffffff35, #ffffff00 70%), var(--note-color); color: #43232c; box-shadow: 0 10px 12px -8px #6d343d60, 0 2px 3px #6d343d12; transform: rotate(var(--note-angle)); font: 23px/1.2 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.offer-note:nth-child(even) { --note-angle: 2deg; }
.offer-note { hyphens: manual; overflow-wrap: anywhere; }
.offer-note:not(.is-matched) { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; }
.offer-note.is-dragging { opacity: .45; cursor: grabbing; }
.offer-drag-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; opacity: .92; transform: translate(-50%, -50%) scale(.75) rotate(-2deg); transition: none; box-shadow: 0 18px 40px #38262144; }
.offer-dragging, .offer-dragging * { cursor: grabbing !important; }
.offer-note::after { content: ''; display: block; width: 35%; height: 1px; margin-top: 10px; background: currentColor; opacity: .6; transform: rotate(-4deg); }
.offer-note:hover:not(:disabled) { z-index: 1; transform: translateY(-4px) rotate(0); box-shadow: 0 14px 18px -8px #6d343d60; }
.offer-note:focus-visible, .offer-note[aria-expanded="true"], .offer-note[aria-pressed="true"] { z-index: 1; transform: rotate(0); outline: 2px solid var(--burgundy); outline-offset: 4px; }
.offer-note:disabled { opacity: 1; cursor: default; }
#offer-pool .offer-note { min-height: 280px; padding: 32px 26px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.25; --note-angle: -1deg; }
#offer-pool .offer-note::after { margin-top: 22px; }
.note-yellow { --note-color: #ffedaf; }
.note-blue { --note-color: #d8e7f0; }
.note-peach { --note-color: #fbdccd; }
.note-green { --note-color: #e9edbc; }
.offer-match { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; position: relative; margin-top: 24px; padding: 26px 52px 26px 28px; border-left: 3px solid var(--burgundy); background: #fffdfae8; box-shadow: 0 8px 24px #7927420a; scroll-margin: 24px 0 100px; }
.offer-match .eyebrow { color: var(--burgundy); font-size: 9px; letter-spacing: 1.4px; margin-bottom: 10px; }
.offer-match h3 { color: var(--burgundy); font: 27px/1.2 Georgia, serif; }
.offer-match h4 { color: var(--burgundy); font-size: 14px; font-weight: 600; }
.offer-match-help > p:last-child, .offer-match-step > p { margin-top: 12px; font: 14px/1.65 Arial, Helvetica, sans-serif; color: var(--muted); }
.offer-match-step .button { margin-top: 17px; border-radius: 26px; font-size: 12px; }
.offer-match-close { position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; border: 0; background: none; color: var(--burgundy); font: 28px/1 Arial, sans-serif; }
.offer-bottom { display: flex; align-items: center; gap: 26px; margin-top: 38px; }
.offer-check { border-radius: 30px; padding-inline: 26px; font: 21px/1.3 Georgia, serif; }
.offer-bottom p { color: var(--muted); font-size: 13px; }
.offer-complete { min-height: 360px; padding: 36px; background: #f4e5e9; color: var(--burgundy); text-align: center; }
.offer-complete > span { font-size: 42px; }
.offer-complete h3 { font: 38px/1.2 Georgia, serif; margin: 12px 0; }
.offer-complete p { max-width: 420px; margin-inline: auto; font-size: 15px; }
.offer-complete .button { margin-top: 24px; }
.offer-sorted { border-top: 1px solid var(--line); margin-top: 32px; }
.offer-sorted summary { color: var(--burgundy); font-size: 15px; }
.offer-sorted > p { color: var(--muted); font-size: 13px; }
.offer-sorted-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 22px; }
.offer-sorted-groups h3 { font: 24px/1.2 Georgia, serif; color: var(--burgundy); margin-bottom: 18px; }
.offer-sorted-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.offer-sorted .offer-note { min-height: 110px; padding: 18px 14px; font-size: 21px; transform: none; cursor: pointer; }
.offer-sorted .offer-note::after { content: '✓'; width: auto; height: auto; background: none; font: 13px/1 Arial, sans-serif; transform: none; }
summary { padding: 18px 0; }
.check-section { padding-block: 80px; color: var(--paper); background: var(--burgundy); }
.check-heading { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.check-heading .eyebrow { color: #ead3dc; }
.check-heading > p { max-width: 510px; margin: 22px auto 0; font-size: 14px; color: #f1dfe5; }
.check-app { max-width: 940px; margin: auto; padding: 38px 42px; background: var(--paper); color: var(--ink); border-radius: 4px; }
.progress-header { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; margin-bottom: 14px; }
progress { display: block; appearance: none; width: 100%; height: 3px; border: 0; border-radius: 0; background: var(--rose); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--rose); }
progress::-webkit-progress-value { background: var(--burgundy); }
progress::-moz-progress-bar { background: var(--burgundy); }
fieldset { border: 0; padding: 0; margin: 30px 0; min-width: 0; }
legend { font-size: clamp(22px, 2.1vw, 27px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; width: 100%; padding: 0; }
#question-title:focus, #result-title:focus { outline: none; }
.question-help { color: var(--muted); font-size: 13px; margin-top: 12px; }
.answer-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 25px; }
.answer-option { display: flex; align-items: center; gap: 9px; padding: 13px 11px; min-height: 58px; font-size: 13px; border: 1px solid var(--control-line); border-radius: 2px; cursor: pointer; }
.answer-option:hover { background: #f4e9e8; }
.answer-option:has(input:checked) { background: var(--rose); border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); }
.answer-option input { accent-color: var(--burgundy); width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
.question-footer { display: flex; align-items: center; gap: 15px; padding-top: 23px; border-top: 1px solid var(--line); }
.primary { background: var(--burgundy); color: var(--white); }
.primary:hover { background: var(--burgundy-dark); }
.secondary { background: transparent; color: var(--burgundy); border-color: var(--control-line); }
.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.secondary:hover, .ghost:hover { background: var(--rose); }
#back:disabled { visibility: hidden; }
#answer-hint { flex: 1; text-align: right; }
.micro { font-size: 11px; line-height: 1.6; color: var(--muted); }
.check-privacy { max-width: 730px; margin: 22px auto 0; text-align: center; color: #f1dfe5; font-size: 11px; }
.notice { background: var(--paper); padding: 25px; color: var(--ink); }
#result-title { font: 36px/1.2 Georgia, serif; max-width: 770px; }
#result-intro { color: var(--muted); font-size: 14px; margin-top: 18px; }
#result-view .eyebrow { color: var(--burgundy); }
.answer-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.summary-pill { padding: 6px 10px; background: var(--rose); border-radius: 2px; font-size: 11px; }
.summary-pill strong { margin-right: 3px; }
.summary-pill.partial { background: #e9ded6; }
.summary-pill.open { background: var(--paper); border: 1px dashed var(--control-line); padding: 5px 9px; }
.summary-pill.unknown { background: #e7e2df; }
.category-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; border-block: 1px solid var(--line); padding-block: 24px; margin-top: 25px; }
.category-summary h4 { font-size: 15px; }
.category-summary p { color: var(--muted); font-size: 11px; margin-top: 7px; }
.category-meter { display: flex; gap: 4px; margin-top: 12px; }
.category-meter span { flex: 1; height: 4px; background: #c8bbb4; }
.category-meter .yes { background: var(--burgundy); }
.category-meter .partial { background: #9c7665; }
.category-meter .no { background: repeating-linear-gradient(135deg,#9a7c75 0 2px,#f1e2e3 2px 5px); }
.results-label { margin: 28px 0 8px; font-size: 20px; }
.recommendations { list-style: none; counter-reset: rec; padding: 0; margin: 0; }
.recommendations li { display: grid; grid-template-columns: 25px 1fr; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.recommendations li::before { counter-increment: rec; content: '0' counter(rec); color: var(--muted); font-size: 11px; padding-top: 2px; }
.rec-kind { display: block; color: var(--burgundy); font-size: 9px; letter-spacing: 1px; margin-bottom: 7px; }
.recommendations h4 { font-size: 18px; }
.recommendations p { font-size: 13px; color: var(--muted); margin-top: 7px; }
.answers-detail { font-size: 12px; border-bottom: 1px solid var(--line); }
.answers-detail p { color: var(--muted); font-size: 12px; }
.answers-detail dl { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; margin-block: 20px; }
.answers-detail dd { margin: 0; color: var(--burgundy); }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.result-actions .button { font-size: 11px; padding: 10px 13px; }
#action-status { min-height: 18px; margin-top: 10px; }
textarea { width: 100%; padding: 12px; border: 1px solid var(--control-line); background: var(--white); border-radius: 2px; font-size: 13px; }
#copy-fallback label { font-size: 12px; }
.result-contact { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 24px; }
.result-contact h4 { font-size: 19px; }
.result-contact p { font-size: 12px; color: var(--muted); margin-top: 9px; }
.result-contact a { flex-shrink: 0; font-size: 12px; }
#result-view > .micro { margin-top: 12px; }
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 85px; align-items: start; }
.contact .eyebrow { color: var(--burgundy); }
.contact-intro { font-size: 15px; color: var(--muted); margin-top: 25px; }
.contact-email { display: inline-flex; align-items: center; gap: 22px; font-size: clamp(20px, 2.3vw, 28px); color: var(--burgundy); margin-top: 23px; text-decoration: none; border-bottom: 1px solid var(--control-line); }
.personal { padding-top: 28px; margin-top: 38px; border-top: 1px solid var(--line); max-width: 400px; }
.personal h3 { font: 39px/1.2 Georgia, serif; color: var(--burgundy); }
.personal .qualification { font-size: 13px; color: var(--ink); margin-top: 6px; }
.personal p { color: var(--muted); font-size: 14px; margin-top: 20px; }
.personal .micro { font-size: 11px; }
.contact-form { padding: 30px; border: 1px solid var(--line); border-radius: 3px; background: #fffdf9; }
.contact-form h3 { font: 29px/1.2 Georgia, serif; color: var(--burgundy); }
.form-intro { color: var(--muted); font-size: 11px; margin-top: 10px; }
.contact-form fieldset { margin: 24px 0 0; }
.form-row + .form-row { margin-top: 18px; }
.form-row label { display: block; font-size: 13px; margin-bottom: 6px; }
.form-row label span { color: var(--muted); font-size: 11px; }
.form-row input, .form-row textarea { width: 100%; min-height: 46px; padding: 11px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--control-line); border-radius: 2px; font-size: 16px; line-height: 1.5; }
.form-row textarea { resize: vertical; }
.form-row textarea::placeholder { color: var(--muted); opacity: .85; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-privacy { font-size: 11px; color: var(--muted); margin: 18px 0; }
.form-privacy button { padding: 0; border: 0; background: none; color: var(--burgundy); text-decoration: underline; font-size: inherit; }
.form-status { font-size: 12px; line-height: 1.6; margin-top: 16px; color: var(--muted); }
.form-status:empty { display: none; }
.form-status[data-kind="error"] { color: var(--burgundy); font-weight: 600; }
.form-status[data-kind="success"] { color: var(--burgundy); padding: 14px; background: var(--rose); }
.contact-form fieldset:disabled input, .contact-form fieldset:disabled textarea { opacity: .65; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.footer > div { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer button { color: inherit; background: transparent; border: 0; padding: 0; font-size: inherit; }
.footer a { text-decoration: none; }
dialog { width: min(590px, calc(100% - 32px)); max-height: 85vh; padding: 38px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; }
dialog::backdrop { background: #25161caa; }
dialog h2 { font-size: 32px; padding-right: 23px; margin-bottom: 24px; }
dialog p { font-size: 13px; }
.dialog-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--burgundy); font-size: 30px; }
@media (max-width: 1000px) {
  .hero { padding: calc(var(--header-height) + 16px) 0 36px; text-align: center; }
  .hero-inner { width: calc(100% - 64px); max-width: 720px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0; min-height: 0; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  #hero-title { font-size: clamp(32px, 4.8vw, 46px); }
  .newton-stage { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 22px; height: clamp(280px, 42vw, 350px); }
  .newton-push { height: calc(100% - 36px); flex-shrink: 0; }
  .newton-art { width: auto; height: 100%; max-width: 100%; margin-inline: auto; }
  .hero-action { grid-column: 1; grid-row: 3; }
  .hero-button { margin-top: 24px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
  .lead { font-size: 14px; }
  .contact { gap: 55px; }
  .answer-options { grid-template-columns: repeat(2, 1fr); }
  .result-contact { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (max-width: 720px) {
  :root { --header-height: 80px; }
  .wrap { width: calc(100% - 40px); }
  .header { width: 100%; min-height: var(--header-height); gap: 10px; padding: 18px 20px 10px; flex-wrap: wrap; }
  .header nav { gap: 18px; font-size: 12px; }
  .header nav a:first-child { display: none; }
  .hero { padding: calc(var(--header-height) + 16px) 0 32px; }
  .hero-inner { width: calc(100% - 40px); max-width: 640px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 19px; }
  #hero-title { font-size: clamp(22px, 6.65vw, 44px); }
  .lead { font-size: 13px; margin-top: 18px; line-height: 1.7; }
  .newton-stage { margin-top: 18px; height: clamp(240px, 64vw, 330px); }
  .newton-caption { font-size: 10px; }
  .hero-button { max-width: 100%; margin-top: 22px; padding-inline: 20px; gap: 14px; }
  .hero-note { font-size: 10px; }
  .credential-strip { flex-direction: column; align-items: center; gap: 1px; padding-block: 20px; }
  .section { padding-block: 58px; }
  .contact { grid-template-columns: 1fr; gap: 35px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.8px; margin-bottom: 20px; }
  .check-section { padding-block: 54px; }
  .check-heading { margin-bottom: 30px; }
  .check-heading > p { font-size: 13px; margin-top: 20px; }
  .check-app { padding: 25px 18px; }
  .progress-header { font-size: 10px; gap: 8px; }
  fieldset { margin: 25px 0; }
  legend { font-size: 23px; }
  .question-help { font-size: 12px; }
  .answer-options { gap: 8px; margin-top: 22px; }
  .answer-option { padding: 11px 9px; font-size: 12px; min-height: 60px; }
  .question-footer { flex-wrap: wrap; justify-content: space-between; }
  #answer-hint { order: 3; flex-basis: 100%; text-align: center; }
  .check-privacy { font-size: 10px; text-align: left; }
  #result-title { font-size: 30px; }
  #result-intro { font-size: 13px; }
  .category-summary { grid-template-columns: 1fr; gap: 22px; }
  .category-meter { max-width: 230px; }
  .recommendations li { gap: 10px; grid-template-columns: 23px 1fr; }
  .recommendations h4 { font-size: 18px; }
  .answers-detail dl { grid-template-columns: 1fr; gap: 4px; }
  .answers-detail dd { margin-bottom: 12px; }
  .personal { border-left: 0; border-top: 1px solid var(--line); padding: 30px 0 0; max-width: none; }
  .personal h3 { font-size: 35px; }
  .contact-email { font-size: 23px; gap: 15px; }
  .contact-form { padding: 24px 20px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer > div { gap: 18px; line-height: 2; }
  dialog { padding: 30px 24px; }
}
@media (max-width: 370px) {
  .header nav { gap: 12px; }
  .header nav a { font-size: 11px; }
  .answer-options { grid-template-columns: 1fr; }
  .contact-email { font-size: 21px; }
}
@media (max-width: 1150px) {
  .offer-board { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .offer-target > span:first-child { font-size: 18px; }
  .offer-match { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
  .offer { padding: 20px 0 48px; }
  .offer-inner { width: calc(100% - 40px); }
  .offer-nav { gap: 22px; margin-bottom: 32px; font-size: 13px; }
  .offer-heading h2 { font-size: clamp(35px, 8.5vw, 48px); }
  .offer-heading > p { font-size: 15px; margin-top: 16px; }
  .offer-heading .offer-instruction { font-size: 12px; }
  .offer-game { margin-top: 20px; }
  .offer-board { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .offer-feedback { grid-column: 1; grid-row: 2; min-height: 50px; margin: 0; font-size: 13px; text-align: center; }
  .offer-pool { grid-column: 1; grid-row: 1; }
  .offer-targets { grid-column: 1; grid-row: 3; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .offer-target { min-height: 94px; padding: 10px; gap: 6px; border-radius: 16px; }
  .offer-target > span:first-child { grid-column: 1 / -1; font-size: 17px; }
  .offer-target-count { justify-self: start; font-size: 9px; padding: 2px 5px; }
  .offer-target-hint { grid-column: 2; text-align: right; font-size: 9px; }
  .offer-notes { padding: 22px; max-width: 430px; }
  .offer-notes.has-second::before, .offer-notes.has-third::after { inset: 22px; }
  #offer-pool .offer-note { min-height: 204px; padding: 25px 20px; font-size: clamp(25px, 7vw, 30px); }
  .offer-deck-count { margin-top: 10px; font-size: 12px; }
  .offer-note { min-height: 143px; padding: 18px 12px 14px; font-size: clamp(19px, 5.2vw, 24px); --note-angle: -2deg; }
  .offer-note:nth-child(even) { --note-angle: 1.5deg; }
  .offer-match { grid-column: 1; padding: 24px 28px 24px 20px; gap: 20px; }
  .offer-match h3 { font-size: 25px; padding-right: 14px; }
  .offer-match-step .button { max-width: 100%; }
  .offer-sorted-groups { grid-template-columns: minmax(0, 1fr); }
  .offer-sorted .offer-note { font-size: 20px; }
  .offer-complete { min-height: 0; padding: 28px 20px; }
  .offer-complete h3 { font-size: 32px; }
  .offer-bottom { align-items: flex-start; flex-direction: column; gap: 15px; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .offer-note { transition: none; }
}
@media print {
  @page { margin: 15mm; }
  body { background: white; color: #000; font-size: 11pt; }
  .header, .hero, .credential-strip, .offer, .check-heading, #question-view, .check-privacy, .contact, .footer, dialog, .result-actions, .result-contact, #result-view > .micro, .answers-detail, #copy-fallback, #action-status, .skip { display: none !important; }
  .check-section { padding: 0; background: none; color: #000; }
  .wrap { width: 100%; max-width: none; }
  .check-app { padding: 0; background: none; color: #000; }
  .category-summary { grid-template-columns: repeat(3, 1fr); }
  .recommendations li { break-inside: avoid; }
  .answer-summary { margin-top: 15px; }
  #result-title { font-size: 27pt; }
  #result-view::before { content: 'Digitalhilfe für KMU · Bruno Schuler · Dipl. Wirtschaftsinformatiker HF · kmu@marktportal.ch'; display: block; font-size: 9pt; margin-bottom: 20px; }
  #result-view::after { content: 'Selbsteinschätzung auf Basis Ihrer Antworten. Keine automatische Website- oder technische Prüfung.'; display: block; font-size: 9pt; margin-top: 20px; }
  #result-view .eyebrow { font-size: 9pt; }
  .category-meter { display: none; }
}

/* Den Selbstcheck ohne vorheriges Scrollen aufrufen. */
body:has(#quick-check[open]) { overflow: hidden; }
#quick-check { width: min(980px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; padding: 0; overscroll-behavior: contain; }
.quick-check-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: var(--paper); }
.quick-check-header h2 { margin: 0; padding: 0; font: 19px/1.4 Georgia, serif; color: var(--burgundy); }
.quick-check-header .dialog-close { position: static; flex-shrink: 0; width: 32px; height: 32px; font-size: 26px; }
#quick-check .check-app { width: 100%; max-width: none; padding-top: 28px; border-radius: 0; }
@media (max-width:720px) {
 .quick-check-header { padding: 13px 18px; }
 .quick-check-header h2 { font-size: 17px; }
 #quick-check .check-app { padding: 22px 18px; }
 #quick-check { width: calc(100% - 20px); max-height: 94vh; max-height: 94dvh; }
 .hero-note { max-width: 280px; margin-inline: auto; }
}
@media print {
 #quick-check[open] { display: block !important; position: static; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; padding: 0; margin: 0; }
 #quick-check::backdrop, .quick-check-header { display: none !important; }
 #quick-check .check-app { padding: 0; }
 body:has(#quick-check[open]) { overflow: visible; }
}

/* Selbstcheck: Themenwahl, einzelne Fragen und Ergebnis. */
.check-section, #quick-check { position: relative; isolation: isolate; color: var(--paper); background: radial-gradient(ellipse at 14% 10%, #98365488, transparent 58%), linear-gradient(115deg, #792742, #500d28); }
.check-section { padding: 30px 0 50px; }
.check-section::before, #quick-check::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='.8' y2='1'%3E%3Cstop stop-color='%23d6658b' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%23bc4568' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x2='.2' y2='1'%3E%3Cstop stop-color='%23b4456c' stop-opacity='.24'/%3E%3Cstop offset='1' stop-color='%23500925' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H1240C860 170 530 45 0 235Z' fill='url(%23a)'/%3E%3Cpath d='M0 235C530 45 860 170 1240 0' fill='none' stroke='%23ed90aa' stroke-opacity='.19'/%3E%3Cpath d='M0 825C540 605 620 1050 1600 680V900H0Z' fill='url(%23b)'/%3E%3Cpath d='M0 825C540 605 620 1050 1600 680' fill='none' stroke='%23dc809d' stroke-opacity='.17'/%3E%3Cpath d='M400 900C900 710 1140 805 1600 560V900Z' fill='url(%23a)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.check-nav { display: flex; justify-content: flex-end; gap: 32px; margin-bottom: 26px; font-size: 15px; }
.check-nav a { padding: 4px 0; text-decoration: none; }
.check-nav a[aria-current] { border-bottom: 1px solid #fffaf3aa; }
.check-heading { max-width: none; margin: 0 0 32px; text-align: left; }
.check-heading h2 { font-size: clamp(36px,4.4vw,60px); }
.check-heading > p { max-width: none; margin: 15px 0 0; font-size: 17px; color: #f1dfe5; }
.check-app { max-width: 1200px; padding: 34px 38px 22px; border-radius: 24px; background: #fffaf3; box-shadow: 0 20px 50px #31071922; }
#topic-title, #no-topic-title, .question-topic { font: 38px/1.2 Georgia, serif; color: var(--burgundy-dark); letter-spacing: -.025em; }
#topic-title:focus, #no-topic-title:focus { outline: none; }
.check-intro { margin-top: 12px; font-size: 15px; color: var(--muted); }
.topic-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.topic-card { position: relative; isolation: isolate; border: 2px solid transparent; border-radius: 10px 10px 22px 10px; min-height: 130px; padding: 22px 14px 15px; color: #5e2338; background: var(--topic-color); box-shadow: 0 7px 10px #5b25331c; line-height: 1.3; overflow-wrap: break-word; }
.topic-card::after { content: ''; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 0 0 20px 0; background: #5b25330c; pointer-events: none; }
.topic-yellow { --topic-color: #ffedb4; }
.topic-pink { --topic-color: #f8dbe3; }
.topic-blue { --topic-color: #dceaf2; }
.topic-green { --topic-color: #eaf0c8; }
.topic-card > span:first-child { display: block; font-size: 19px; max-width: 230px; margin: auto; }
.topic-state { display: block; margin-top: 10px; min-height: 16px; font-size: 11px; }
.topic-card:hover { border-color: #79274270; }
.topic-card[aria-pressed="true"] { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy), 0 7px 10px #5b25331c; }
.topic-footer { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
#topic-count { margin-right: auto; font-size: 13px; color: var(--muted); }
.text-button { border: 0; background: none; color: var(--burgundy); font-size: 13px; padding: 10px 0; text-underline-offset: 4px; }
.text-button:hover { text-decoration: underline; }
.check-app .button { border-radius: 30px; min-height: 46px; padding: 11px 24px; font-size: 14px; }
#start-check, #next { min-width: 144px; }
.check-message { min-height: 22px; font-size: 12px; color: var(--burgundy); margin-top: 8px; }
.check-steps { display: flex; justify-content: center; gap: 25px; list-style: none; counter-reset: check-step; margin: 18px 0 0; padding: 19px 0 0; border-top: 1px solid #e9dcd6; color: var(--muted); font-size: 11px; }
.check-steps li { counter-increment: check-step; display: flex; align-items: center; gap: 8px; }
.check-steps li::before { content: counter(check-step); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #ccb0b9; border-radius: 50%; flex-shrink: 0; }
.check-steps li[aria-current] { color: var(--burgundy); font-weight: bold; }
.check-steps li[aria-current]::before { color: var(--paper); background: var(--burgundy); border-color: var(--burgundy); }
.check-privacy { margin-top: 20px; font-size: 12px; text-align: center; }
.progress-header { align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--burgundy); }
#step-label { font-weight: 600; }
#progress { height: 7px; border-radius: 10px; }
#progress::-webkit-progress-value { border-radius: 10px; }
.question-topic { margin-top: 32px; }
#question-form fieldset { margin: 16px 0 28px; }
#question-title { font: 21px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0; max-width: 930px; }
.question-help { margin-top: 12px; font-size: 14px; }
.answer-options { margin-top: 28px; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.answer-option { align-items: flex-start; min-height: 118px; padding: 22px 16px; border-radius: 15px; border: 1px solid #dcbcc7; gap: 11px; }
.answer-option input { width: 20px; height: 20px; margin-top: 2px; }
.answer-option strong { display: block; font-size: 17px; color: var(--burgundy-dark); font-weight: 600; line-height: 1.4; }
.answer-option small { display: block; font-size: 12px; line-height: 1.5; margin-top: 8px; color: var(--muted); }
.answer-option:has(input:checked) { background: #f6dce5; }
.answer-yes:has(input:checked) { background: #eaf0c8; }
.answer-partial:has(input:checked) { background: #ffedb4; }
.answer-unknown:has(input:checked) { background: #dceaf2; }
.question-footer { padding-top: 22px; }
#question-form { margin-bottom: 28px; }
#result-title { font-size: 40px; color: var(--burgundy-dark); }
#result-intro { font-size: 15px; }
.category-summary { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.summary-pill { border-radius: 20px; font-size: 12px; padding: 7px 13px; }
.summary-pill.yes { background: #eaf0c8; }
.summary-pill.partial { background: #ffedb4; }
.summary-pill.open { background: #f6dce5; border: 0; padding: 7px 13px; }
.summary-pill.unknown { background: #dceaf2; }
.rec-kind { font-size: 11px; letter-spacing: 0; }
.recommendations h4 { font-size: 20px; }
.recommendations p { font-size: 14px; }
.empty-check-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0 60px; }
#quick-check { width: min(1180px, calc(100% - 40px)); max-width: calc(100% - 16px); padding: 0 22px 22px; border-radius: 24px; border: 0; }
.quick-check-header { background: linear-gradient(110deg, #792742, #61152f); border: 0; padding: 22px 12px; position: sticky; top: 0; z-index: 2; }
.quick-check-header h2, .quick-check-header .dialog-close { color: var(--paper); }
.quick-check-header h2 { font-size: 28px; }
#quick-check .check-app { padding: 30px 32px 22px; border-radius: 18px; }
@media (max-width: 1000px) {
 .topic-options { gap: 14px; }
 .topic-card > span:first-child { font-size: 17px; }
 .answer-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
 .check-section { padding: 20px 0 32px; }
 .check-nav { gap: 24px; font-size: 13px; margin-bottom: 30px; }
 .check-heading { margin-bottom: 24px; }
 .check-heading h2 { font-size: clamp(35px,9vw,46px); }
 .check-heading > p { font-size: 15px; margin-top: 16px; }
 .check-app { padding: 24px 18px 20px; border-radius: 20px; }
 #topic-title, #no-topic-title, .question-topic { font-size: 28px; }
 .check-intro { font-size: 13px; }
 .topic-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
 .topic-card { min-height: 122px; padding: 18px 9px 12px; }
 .topic-card > span:first-child { font-size: clamp(14px,3.8vw,18px); }
 .topic-state { font-size: 10px; margin-top: 9px; }
 .topic-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 12px; margin-top: 24px; }
 #topic-count { grid-column: 1 / -1; font-size: 12px; }
 #no-topics { text-align: left; font-size: 12px; }
 .check-app .button { padding: 11px 18px; font-size: 13px; }
 #start-check, #next { min-width: 100px; }
 .check-steps { gap: 12px; font-size: 10px; margin-top: 12px; }
 .check-steps li { flex: 1; flex-direction: column; text-align: center; gap: 7px; line-height: 1.4; }
 .check-message { font-size: 12px; line-height: 1.5; }
 .check-privacy { font-size: 11px; }
 .progress-header { font-size: 12px; }
 .progress-header .text-button { font-size: 12px; }
 .question-topic { margin-top: 24px; }
 #question-form fieldset { margin-top: 14px; }
 #question-title { font-size: 19px; line-height: 1.5; }
 .question-help { font-size: 12px; }
 .answer-options { gap: 10px; margin-top: 22px; }
 .answer-option { padding: 16px 10px; min-height: 120px; gap: 8px; }
 .answer-option input { width: 18px; height: 18px; }
 .answer-option strong { font-size: 14px; }
 .answer-option small { font-size: 11px; }
 .question-footer { gap: 12px; padding-top: 18px; }
 #answer-hint:empty { display: none; }
 #result-title { font-size: 32px; }
 #result-intro { font-size: 14px; }
 .category-summary { grid-template-columns: minmax(0,1fr); }
 .recommendations h4 { font-size: 19px; }
 .result-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .result-actions .button { padding: 11px 8px; font-size: 12px; }
 #quick-check { width: calc(100% - 16px); padding: 0 10px 10px; border-radius: 18px; }
 .quick-check-header { padding: 17px 8px; gap: 10px; }
 .quick-check-header h2 { font-size: 22px; }
 #quick-check .check-app { padding: 24px 16px 18px; border-radius: 14px; }
}
@media (max-width: 370px) {
 .check-app { padding-inline: 14px; }
 .topic-options { gap: 9px; }
 .answer-options { grid-template-columns: minmax(0,1fr); }
 .answer-option { min-height: 82px; padding: 15px; }
 .answer-option small { margin-top: 4px; }
}
@media print {
 #topic-view, #no-topic-view, .check-steps, .check-nav, .check-section::before, #quick-check::before { display: none !important; }
 .check-section, #quick-check { background: white; color: black; padding: 0; }
 .check-app, #quick-check .check-app { padding: 0; box-shadow: none; }
 .quick-check-header { display: none !important; }
}

/* Optionaler KI-Chat, passend zur ruhigen burgunderfarbenen Gestaltung. */
.chat-launcher { position: fixed; right: 24px; bottom: 22px; z-index: 30; display: flex; gap: 10px; align-items: center; min-height: 48px; border: 1px solid var(--paper); border-radius: 30px; padding: 10px 17px; background: var(--burgundy); color: var(--paper); box-shadow: 0 4px 20px #38262125; font-size: 13px; }
.chat-launcher > span { font-size: 9px; letter-spacing: .07em; border: 1px solid #fffaf370; padding: 0 5px; border-radius: 3px; }
.chat-dialog { position: fixed; inset: auto 24px 22px auto; margin: 0; width: min(420px,calc(100% - 32px)); max-height: min(730px,calc(100dvh - 32px)); padding: 0; border-radius: 16px; box-shadow: 0 18px 80px #38262133; }
.chat-dialog[open] { display: flex; flex-direction: column; }
.chat-dialog::backdrop { background: #25161c33; }
.chat-header { display: flex; justify-content: space-between; gap: 12px; padding: 24px; background: var(--burgundy); color: var(--paper); flex-shrink: 0; }
.chat-header h2 { padding: 0; margin: 0; font-size: 30px; }
.chat-header p:last-child { margin-top: 9px; font-size: 11px; color: #efd7dd; }
.chat-close { align-self: flex-start; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #fffaf360; border-radius: 50%; color: inherit; background: transparent; font-size: 25px; line-height: 1; }
.chat-close:focus-visible { outline-color: var(--paper); box-shadow: none; }
.chat-body { padding: 22px 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 80px; flex: 1 1 auto; }
.chat-welcome { color: var(--muted); font-size: 13px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.chat-suggestions button { text-align: left; font-size: 11px; color: var(--burgundy); background: transparent; border: 1px solid var(--line); border-radius: 18px; padding: 7px 11px; }
.chat-suggestions button:hover { background: var(--rose); }
.chat-entry { margin-top: 18px; max-width: 95%; }
.chat-entry > span { display: block; font-size: 9px; color: var(--muted); margin-bottom: 4px; }
.chat-entry p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.65; padding: 12px 14px; background: var(--rose); border-radius: 10px 10px 10px 0; }
.chat-entry.user { margin-left: auto; }
.chat-entry.user > span { text-align: right; }
.chat-entry.user p { background: var(--burgundy); color: var(--paper); border-radius: 10px 10px 0 10px; }
.chat-form { flex-shrink: 0; padding: 15px 24px 12px; border-top: 1px solid var(--line); }
.chat-form > label { display: block; font-size: 11px; margin-bottom: 7px; }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { resize: none; min-height: 60px; max-height: 130px; border-radius: 8px; font-size: 16px; line-height: 1.5; color: var(--ink); background: #fffdf9; }
.chat-compose > button { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--burgundy); color: var(--paper); font-size: 24px; }
.chat-status { color: var(--burgundy); font-size: 11px; line-height: 1.5; margin-top: 10px; }
.chat-status:empty { display: none; }
.chat-privacy { margin-top: 10px; font-size: 10px; color: var(--muted); line-height: 1.5; }
.chat-privacy button, .chat-footer button { color: var(--burgundy); padding: 0; background: transparent; border: 0; font-size: inherit; text-decoration: underline; }
.chat-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 24px 18px; font-size: 11px; }
.chat-footer a { color: var(--burgundy); text-underline-offset: 3px; }
.camera-intro-cover { position: fixed; inset: 0; z-index: 50; background: var(--burgundy); pointer-events: none; }
body.camera-intro { overflow-x: clip; --intro-copy-opacity: 0; }
.camera-intro .hero { position: relative; z-index: 51; }
.camera-intro .newton-stage { overflow: visible; }
.camera-intro .newton-push { z-index: 52; }
.camera-intro .hero-copy, .camera-intro .hero-action, .camera-intro .newton-caption { opacity: var(--intro-copy-opacity); }
@media (max-width: 720px) {
 .chat-launcher { right: 14px; bottom: 14px; padding: 9px 14px; }
 .chat-dialog { right: 8px; bottom: 8px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
 .chat-header { padding: 20px; }
 .chat-body { padding: 18px 20px; }
 .chat-form { padding-inline: 20px; }
 .chat-footer { padding-inline: 20px; }
 .footer { padding-bottom: 85px; }
}
@media print { .chat-launcher, .chat-dialog, .camera-intro-cover { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .camera-intro-cover { display: none; } }

@media (max-height: 600px) {
 .chat-header { padding: 12px 18px; }
 .chat-header h2 { font-size: 24px; }
 .chat-header p:last-child { margin-top: 3px; }
 .chat-body { min-height: 35px; padding: 12px 18px; }
 .chat-form { padding: 8px 18px; }
 .chat-compose textarea { min-height: 48px; height: 48px; }
 .chat-footer { padding: 8px 18px; }
}

body.selfcheck-in-view .chat-launcher, body:has(#quick-check[open]) .chat-launcher { display: none; }

@media (min-width: 721px) and (max-width: 900px) { .topic-options { grid-template-columns: repeat(2,minmax(0,1fr)); } .topic-card { min-height: 112px; } }