.bewertung-page {
  overflow: clip;
}

.bewertung-page section {
  scroll-margin-top: var(--space-8);
}

.bewertung-hero__grid,
.bewertung-gameplay__grid,
.bewertung-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(18.75rem, 4fr);
  gap: var(--space-5);
  align-items: start;
}

.bewertung-hero__copy,
.bewertung-hero__media,
.bewertung-gameplay__copy,
.bewertung-gameplay__rail,
.bewertung-final__copy,
.bewertung-final__diagram {
  min-width: 0;
}

.bewertung-hero__copy {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.bewertung-hero__copy > * {
  margin: 0;
}

.bewertung-hero__copy h1 {
  max-width: 12ch;
}

.bewertung-hero__lead {
  max-width: 62ch;
}

.bewertung-hero__trust {
  width: min(100%, 40rem);
  border-left: 4px solid var(--color-steel-blue);
  background: var(--color-steel-mist);
  padding: var(--space-3) var(--space-4);
}

.bewertung-hero__trust > * {
  margin: 0;
}

.bewertung-hero__trust p {
  max-width: 61ch;
  font-size: var(--text-meta);
}

.bewertung-hero__actions,
.bewertung-final__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.bewertung-hero__actions > *,
.bewertung-final__actions > * {
  margin: 0;
}

.bewertung-hero__actions .button {
  min-height: 3rem;
}

.bewertung-hero__actions p {
  max-width: 49ch;
  color: var(--color-graphite-soft);
  font-size: var(--text-meta);
}

.bewertung-hero__media {
  grid-column: 3 / 4;
  width: 100%;
  margin: 0;
}

.bewertung-hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-graphite);
}

.bewertung-hero__image::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(rgb(213 224 225 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(213 224 225 / 10%) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  content: "";
  pointer-events: none;
}

.bewertung-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.bewertung-callout {
  position: absolute;
  z-index: 2;
  max-width: 11rem;
  border-left: 1px solid var(--color-safety-orange);
  background: rgb(32 39 43 / 88%);
  color: var(--color-white);
  padding: var(--space-2);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: var(--leading-label);
  text-transform: uppercase;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.bewertung-callout--color { top: 12%; right: 0; }
.bewertung-callout--order { right: 0; bottom: 15%; }
.bewertung-hero__image:hover .bewertung-callout { border-color: var(--color-white); background: var(--color-orange-dark); }

.bewertung-hero__media figcaption {
  margin-block: var(--space-2) 0;
}

.bewertung-bench {
  position: relative;
  background-image: linear-gradient(rgb(213 224 225 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(213 224 225 / 7%) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

.bewertung-bench__inner {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-6);
}

.bewertung-bench__heading,
.bewertung-bench__note,
.bewertung-meters,
.bewertung-meters > *,
.bewertung-controls__heading,
.bewertung-control-cards > *,
.bewertung-fit__heading,
.bewertung-fit__cards > *,
.bewertung-reading__heading,
.bewertung-reading__cards > * {
  min-width: 0;
}

.bewertung-bench__heading {
  grid-column: 1 / 2;
}

.bewertung-bench__heading p {
  max-width: 62ch;
}

.bewertung-bench__note {
  grid-column: 2 / 3;
  align-self: end;
  justify-self: end;
  border: var(--border-accent);
  color: var(--color-safety-orange);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.bewertung-meters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.bewertung-meter {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--color-line-dark);
  background: rgb(32 39 43 / 84%);
  padding: var(--space-4);
}

.bewertung-meter > * { margin: 0; }
.bewertung-meter p { color: var(--color-paper-warm); font-size: var(--text-meta); line-height: var(--leading-meta); }
.bewertung-meter a { min-height: 2.75rem; color: var(--color-white); font-size: var(--text-meta); }
.bewertung-meter:hover { border-color: var(--color-safety-orange); background: rgb(73 109 124 / 36%); }

.bewertung-meter__segments {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.bewertung-meter__segments i {
  display: block;
  min-width: 0;
  height: 0.375rem;
  background: var(--color-line-dark);
}

.bewertung-meter:nth-child(1) i:nth-child(-n+4),
.bewertung-meter:nth-child(2) i:nth-child(-n+4),
.bewertung-meter:nth-child(3) i:nth-child(-n+3),
.bewertung-meter:nth-child(4) i:nth-child(-n+4),
.bewertung-meter:nth-child(5) i:nth-child(-n+3) { background: var(--color-safety-orange); }

.bewertung-gameplay__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 2fr) minmax(0, 3fr);
}

.bewertung-gameplay__copy {
  grid-column: 1 / 2;
}

.bewertung-gameplay__intro { max-width: 64ch; }

.bewertung-analysis {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-block: var(--space-6);
}

.bewertung-analysis__index {
  min-width: 0;
  color: var(--color-safety-orange);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

.bewertung-analysis__text { min-width: 0; }
.bewertung-analysis__text p { max-width: 66ch; }

.bewertung-gameplay__quiet {
  display: flex;
  width: min(100%, 38rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-steel-mist);
  padding: var(--space-5);
}

.bewertung-gameplay__quiet > * { margin: 0; }
.bewertung-gameplay__quiet p { max-width: 58ch; }

.bewertung-gameplay__rail {
  grid-column: 2 / 3;
  display: flex;
  min-width: 0;
  min-height: 24rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.bewertung-gameplay__rail span {
  display: block;
  width: 1px;
  min-width: 1px;
  height: 6rem;
  background: var(--color-steel-blue);
  transform-origin: top;
}

.bewertung-gameplay__rail b {
  display: block;
  width: 0.75rem;
  min-width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--color-safety-orange);
  border-radius: 50%;
  background: var(--color-paper);
}

.bewertung-gameplay__rail.is-revealed span { animation: bewertung-line 200ms ease-out both; }

.bewertung-controls__inner,
.bewertung-difficulty__inner,
.bewertung-fit__inner,
.bewertung-reading__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.bewertung-controls__heading {
  grid-column: 1 / span 7;
}

.bewertung-controls__heading p { max-width: 61ch; }

.bewertung-control-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.bewertung-control-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-default);
  background: var(--color-paper);
  padding: var(--space-5);
}

.bewertung-control-card > * { margin: 0; }
.bewertung-control-card p { max-width: 42ch; }

.bewertung-control-card__icon {
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-steel-blue);
  color: var(--color-steel-blue);
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

.bewertung-atmosphere > .container > h2 { margin-bottom: var(--space-5); }
.bewertung-atmosphere__figure { margin: 0; }

.bewertung-atmosphere__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--color-graphite);
}

