/* The figures are complete in HTML. Motion only illustrates an already readable result. */
.insight-hero, .insight-preview {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
#erkennung h1 { font-size: clamp(2.55rem, 4.25vw, 3.8rem); }
.insight-preview h2 { margin-bottom: 1rem; }

.gain-chart {
  padding: clamp(1.25rem, 3.2vw, 2.75rem);
  border-radius: 1rem;
  color: #fff;
  background: radial-gradient(at 98% 2%, #65435d, transparent 65%), #35112e;
}
.gain-chart figcaption { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; }
.gain-series { margin-top: 1.1rem; }
.gain-row {
  display: grid; grid-template-columns: clamp(6.5rem, 10.5vw, 10rem) minmax(0, 1fr) auto; align-items: center;
  gap: .3rem 1rem; padding: 1.35rem 0; color: inherit; text-decoration: none;
  border-top: 1px solid #78566e;
}
.gain-row:is(:hover, :focus-visible) { color: white; }
.gain-row:is(:hover, :focus-visible) .gain-title { text-decoration: underline; }
.gain-row:focus-visible { outline: 2px solid #a9e9d7; outline-offset: 3px; }
.gain-title, .gain-description { display: block; }
.gain-title { font-weight: 700; line-height: 1.3; }
.gain-description { margin-top: .25rem; font-size: .87rem; font-weight: 400; color: #eee2eb; overflow-wrap: anywhere; }
.gain-row strong { font: 700 clamp(1.65rem, 3.1vw, 2.8rem)/1 Quicksand, sans-serif; color: #ace8d5; white-space: nowrap; letter-spacing: -.055em; }
.gain-arrow { color: #cfb4c7; }
.invoice-example { max-width: 33rem; margin: 1.5rem 0; padding: clamp(1rem, 3vw, 1.65rem); background: #fffdf5; border: 1px solid #dcd4c3; border-radius: .4rem; }
.invoice-example table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.invoice-example caption { margin-bottom: 1rem; text-align: left; color: var(--plum); font: 700 1.25rem Georgia, serif; }
.invoice-example :is(th, td) { padding: .55rem .2rem; border-bottom: 1px solid #dcd4c3; text-align: right; }
.invoice-example th:first-child { text-align: left; }
.invoice-example td strong { padding: .1em .25em; background: #d7eee6; color: #11554f; white-space: nowrap; }
.invoice-example figcaption { margin-top: .85rem; font-size: .93rem; line-height: 1.5; }

.protection-layout { display: grid; grid-template-columns: minmax(14rem, .78fr) 1.22fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.protection-title { grid-column: 1 / -1; max-width: 44rem; }
.coverage { justify-self: center; }

.case-file {
  position: relative;
  isolation: isolate;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border-radius: 1rem;
  background: radial-gradient(at 95% 7%, #724b66, transparent 65%), #35112e;
  color: #fff;
}
.case-file figcaption { margin-bottom: 1.7rem; font-size: .85rem; font-weight: 700; color: #f2e2eb; }
.case-file h2 { font: 700 .8rem/1.4 Mulish, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.original-sheet, .excerpt-sheet { padding: clamp(1rem, 2.2vw, 1.7rem); box-shadow: 0 6px 18px #2510212b; }
.original-sheet { position: relative; background: #faf7ef; color: #383032; margin-right: 6%; transform: rotate(-2deg); padding-bottom: 2.15rem; }
.original-sheet p, .excerpt-sheet p { font: 1.08rem/1.55 Georgia, serif; overflow-wrap: anywhere; margin-top: .65rem; }
.original-sheet mark { color: #48203e; background: #efd9bb; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.excerpt-sheet { position: relative; background: #e2f2ec; color: #153f3a; margin: -.9rem 0 0 7%; border-left: .3rem solid #338476; }
.excerpt-sheet h2 { color: #226054; }
.case-file > p { font-size: .9rem; margin: 1.4rem 0 0; }

.handoff-story { margin-top: clamp(1.65rem, 4vw, 3rem); }
.handoff-steps { padding: 0; margin: 0; list-style: none; counter-reset: review; }
.handoff-steps li { counter-increment: review; padding-block: clamp(1.7rem, 3vw, 2.8rem); border-top: 1px solid #b7cfc8; }
.handoff-copy h3 { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.35rem, 2vw, 1.85rem); }
.handoff-copy h3::before {
  content: counter(review);
  display: grid; place-items: center; flex: none;
  width: 1.8rem; height: 1.8rem; border: 1px solid #78a79d; border-radius: 50%;
  font: 700 .9rem Mulish, sans-serif; color: #205c54;
}
.handoff-copy p { max-width: 52ch; margin: .8rem 0 0; }
.paper-scene {
  display: grid; align-content: center; justify-items: center; gap: 1.1rem;
  min-height: 17rem; margin-top: 1.2rem; padding: 1.4rem;
  border-radius: 1rem; background-color: #c4dcd4;
  background-image: radial-gradient(#749e913d 1px, transparent 1px);
  background-size: 13px 13px;
}
.phase-2 { background-color: #e6dce2; }
.phase-3 { background-color: #c1ded4; }
.scene-paper {
  width: min(100%, 18.75rem); padding: 1.4rem;
  color: #34292c; background: #fffcf6; box-shadow: 0 .5rem 1.5rem #30433b21;
  position: relative; overflow: hidden; transform: rotate(-2deg);
}
.scene-paper strong { display: block; margin-top: .8rem; font: 700 1.5rem Georgia, serif; }
.paper-kind { display: block; font: 700 .72rem/1.35 Mulish, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #5d4e56; }
.paper-rules { display: block; width: 74%; height: 12px; margin: .7rem 0; border-block: 2px solid #ded9d1; }
.scene-paper p { font: .97rem/1.5 Georgia, serif; overflow-wrap: anywhere; }
.scene-paper p + p { margin-top: .1rem; }
.scene-paper mark { background: #f1d6ab; color: #472e28; }
.scan-line { position: absolute; inset: 70% 0 auto; height: 2px; background: #278273; box-shadow: 0 -4px 8px #2782735c; }
.review-paper { transform: rotate(1deg); }
.output-paper { background: #fbfffc; border-left: .35rem solid #2c776a; transform: none; }
.output-paper blockquote { margin: 1.1rem 0 .6rem; color: #245046; font: 1.28rem/1.45 Georgia, serif; }
.scene-caption { font-weight: 700; font-size: .87rem; color: #37483f; }
.paper-player { display: none; }
@media (min-width: 56rem) and (min-height: 35rem) and (prefers-reduced-motion: no-preference) {
  .handoff-story.has-player { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .has-player .paper-player { display: grid; position: sticky; top: 12vh; height: clamp(18rem, 49vh, 28rem); }
  .paper-player .paper-scene { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .35s ease; }
  .paper-player .paper-scene.is-current { opacity: 1; }
  .has-player li { display: grid; align-content: center; min-height: 48vh; }
  .has-player li .paper-scene { display: none; }
  .has-player li.is-current h3::before { background: #205c54; color: white; }
}
@media (max-width: 52rem) {
  .insight-hero, .insight-preview { grid-template-columns: 1fr; }
  .gain-chart, .case-file { width: 100%; max-width: 40rem; }
}
@media (max-width: 38rem) {
  .protection-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 30rem) {
  .gain-row { grid-template-columns: 1fr auto; gap: .4rem; padding: 1rem 0; }
  .gain-row strong { grid-area: 1 / 1; }
  .gain-row > span:nth-child(2) { grid-area: 2 / 1 / 3 / -1; }
  .gain-arrow { grid-area: 1 / 2; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].has-entered { animation: arrive .52s ease-out both; }
  .gain-chart.has-entered .gain-row { animation: arrive .5s ease-out both; }
  .gain-chart.has-entered .gain-row:nth-child(2) { animation-delay: .12s; }
  .gain-chart.has-entered .gain-row:nth-child(3) { animation-delay: .24s; }
  .invoice-example.has-entered td strong { animation: mark-field .75s ease-out both; }
  .has-entered .excerpt-sheet { animation: select-excerpt .85s ease-out both; }
  .has-entered .scan-line, .is-current .scan-line { animation: scan-document 1s ease-out both; }
  .has-entered .review-paper mark, .is-current .review-paper mark { animation: mark-field .8s ease-out both; }
  .has-entered .output-paper, .is-current .output-paper { animation: select-excerpt .65s ease-out both; }
}
@keyframes arrive { from { opacity: .55; transform: translateY(.85rem); } }
@keyframes scan-document { from { top: 10%; } }
@keyframes mark-field { from { background-color: transparent; } }
@keyframes select-excerpt { from { opacity: .15; transform: translate(-.55rem, 1.25rem); } }
@media print {
  [data-reveal], [data-reveal] * { animation: none !important; transition: none !important; }
  .handoff-story.has-player { display: block; }
  .has-player .paper-player { display: none; }
  .has-player li { min-height: auto; }
  .has-player li .paper-scene { display: grid; }
}