.bewertung-atmosphere__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter var(--transition-standard);
}

.bewertung-atmosphere__image:hover > img { filter: brightness(1.07); }

.bewertung-atmosphere__dark-copy,
.bewertung-atmosphere__light-copy {
  position: absolute;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.bewertung-atmosphere__dark-copy > *,
.bewertung-atmosphere__light-copy > * { margin: 0; }

.bewertung-atmosphere__dark-copy {
  top: var(--space-5);
  left: var(--space-5);
  width: calc((100% - (11 * var(--space-5))) * 0.4167);
  background: rgb(32 39 43 / 94%);
  color: var(--color-paper);
}

.bewertung-atmosphere__dark-copy p { max-width: 60ch; color: var(--color-paper-warm); }
.bewertung-atmosphere__dark-copy h3 { color: var(--color-white); }

.bewertung-atmosphere__light-copy {
  right: var(--space-5);
  bottom: var(--space-5);
  width: calc((100% - (11 * var(--space-5))) * 0.3333);
  background: rgb(241 240 235 / 94%);
}

.bewertung-atmosphere__light-copy p { max-width: 48ch; }
.bewertung-atmosphere__figure figcaption { margin-block: var(--space-2) 0; }

.bewertung-difficulty__heading { grid-column: 1 / span 7; }
.bewertung-difficulty__heading p { max-width: 62ch; }

.bewertung-timeline {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-6);
}

.bewertung-timeline::before {
  position: absolute;
  top: 0.6rem;
  right: 12%;
  left: 12%;
  height: 1px;
  background: var(--color-steel-blue);
  content: "";
  transform-origin: left;
}

.bewertung-timeline.is-revealed::before { animation: bewertung-line 220ms ease-out both; }

.bewertung-stage {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.bewertung-stage > * { margin: 0; }
.bewertung-stage p { max-width: 44ch; }
.bewertung-stage a { min-height: 2.75rem; }

.bewertung-stage__marker {
  position: relative;
  color: var(--color-steel-blue);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.bewertung-stage__marker::before {
  position: absolute;
  top: -1.25rem;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--color-safety-orange);
  border-radius: 50%;
  background: var(--color-steel-mist);
  content: "";
}

.bewertung-fit__heading { grid-column: 1 / span 7; }
.bewertung-fit__heading p { max-width: 60ch; }

.bewertung-fit__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.bewertung-fit-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-default);
  background: var(--color-paper-warm);
  padding: var(--space-5);
}

.bewertung-fit-card > * { margin: 0; }
.bewertung-fit-card p { max-width: 44ch; }
.bewertung-fit-card--dark { border-top: 4px solid var(--color-safety-orange); background: var(--color-graphite); color: var(--color-paper); }
.bewertung-fit-card--dark h3 { color: var(--color-white); }
.bewertung-fit-card--dark p { color: var(--color-paper-warm); }

.bewertung-fit__result {
  grid-column: 1 / span 8;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  border-top: var(--border-accent);
  padding-top: var(--space-4);
}

.bewertung-fit__result > * { margin: 0; }
.bewertung-fit__result p { max-width: 70ch; font-size: var(--text-lead); line-height: var(--leading-lead); }

.bewertung-transparency__panel {
  display: flex;
  width: calc((100% - (11 * var(--space-5))) * 0.6667);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border-left: 4px solid var(--color-safety-orange);
  background: var(--color-steel-mist);
  padding: var(--space-5);
}

.bewertung-transparency__panel > * { margin: 0; }
.bewertung-transparency__panel > p:last-child { max-width: 58ch; }
.bewertung-transparency__statement { max-width: 60ch; font-size: var(--text-lead); font-weight: 600; line-height: var(--leading-lead); }

.bewertung-reading__heading { grid-column: 1 / span 6; }
.bewertung-reading__heading p { max-width: 60ch; }

.bewertung-reading__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.bewertung-reading-card {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  border-top: var(--border-default);
  padding-top: var(--space-4);
}

.bewertung-reading-card:nth-child(3) { grid-column: 1 / 3; }
.bewertung-reading-card__number { min-width: 0; color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1; }
.bewertung-reading-card > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.bewertung-reading-card h3,
.bewertung-reading-card p,
.bewertung-reading-card a { margin: 0; }
.bewertung-reading-card p { max-width: 40ch; }
.bewertung-reading-card a { min-height: 2.75rem; }

.bewertung-final {
  position: relative;
  border-top: 2px solid var(--color-safety-orange);
}

.bewertung-final__inner {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.bewertung-final__copy {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.bewertung-final__copy > * { margin: 0; }
.bewertung-final__copy > p { max-width: 64ch; }
.bewertung-final__actions { width: min(100%, 29rem); }
.bewertung-final__actions .button { min-height: 3rem; }
.bewertung-final__actions p { max-width: 48ch; color: var(--color-paper-warm); font-size: var(--text-meta); }
.bewertung-final__next { min-height: 2.75rem; color: var(--color-white); }

.bewertung-final__diagram {
  grid-column: 2 / 3;
  min-height: 17rem;
  background-image: linear-gradient(90deg, transparent 0 18%, rgb(213 224 225 / 7%) 18% 19%, transparent 19% 54%, rgb(213 224 225 / 7%) 54% 55%, transparent 55%), linear-gradient(0deg, transparent 0 35%, rgb(213 224 225 / 7%) 35% 36%, transparent 36% 71%, rgb(213 224 225 / 7%) 71% 72%, transparent 72%);
}

@keyframes bewertung-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 64rem) {
  .bewertung-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr); }
  .bewertung-hero__media { grid-column: 2 / 3; }
  .bewertung-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bewertung-meter:nth-child(4) { grid-column: 1 / 2; }
  .bewertung-meter:nth-child(5) { grid-column: 2 / 3; }
  .bewertung-atmosphere__dark-copy { width: 44%; }
  .bewertung-atmosphere__light-copy { width: 37%; }
}

@media (max-width: 56.25rem) {
  .bewertung-hero__grid,
  .bewertung-gameplay__grid { grid-template-columns: minmax(0, 1fr); }
  .bewertung-hero__copy,
  .bewertung-hero__media,
  .bewertung-gameplay__copy,
  .bewertung-gameplay__rail { grid-column: 1; }
  .bewertung-hero__media { max-width: 34rem; }
  .bewertung-gameplay__rail { min-height: 3rem; flex-direction: row; justify-content: flex-start; }
  .bewertung-gameplay__rail span { width: 5rem; min-width: 0; height: 1px; }
  .bewertung-analysis { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .bewertung-controls__heading,
  .bewertung-difficulty__heading,
  .bewertung-fit__heading,
  .bewertung-reading__heading { grid-column: 1 / -1; }
  .bewertung-control-cards,
  .bewertung-fit__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewertung-control-card:nth-child(3),
  .bewertung-fit-card:nth-child(3) { grid-column: 1 / -1; }
  .bewertung-atmosphere__image { aspect-ratio: auto; overflow: visible; border: 0; background: transparent; }
  .bewertung-atmosphere__image > img { height: auto; aspect-ratio: 16 / 7; border: 1px solid var(--color-graphite); }
  .bewertung-atmosphere__dark-copy,
  .bewertung-atmosphere__light-copy { position: static; width: 100%; }
  .bewertung-atmosphere__dark-copy { margin-top: var(--space-4); }
  .bewertung-atmosphere__light-copy { border: var(--border-default); }
  .bewertung-timeline { grid-template-columns: minmax(0, 1fr); }
  .bewertung-timeline::before { top: 0; bottom: 0; left: 0.35rem; width: 1px; height: auto; }
  .bewertung-stage { padding: 0 0 0 var(--space-6); }
  .bewertung-stage__marker::before { top: 0.15rem; left: calc(-1 * var(--space-6)); }
  .bewertung-transparency__panel { width: 100%; }
  .bewertung-final__inner { grid-template-columns: minmax(0, 1fr); }
  .bewertung-final__copy { grid-column: 1; }
  .bewertung-final__diagram { display: none; }
}

@media (max-width: 51.25rem) {
  .bewertung-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewertung-meter:nth-child(4) { grid-column: 2 / 3; }
  .bewertung-meter:nth-child(5) { grid-column: 1 / 2; }
  .bewertung-reading__cards { grid-template-columns: minmax(0, 1fr); }
  .bewertung-reading-card:nth-child(3) { grid-column: 1; }
}

@media (max-width: 37.5rem) {
  .bewertung-hero__copy h1 { max-width: 13ch; }
  .bewertung-hero__lead { font-size: 1.0625rem; line-height: 1.59; }
  .bewertung-hero__media { max-width: none; }
  .bewertung-hero__actions .button,
  .bewertung-final__actions .button { width: min(100%, 22.5rem); }
  .bewertung-bench__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .bewertung-bench__heading,
  .bewertung-bench__note,
  .bewertung-meters { grid-column: 1; }
  .bewertung-bench__note { justify-self: start; }
  .bewertung-meters,
  .bewertung-control-cards,
  .bewertung-fit__cards { grid-template-columns: minmax(0, 1fr); }
  .bewertung-meter:nth-child(4),
  .bewertung-meter:nth-child(5),
  .bewertung-control-card:nth-child(3),
  .bewertung-fit-card:nth-child(3) { grid-column: 1; }
  .bewertung-control-cards,
  .bewertung-fit__cards { gap: var(--space-4); }
  .bewertung-gameplay__quiet { width: 100%; }
  .bewertung-atmosphere__image > img { aspect-ratio: 4 / 3; object-position: 58% center; }
  .bewertung-atmosphere__dark-copy,
  .bewertung-atmosphere__light-copy,
  .bewertung-transparency__panel { padding: var(--space-5); }
  .bewertung-fit__result { grid-column: 1 / -1; }
  .bewertung-reading-card { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
  .bewertung-reading-card__number { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bewertung-gameplay__rail.is-revealed span,
  .bewertung-timeline.is-revealed::before { animation: none; }
  .bewertung-atmosphere__image > img { transition: none; }
}