/* Retroankauf Redesign 2026-11 · gemeinsamer Rahmen und Bausteine.
   Baut auf design-system.css auf: nur vorhandene Marken-Tokens, Fredoka und Inter.
   Keine per CSS erzeugten Texte: jedes content ist leer oder rein grafisch. */

:root {
  --maxw: 1200px;
  --stage: var(--petrol-tief);
  --stage-2: var(--petrol-tief);
  --hard: 0 6px 0 color-mix(in srgb, var(--petrol-tief) 26%, transparent);
  --hard-ink: 0 6px 0 rgba(0, 0, 0, .22);
  --px: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 76px;
}

html { scroll-padding-top: calc(var(--header-h) + 20px); }
body.rt { background: var(--weiss); overflow-x: clip; }
body.rt :focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 3px; border-radius: 6px; }
body.rt .on-dark :focus-visible, .rt-footer :focus-visible { outline-color: var(--petrol-hell); }
body.rt h1, body.rt h2, body.rt h3 { text-wrap: balance; }
body.rt main p a:not(.btn) { color: var(--petrol-tief); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--petrol-hell); text-underline-offset: .18em; transition: background-color .15s; }
body.rt main p a:not(.btn):hover { background: color-mix(in srgb, var(--petrol-hell) 28%, transparent); color: var(--ink); }
body.rt .on-dark p a:not(.btn) { color: var(--weiss); }

@view-transition { navigation: auto; }

/* ---------- Abnahmehinweis und Sprunglink ---------- */
.rt .prep-banner { background: var(--stage); color: var(--petrol-nebel); border: 0; font-size: .74rem; letter-spacing: .02em; padding: 7px var(--gutter); }
.rt .prep-skip { z-index: 100; color: var(--ink); font-weight: 600; }

/* ---------- Header ---------- */
.rt .rt-header { position: sticky; top: 0; z-index: 60; padding-block: 0; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.rt .rt-header.is-scrolled { border-bottom-color: var(--linie); box-shadow: 0 8px 28px rgba(44, 100, 112, .1); }
.rt .rt-header .site-header__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; min-height: var(--header-h); padding-block: 8px; max-width: var(--maxw); }
.rt .rt-header .brand { margin-right: auto; padding: 6px 0; }
.rt .rt-header .brand img { width: 188px; height: auto; min-width: 140px; transition: transform .25s var(--ease); }
.rt .rt-header .brand:hover img { transform: rotate(-2deg) scale(1.03); }
.rt .rt-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; font-size: .96rem; font-weight: 600; }
.rt .rt-nav > a, .rt .rt-menu > summary { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease); }
.rt .rt-nav > a:hover, .rt .rt-menu > summary:hover, .rt .rt-nav > a[aria-current] { background: var(--petrol-nebel); color: var(--petrol-tief); text-decoration: none; }
.rt .rt-nav > a:last-child { border: 2px solid var(--petrol-tief); color: var(--petrol-tief); box-shadow: 0 3px 0 var(--petrol-tief); margin-left: 6px; }
.rt .rt-nav > a:last-child:hover { background: var(--petrol-tief); color: var(--weiss); transform: translateY(2px); box-shadow: 0 1px 0 var(--petrol-tief); }
.rt .rt-menu { position: relative; }
.rt .rt-menu > summary { list-style: none; color: var(--ink); }
.rt .rt-menu > summary::-webkit-details-marker { display: none; }
.rt .rt-menu > summary::after { content: ""; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.rt .rt-menu[open] > summary { background: var(--petrol-tief); color: var(--weiss); }
.rt .rt-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rt .rt-menu > div { position: absolute; top: calc(100% + 10px); right: auto; left: 50%; translate: -50% 0; width: min(560px, 92vw); max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; background: var(--weiss); border: 2px solid var(--petrol-tief); border-radius: 18px; box-shadow: 0 8px 0 color-mix(in srgb, var(--petrol-tief) 30%, transparent), var(--shadow-lg); z-index: 70; }
.rt .rt-menu > div a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color .15s, transform .15s var(--ease); }
.rt .rt-menu > div a:first-child { grid-column: 1 / -1; background: var(--petrol-nebel); color: var(--petrol-tief); }
.rt .rt-menu > div a:hover { background: color-mix(in srgb, var(--petrol-hell) 24%, var(--weiss)); color: var(--ink); transform: translateX(3px); text-decoration: none; }
.rt .rt-menu > div a[aria-current] { box-shadow: inset 0 0 0 2px var(--petrol); }
.rt .rt-menu > div .pix { width: 34px; height: auto; flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .rt .rt-menu[open] > div { animation: rt-pop .22s var(--ease); }
}
@keyframes rt-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@media (max-width: 760px) {
  :root { --header-h: 58px; }
  .rt .rt-header { top: -60px; }
  .rt .rt-header .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 0; }
  .rt .rt-header .brand { height: 60px; display: flex; align-items: center; margin: 0; }
  .rt .rt-header .brand img { width: 164px; }
  .rt .rt-nav { justify-content: space-between; gap: 2px; font-size: .9rem; min-height: 58px; margin-inline: -8px; }
  .rt .rt-nav > a, .rt .rt-menu > summary { padding: 0 11px; }
  .rt .rt-nav > a:last-child { margin-left: 0; }
  .rt .rt-menu { position: static; }
  .rt .rt-header .site-header__inner { position: relative; }
  .rt .rt-menu > div { left: 0; right: 0; translate: none; width: auto; top: calc(100% + 6px); grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Seitenraster: Text bleibt in einer Region, Fotos stehen daneben ---------- */
.pg { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, calc((var(--maxw) - 2 * var(--gutter)) / 12))) minmax(var(--gutter), 1fr); position: relative; }
.pg-editorial { display: contents; }
.pg > *, .pg-editorial > * { min-width: 0; position: relative; z-index: 1; }
.pg > .band { z-index: 0; pointer-events: none; }
@media (max-width: 899px) {
  .pg { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); }
  .m-contents { display: contents; }
}

/* ---------- Bänder ---------- */
.band--stage { background: var(--stage); overflow: hidden; isolation: isolate; }
.band--stage::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url("../img/hero-poster-1120.webp") center / cover; filter: blur(22px) saturate(.9); opacity: .34; }
.band--stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px), radial-gradient(120% 90% at 78% 30%, transparent 0 38%, color-mix(in srgb, var(--stage) 78%, transparent) 78%), linear-gradient(90deg, var(--stage) 0, color-mix(in srgb, var(--stage) 55%, transparent) 55%, transparent); }
.band--dark { background: var(--stage-2); background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.band--nebel { background: var(--petrol-nebel); }
.band--nebel2 { background: var(--nebel-2); }
.band--amber { background: color-mix(in srgb, var(--petrol-hell) 16%, var(--weiss)); }
.band--ink { background: var(--petrol-tief); background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
/* Pixelkante: gezahnter Abschluss in der Farbe des Bandes */
.band--teeth::marker { content: none; }
.teeth { height: var(--px); background: repeating-linear-gradient(90deg, currentColor 0 var(--px), transparent var(--px) calc(var(--px) * 2)); }
.stripe { height: 10px; background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 22px, var(--amber) 22px 33px, var(--petrol-hell) 33px 44px); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--weiss); }
.on-dark p { color: var(--weiss); }

/* ---------- Schaltflächen ---------- */
.rt .btn { white-space: normal; line-height: 1.2; transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .15s; }
.rt .btn--primary { box-shadow: 0 6px 0 var(--amber-tief), 0 16px 28px rgba(245, 166, 35, .3); border-color: color-mix(in srgb, var(--amber-tief) 60%, transparent); }
.rt .btn--primary:hover { background: var(--amber); transform: translateY(3px); box-shadow: 0 3px 0 var(--amber-tief), 0 10px 18px rgba(245, 166, 35, .28); }
.rt .btn--primary:active { transform: translateY(6px); box-shadow: 0 0 0 var(--amber-tief); }
.rt .btn--secondary { background: var(--weiss); border-color: var(--petrol-tief); box-shadow: 0 5px 0 var(--petrol-tief); }
.rt .btn--secondary:hover { background: var(--petrol-nebel); transform: translateY(3px); box-shadow: 0 2px 0 var(--petrol-tief); }
.rt .btn--primary::after, .rt .btn--secondary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); transition: translate .15s var(--ease); }
.rt .btn--primary:hover::after, .rt .btn--secondary:hover::after { translate: 4px 0; }
.rt button.btn--primary::after { display: none; }

/* ---------- Fotos: weiße Vitrinenkarten mit Kennzeichnung ---------- */
.shot { margin: 0; position: relative; background: var(--weiss); border: 2px solid var(--petrol-tief); border-radius: 18px; box-shadow: var(--hard); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--weiss); }
.shot--tall img { aspect-ratio: 3 / 4; }
.shot--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.shot--cover img { object-fit: cover; }
.shot figcaption { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: .32em .7em; border-radius: var(--r-pill); background: rgba(42, 42, 42, .82); color: var(--weiss); font-size: .7rem; font-weight: 600; letter-spacing: .03em; line-height: 1.3; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shot:hover { transform: translateY(-4px) rotate(0deg) scale(1.015); box-shadow: 0 12px 0 color-mix(in srgb, var(--petrol-tief) 22%, transparent), var(--shadow-lg); z-index: 3; }
}
.tilt-l { rotate: -2deg; }
.tilt-r { rotate: 2deg; }

/* ---------- Röhrenfernseher ---------- */
.tv { position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding-top: clamp(46px, 7vw, 70px); }
.tv .crt { border-radius: 30px; }
.tv .crt__antenna { width: clamp(180px, 56%, 280px); }
.tv__screen { position: relative; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: inset 0 0 0 6px var(--ink); aspect-ratio: 16 / 9; }
.tv__screen video, .tv__screen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tv__screen .shot { border: 0; border-radius: 0; box-shadow: none; height: 100%; }
.tv__screen .shot img { aspect-ratio: auto; height: 100%; object-fit: contain; }
.tv--photo .tv__screen { aspect-ratio: 4 / 3; background: var(--weiss); }
.tv__glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .05) 16%, transparent 38%); border-radius: 16px; box-shadow: inset 0 0 44px 6px rgba(0, 0, 0, .28); transition: opacity .3s; }
.tv--photo .tv__glare { box-shadow: inset 0 0 30px 2px rgba(44, 100, 112, .16); background: linear-gradient(125deg, rgba(255, 255, 255, .5) 0, transparent 30%); }
.tv.is-playing .tv__glare { opacity: .25; }
.tv__play { position: absolute; left: 50%; top: 50%; z-index: 3; width: clamp(68px, 9vw, 92px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--petrol-hell); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); pointer-events: none; display: grid; place-items: center; transition: opacity .2s, scale .2s var(--ease); }
.tv__play::before { content: ""; width: 0; height: 0; margin-left: 12%; border-left: clamp(20px, 2.6vw, 28px) solid var(--ink); border-block: clamp(13px, 1.7vw, 18px) solid transparent; }
.tv.is-playing .tv__play, .tv.has-played .tv__play { opacity: 0; scale: .6; }
@media (prefers-reduced-motion: no-preference) {
  .tv:not(.is-playing):not(.has-played) .tv__play { animation: rt-pulse 2.4s ease-in-out infinite; }
  .tv:hover .tv__play { scale: 1.08; }
}
@keyframes rt-pulse { 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 14px rgba(255, 255, 255, .28); } }
.tv .crt__panel { justify-content: flex-start; gap: 12px; padding-bottom: 2px; }
.tv .crt__grille { margin-right: auto; width: 64px; }
.tv .crt__led { background: rgba(255, 255, 255, .3); box-shadow: none; transition: background-color .2s, box-shadow .2s; }
.tv.is-playing .crt__led, .tv--photo .crt__led { background: var(--cash); box-shadow: 0 0 9px rgba(21, 163, 59, .8); }
.tv__feet { display: flex; justify-content: space-between; padding-inline: 14%; }
.tv__feet::before, .tv__feet::after { content: ""; width: 54px; height: 12px; border-radius: 0 0 8px 8px; background: var(--ink); }

/* ---------- Pixel-Deko ---------- */
.pix { display: inline-block; image-rendering: pixelated; }
.bits { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bits .pix { position: absolute; width: var(--s, 36px); height: auto; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .bits .pix { animation: rt-float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes rt-float { 50% { translate: 0 -10px; } }

/* ---------- Abschnittskopf ---------- */
.sec-head { display: grid; gap: 14px; justify-items: start; }
.sec-head h2::after, .h-bar::after { content: ""; display: block; width: 72px; height: 8px; margin-top: 16px; background: linear-gradient(90deg, var(--petrol-hell) 0 50%, var(--petrol) 50% 75%, var(--petrol-hell) 75%); }

/* ---------- Schrittkarten ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: none; }
.step { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); padding-top: clamp(26px, 3vw, 36px); background: var(--weiss); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--hard-ink); overflow: hidden; color: var(--ink); }
.step::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--petrol-hell); border-bottom: 2px solid var(--ink); }
.step:last-child::before { background: var(--cash); }
.step .pix { width: 56px; height: auto; }
.step p { color: var(--ink); line-height: 1.6; font-size: .98rem; }
.step p strong:first-child { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.15; color: var(--petrol-tief); }
.on-dark .step p { color: var(--ink); }
.on-dark .step p a:not(.btn) { color: var(--petrol-tief); }
@media (max-width: 899px) { .steps-grid { grid-template-columns: minmax(0, 1fr); } .step { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; }
.faq-list details { position: relative; background: var(--weiss); border: 2px solid color-mix(in srgb, var(--petrol-tief) 28%, transparent); border-radius: 16px; box-shadow: 0 5px 0 color-mix(in srgb, var(--petrol-tief) 12%, transparent); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-list details::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--petrol-hell); transition: background-color .2s; }
.faq-list details[open] { border-color: var(--petrol-tief); box-shadow: 0 6px 0 color-mix(in srgb, var(--petrol-hell) 50%, transparent); }
.faq-list details[open]::before { background: var(--petrol-hell); }
.faq-list summary { list-style: none; cursor: pointer; position: relative; display: block; padding: 18px 58px 18px 28px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { display: inline; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.3; color: var(--ink); }
.faq-list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; border-right: 3px solid var(--petrol-tief); border-bottom: 3px solid var(--petrol-tief); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list summary:hover h3 { color: var(--petrol-tief); }
.faq-list details > p { padding: 0 28px 20px; line-height: 1.7; color: var(--ink); }
.faq-list details > p + p { margin-top: -8px; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-list details { interpolate-size: allow-keywords; }
    .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .28s var(--ease), content-visibility .28s allow-discrete; }
    .faq-list details[open]::details-content { block-size: auto; }
  }
}

/* ---------- Einblenden beim Scrollen (nur wenn unterstützt und Bewegung erwünscht) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rt-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes rt-rise { from { opacity: .001; translate: 0 34px; } }

/* ---------- Standorte ---------- */
.loc { background: var(--petrol-nebel); padding-block: var(--section-y); position: relative; }
.loc__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 18px; align-items: start; max-width: var(--maxw); }
.loc__inner > * { grid-column: 1; }
.loc__inner > h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.loc__inner > p { max-width: 46ch; line-height: 1.7; }
.loc__inner > .btn { justify-self: start; margin-top: 6px; }
.loc__cards { grid-column: 2; grid-row: 1 / span 5; align-self: center; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.loc__cards::before { content: ""; position: absolute; left: 14%; right: 14%; top: 52px; height: 6px; background: repeating-linear-gradient(90deg, var(--petrol) 0 12px, transparent 12px 24px); z-index: 0; }
.loc .card:nth-child(2) { margin-top: 44px; }
.loc .card { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start; padding: clamp(20px, 2.6vw, 30px); border: 2px solid var(--petrol-tief); border-radius: 20px; box-shadow: var(--hard); transition: transform .3s var(--ease); }
.loc .card .pix { width: 56px; height: auto; margin-bottom: 4px; }
.loc .card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--petrol-tief); }
.loc .card address { font-style: normal; line-height: 1.55; font-size: 1.05rem; font-weight: 500; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .loc .card:hover { transform: translateY(-5px); } .loc .card:hover .pix { animation: rt-hop .5s var(--ease); } }
@keyframes rt-hop { 40% { translate: 0 -9px; } }
@media (max-width: 899px) { .loc__inner { grid-template-columns: minmax(0, 1fr); } .loc__cards { grid-column: 1; grid-row: auto; } .loc__inner > .btn { justify-self: stretch; } }
@media (max-width: 520px) { .loc__cards { grid-template-columns: minmax(0, 1fr); } .loc__cards::before { display: none; } .loc .card:nth-child(2) { margin-top: 0; } }

/* ---------- Anfrage ---------- */
.rt #anfrage { position: relative; background: var(--stage-2); background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); color: var(--weiss); padding-block: var(--section-y); }
.rt #anfrage::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: repeating-linear-gradient(90deg, var(--petrol-hell) 0 22px, var(--petrol-hell) 22px 33px, var(--petrol) 33px 44px); }
.rt #anfrage .prep-request { max-width: var(--maxw); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 64px); }
.rt #anfrage .prep-request > .stack { position: sticky; top: calc(var(--header-h) + 28px); }
.rt #anfrage h2 { color: var(--weiss); font-size: clamp(2rem, 3.8vw, 3rem); }
.rt #anfrage .stack > p { color: var(--weiss); max-width: 40ch; }
.rt #anfrage .eyebrow { color: var(--petrol-hell); }
.rt #anfrage .eyebrow::before { background: var(--petrol-hell); }
.rt #anfrage .prep-request > div > img { width: clamp(110px, 14vw, 170px); height: auto; margin-top: 30px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .22)); }
@media (prefers-reduced-motion: no-preference) { .rt #anfrage .prep-request > div > img { animation: rt-float 5s ease-in-out infinite; } }
.rt .prep-form { position: relative; padding: clamp(22px, 3vw, 36px); padding-top: clamp(38px, 4vw, 52px); color: var(--ink); background: var(--weiss); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 10px 0 rgba(0, 0, 0, .3), var(--shadow-lg); overflow: hidden; }
.rt .prep-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 16px; background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 22px, var(--amber) 22px 33px, var(--petrol-hell) 33px 44px); border-bottom: 3px solid var(--ink); }
.rt .prep-form-note { display: inline-block; padding: .5em .9em; border-radius: 10px; background: var(--petrol-nebel); color: var(--petrol-tief); }
.rt .prep-form label, .rt .prep-form .prep-choice legend { font-size: .92rem; color: var(--ink); }
.rt .prep-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .rt .prep-form textarea, .rt .prep-form select { min-height: 50px; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--petrol-tief) 45%, transparent); background: var(--nebel-2); color: var(--ink); font-size: 1rem; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.rt .prep-form input::placeholder, .rt .prep-form textarea::placeholder { color: var(--muted); opacity: 1; }
.rt .prep-form input:not([type=radio]):not([type=checkbox]):not([type=file]):hover, .rt .prep-form textarea:hover, .rt .prep-form select:hover { border-color: var(--petrol-tief); }
.rt .prep-form input:focus-visible, .rt .prep-form textarea:focus-visible, .rt .prep-form select:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 2px; border-color: var(--petrol-tief); background: var(--weiss); border-radius: var(--r-input); }
.rt .prep-form input[type=file] { padding: 14px; border: 2px dashed var(--petrol-tief); border-radius: 14px; background: var(--petrol-nebel); color: var(--ink); cursor: pointer; font-size: .95rem; }
.rt .prep-form input[type=file]::file-selector-button { margin-right: 14px; padding: .7em 1.1em; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--petrol-hell); color: var(--ink); font: 600 .92rem var(--font-body); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.rt .prep-form .toggle { border: 2px solid color-mix(in srgb, var(--petrol-tief) 45%, transparent); }
.rt .prep-form .toggle label { min-height: 44px; color: var(--ink); }
.rt .prep-form .toggle input:focus-visible + label { outline: 3px solid var(--petrol-hell); outline-offset: 2px; }
.rt .prep-form .hint, .rt .prep-form .consent-check { color: var(--muted); }
.rt .prep-form .consent-check a { color: var(--petrol-tief); font-weight: 600; }
.rt .prep-form .consent-check input { width: 24px; height: 24px; }
.rt .prep-form .req { color: #0E7A2C; }
.rt .prep-form .upload-preview__empty { border: 2px dashed var(--linie); }
.rt .prep-form .leadform__error, .rt .prep-form [role=alert] { color: #B4231F; font-weight: 600; }
@media (max-width: 899px) { .rt #anfrage .prep-request { grid-template-columns: minmax(0, 1fr); } .rt #anfrage .prep-request > .stack { position: static; } .rt #anfrage .prep-request > div > img { position: absolute; right: var(--gutter); top: 34px; width: 92px; margin: 0; } .rt #anfrage .stack { padding-right: 104px; } }

/* ---------- Footer ---------- */
.rt .rt-footer { position: relative; background: var(--petrol-nebel); color: var(--ink); border: 0; padding: clamp(46px, 6vw, 72px) 0 30px; }
.rt .rt-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--px); background: repeating-linear-gradient(90deg, var(--stage-2) 0 var(--px), transparent var(--px) calc(var(--px) * 2)); }
.rt .rt-footer > .container { max-width: var(--maxw); }
.rt .rt-footer .prep-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(26px, 4vw, 56px); margin-bottom: 36px; }
.rt .rt-footer .prep-footer-logo { width: 196px; padding: 12px 16px; background: var(--weiss); border-radius: 14px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); margin-bottom: 22px; }
.rt .rt-footer p { color: var(--ink); }
.rt .rt-footer .prep-small { color: var(--petrol-tief); }
.rt .rt-footer nav { gap: 4px; font-size: .95rem; }
.rt .rt-footer nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--weiss); text-decoration: none; transition: color .15s, translate .15s var(--ease); }
.rt .rt-footer nav a::before { content: ""; width: 8px; height: 8px; margin-right: 12px; background: var(--petrol-hell); flex: 0 0 auto; }
.rt .rt-footer nav:last-of-type a::before { background: var(--petrol-hell); }
.rt .rt-footer nav a:hover { color: var(--petrol-hell); translate: 4px 0; text-decoration: none; }
.rt .rt-footer > .container > .prep-small { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: none; }
@media (max-width: 899px) { .rt .rt-footer .prep-footer-grid { grid-template-columns: 1fr 1fr; } .rt .rt-footer .prep-footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rt .rt-footer .prep-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Rechtsseiten und Bestätigungsseiten im gleichen Rahmen ---------- */
.rt-legal main.legal-page { position: relative; padding-block: 0 var(--section-y); background: var(--nebel-2); }
.rt-legal main.legal-page::before { content: ""; display: block; height: clamp(120px, 16vw, 190px); background: var(--stage-2); background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.rt-legal main.legal-page > .container { position: relative; max-width: 860px; margin-top: calc(-1 * clamp(70px, 10vw, 120px)); padding: clamp(24px, 5vw, 60px); background: var(--weiss); border: 2px solid var(--petrol-tief); border-radius: 22px; box-shadow: 0 8px 0 color-mix(in srgb, var(--petrol-tief) 22%, transparent); }
.rt-legal main.legal-page > .container::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 20px 20px 0 0; background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 22px, var(--amber) 22px 33px, var(--petrol-hell) 33px 44px); }
.rt-legal main.legal-page h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 10px 0 14px; overflow-wrap: anywhere; hyphens: auto; }
.rt-legal main.legal-page h2 { color: var(--petrol-tief); padding-top: 1.1em; border-top: 2px solid var(--petrol-nebel); }
.rt-legal main.legal-page h1 + h2 { border-top: 0; }
.rt-legal main.legal-page p, .rt-legal main.legal-page li, .rt-legal main.legal-page address { line-height: 1.75; }
.rt-legal .prep-legal-note { max-width: 860px; margin: 0 auto; border-radius: 0 0 var(--r-card) var(--r-card); }
.rt-legal main.legal-page .legal-back a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--petrol-tief); border-radius: var(--r-pill); box-shadow: 0 5px 0 var(--petrol-tief); color: var(--petrol-tief); font-weight: 600; text-decoration: none; background: var(--weiss); }
.rt-legal main.legal-page .legal-back a:hover { background: var(--petrol-nebel); }
.rt main.section--nebel .card.stack { border: 2px solid var(--petrol-tief); border-radius: 22px; box-shadow: var(--hard); padding: clamp(24px, 5vw, 56px); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rt *, .rt *::before, .rt *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (min-width:900px){.pg-home{grid-template-areas:". copy copy copy copy copy copy video video video video video video ." ". ohead ohead ohead ohead ohead ohead ohead ohead ohead ohead ohead ohead ." ". gcopy gcopy gcopy gcopy gcopy . gmedia gmedia gmedia gmedia gmedia gmedia ." ". cmedia cmedia cmedia cmedia cmedia cmedia . ccopy ccopy ccopy ccopy ccopy ." ". fcopy fcopy fcopy fcopy fcopy . fmedia fmedia fmedia fmedia fmedia fmedia ." ". kmedia kmedia kmedia kmedia kmedia kmedia kmedia . kcopy kcopy kcopy kcopy ." ". steps steps steps steps steps steps steps steps steps steps steps steps ." ". about about about about about about about about about about about about ." ". faq faq faq faq faq faq faq faq faq faq faq faq ."}.pg-home > .band-hero{grid-column:1/-1;grid-row:copy-start/copy-end}.pg-home > .band-steps{grid-column:1/-1;grid-row:steps-start/steps-end}.pg-home > .band-about{grid-column:1/-1;grid-row:about-start/about-end}}@media (max-width:899px){.pg-home{grid-template-areas:". h1 ." ". video ." ". cta ." ". lead ." ". ohead ." ". gcopy ." ". gmedia ." ". ccopy ." ". cmedia ." ". fcopy ." ". fmedia ." ". kcopy ." ". kmedia ." ". steps ." ". about ." ". faq ."}.pg-home > .band-hero{grid-column:1/-1;grid-row:h1-start/lead-end}.pg-home > .band-steps{grid-column:1/-1;grid-row:steps-start/steps-end}.pg-home > .band-about{grid-column:1/-1;grid-row:about-start/about-end}}
@media (min-width:900px){.pg-konsolen{grid-template-areas:". copy copy copy copy copy copy hmedia hmedia hmedia hmedia hmedia hmedia ." ". over over over over over over over over over over over over ." ". ps ps ps ps ps ps ps psm psm psm psm psm ." ". ninm ninm ninm ninm ninm nin nin nin nin nin nin nin ." ". sega sega sega sega sega sega segam segam segam segam segam segam ." ". modern modern modern modern modern modern modern modern modern modern modern modern ." ". check check check check check check check checkm checkm checkm checkm checkm ." ". value value value value value value value value value value value value ." ". routes routes routes routes routes routes routes routes routes routes routes routes ." ". proc proc proc proc proc proc proc proc proc proc proc proc ." ". faq faq faq faq faq faq faq faq faq faq faq faq ."}.pg-konsolen > .band-hero{grid-column:1/-1;grid-row:copy-start/copy-end}.pg-konsolen > .band-check{grid-column:1/-1;grid-row:check-start/check-end}.pg-konsolen > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}@media (max-width:899px){.pg-konsolen{grid-template-areas:". h1 ." ". lead1 ." ". cta ." ". hmedia ." ". over ." ". ps ." ". psm ." ". nin ." ". ninm ." ". sega ." ". segam ." ". modern ." ". check ." ". checkm ." ". value ." ". routes ." ". proc ." ". faq ."}.pg-konsolen > .band-hero{grid-column:1/-1;grid-row:h1-start/hmedia-end}.pg-konsolen > .band-check{grid-column:1/-1;grid-row:check-start/checkm-end}.pg-konsolen > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}
@media (min-width:900px){.pg-spiele{grid-template-areas:". copy copy copy copy copy copy hmedia hmedia hmedia hmedia hmedia hmedia ." ". cta cta cta cta cta cta hmedia hmedia hmedia hmedia hmedia hmedia ." ". intro intro intro intro intro intro intro intro intro intro intro intro ." ". sort sort sort sort sort sort sort sort sort sort sort sort ." ". modm modm modm modm modm modm discm discm discm discm discm discm ." ". mod mod mod mod mod mod disc disc disc disc disc disc ." ". pslink pslink pslink pslink pslink pslink pslink pslink pslink pslink pslink pslink ." ". cond cond cond cond cond cond cond cond cond cond cond cond ." ". loose loose loose loose loose loose loose loose loose loose loose loose ." ". packm packm packm packm packm pack pack pack pack pack pack pack ." ". edition edition edition edition edition edition edition edition editionm editionm editionm editionm ." ". check check check check check check check checkm checkm checkm checkm checkm ." ". price price price price price price price price price price price price ." ". proc proc proc proc proc proc proc proc proc proc proc proc ." ". faq faq faq faq faq faq faq faq faq faq faq faq ."}.pg-spiele > .band-hero{grid-column:1/-1;grid-row:copy-start/cta-end}.pg-spiele > .band-check{grid-column:1/-1;grid-row:check-start/check-end}.pg-spiele > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}@media (max-width:899px){.pg-spiele{grid-template-areas:". h1 ." ". lead1 ." ". cta ." ". hmedia ." ". intro ." ". sort ." ". modm ." ". mod ." ". discm ." ". disc ." ". pslink ." ". cond ." ". loose ." ". pack ." ". packm ." ". edition ." ". editionm ." ". check ." ". checkm ." ". price ." ". proc ." ". faq ."}.pg-spiele > .band-hero{grid-column:1/-1;grid-row:h1-start/hmedia-end}.pg-spiele > .band-check{grid-column:1/-1;grid-row:check-start/checkm-end}.pg-spiele > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}
@media (min-width:900px){.pg-sammlung{grid-template-areas:". copy copy copy copy copy copy copy copy copy copy copy copy ." ". hmedia hmedia hmedia hmedia hmedia hmedia hmedia hmedia hmedia hmedia hmedia hmedia ." ". offer offer offer offer offer offer offer offer offer offer offer offer ." ". listh listh listh listh listh listh listh listh listh listh listh listh ." ". l1m l1m l1m l1m l2m l2m l2m l2m l3m l3m l3m l3m ." ". l1 l1 l1 l1 l2 l2 l2 l2 l3 l3 l3 l3 ." ". check check check check check check check checkm checkm checkm checkm checkm ." ". value value value value value value value value value value value value ." ". comp comp comp comp comp comp comp comp comp comp comp comp ." ". proc proc proc proc proc proc proc proc proc proc proc proc ." ". faq faq faq faq faq faq faq faq faq faq faq faq ."}.pg-sammlung > .band-hero{grid-column:1/-1;grid-row:copy-start/hmedia-end}.pg-sammlung > .band-list{grid-column:1/-1;grid-row:listh-start/l1-end}.pg-sammlung > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}@media (max-width:899px){.pg-sammlung{grid-template-areas:". h1 ." ". lead1 ." ". cta ." ". lead2 ." ". hmedia ." ". offer ." ". listh ." ". l1m ." ". l1 ." ". l2m ." ". l2 ." ". l3m ." ". l3 ." ". check ." ". checkm ." ". value ." ". comp ." ". proc ." ". faq ."}.pg-sammlung > .band-hero{grid-column:1/-1;grid-row:h1-start/hmedia-end}.pg-sammlung > .band-list{grid-column:1/-1;grid-row:listh-start/l3-end}.pg-sammlung > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}
@media (min-width:900px){.pg-figuren{grid-template-areas:". copy copy copy copy copy copy hmedia hmedia hmedia hmedia hmedia hmedia ." ". cta cta cta cta cta cta hmedia hmedia hmedia hmedia hmedia hmedia ." ". reasons reasons reasons reasons reasons reasons reasons reasons reasons reasons reasons reasons ." ". vintage vintage vintage vintage vintage vintage vintage vintage vintage vintage vintage vintage ." ". loose loose loose loose loose loose loose loosem loosem loosem loosem loosem ." ". packm packm packm packm packm pack pack pack pack pack pack pack ." ". packm packm packm packm packm example example example example example example example ." ". coll coll coll coll coll coll collm collm collm collm collm collm ." ". value value value value value value value value value value value value ." ". proc proc proc proc proc proc proc proc proc proc proc proc ." ". faq faq faq faq faq faq faq faqm faqm faqm faqm faqm ."}.pg-figuren > .band-hero{grid-column:1/-1;grid-row:copy-start/cta-end}.pg-figuren > .band-pack{grid-column:1/-1;grid-row:loose-start/example-end}.pg-figuren > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}@media (max-width:899px){.pg-figuren{grid-template-areas:". h1 ." ". lead1 ." ". cta ." ". hmedia ." ". reasons ." ". vintage ." ". loose ." ". loosem ." ". pack ." ". packm ." ". example ." ". coll ." ". collm ." ". value ." ". proc ." ". faq ." ". faqm ."}.pg-figuren > .band-hero{grid-column:1/-1;grid-row:h1-start/hmedia-end}.pg-figuren > .band-pack{grid-column:1/-1;grid-row:loose-start/example-end}.pg-figuren > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}
@media (min-width:900px){.pg-ps{grid-template-areas:". copy copy copy copy copy copy copy hmedia hmedia hmedia hmedia hmedia ." ". models models models models models models models models models models models models ." ". accm accm accm accm accm acc acc acc acc acc acc acc ." ". ps1 ps1 ps1 ps1 ps1 ps1 ps1m ps1m ps1m ps1m ps1m ps1m ." ". gamesm gamesm gamesm gamesm gamesm gamesm games games games games games games ." ". value value value value value value value value value value value value ." ". proc proc proc proc proc proc proc proc proc proc proc proc ." ". faq faq faq faq faq faq faq faq faq faq faq faq ."}.pg-ps > .band-hero{grid-column:1/-1;grid-row:copy-start/copy-end}.pg-ps > .band-ps1{grid-column:1/-1;grid-row:ps1-start/ps1-end}.pg-ps > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}@media (max-width:899px){.pg-ps{grid-template-areas:". h1 ." ". lead1 ." ". cta ." ". lead2 ." ". hmedia ." ". models ." ". acc ." ". accm ." ". ps1 ." ". ps1m ." ". games ." ". gamesm ." ". value ." ". proc ." ". faq ."}.pg-ps > .band-hero{grid-column:1/-1;grid-row:h1-start/hmedia-end}.pg-ps > .band-ps1{grid-column:1/-1;grid-row:ps1-start/ps1m-end}.pg-ps > .band-proc{grid-column:1/-1;grid-row:proc-start/proc-end}}
.a-about{grid-area:about}.a-acc{grid-area:acc}.a-accm{grid-area:accm}.a-ccopy{grid-area:ccopy}.a-check{grid-area:check}.a-checkm{grid-area:checkm}.a-cmedia{grid-area:cmedia}.a-coll{grid-area:coll}.a-collm{grid-area:collm}.a-comp{grid-area:comp}.a-cond{grid-area:cond}.a-copy{grid-area:copy}.a-cta{grid-area:cta}.a-disc{grid-area:disc}.a-discm{grid-area:discm}.a-edition{grid-area:edition}.a-editionm{grid-area:editionm}.a-example{grid-area:example}.a-faq{grid-area:faq}.a-faqm{grid-area:faqm}.a-fcopy{grid-area:fcopy}.a-fmedia{grid-area:fmedia}.a-games{grid-area:games}.a-gamesm{grid-area:gamesm}.a-gcopy{grid-area:gcopy}.a-gmedia{grid-area:gmedia}.a-h1{grid-area:h1}.a-hmedia{grid-area:hmedia}.a-intro{grid-area:intro}.a-kcopy{grid-area:kcopy}.a-kmedia{grid-area:kmedia}.a-l1{grid-area:l1}.a-l1m{grid-area:l1m}.a-l2{grid-area:l2}.a-l2m{grid-area:l2m}.a-l3{grid-area:l3}.a-l3m{grid-area:l3m}.a-lead{grid-area:lead}.a-lead1{grid-area:lead1}.a-lead2{grid-area:lead2}.a-listh{grid-area:listh}.a-loose{grid-area:loose}.a-loosem{grid-area:loosem}.a-mod{grid-area:mod}.a-models{grid-area:models}.a-modern{grid-area:modern}.a-modm{grid-area:modm}.a-nin{grid-area:nin}.a-ninm{grid-area:ninm}.a-offer{grid-area:offer}.a-ohead{grid-area:ohead}.a-over{grid-area:over}.a-pack{grid-area:pack}.a-packm{grid-area:packm}.a-price{grid-area:price}.a-proc{grid-area:proc}.a-ps{grid-area:ps}.a-ps1{grid-area:ps1}.a-ps1m{grid-area:ps1m}.a-pslink{grid-area:pslink}.a-psm{grid-area:psm}.a-reasons{grid-area:reasons}.a-routes{grid-area:routes}.a-sega{grid-area:sega}.a-segam{grid-area:segam}.a-sort{grid-area:sort}.a-steps{grid-area:steps}.a-value{grid-area:value}.a-video{grid-area:video}.a-vintage{grid-area:vintage}
/* Startseite · Richtung A „CRT-Bühne“ */
@media (min-width: 900px) { .pg-home .hero-copy { padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2vw, 24px); } }
.pg-home .hero-copy h1 { color: var(--weiss); font-size: clamp(2.3rem, 4.5vw, 3.9rem); line-height: 1.03; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.pg-home .hero-copy > p { color: var(--weiss); font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.65; max-width: 50ch; }
.pg-home .hero-copy > p:last-child { margin-top: 6px; }
.pg-home .hero-media { align-self: center; padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px) clamp(20px, 3vw, 48px); }
.pg-home .band-hero { color: var(--weiss); }
.pg-home .band-hero .teeth { position: absolute; left: 0; right: 0; bottom: 0; color: var(--weiss); z-index: 1; }
.pg-home .bits .pix:nth-child(1) { left: 46%; top: 12%; --s: 34px; }
.pg-home .bits .pix:nth-child(2) { left: 3%; bottom: 9%; --s: 30px; --d: -2s; }
.pg-home .bits .pix:nth-child(3) { right: 3%; top: 10%; --s: 40px; --d: -4s; }
.pg-home .bits .pix:nth-child(4) { left: 41%; bottom: 14%; --s: 28px; --d: -1s; }

.pg-home .offer-head { padding-top: var(--section-y); padding-bottom: clamp(8px, 2vw, 20px); }
.pg-home .offer-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.pg-home .offer { align-self: center; display: grid; gap: 14px; align-content: center; padding-block: clamp(22px, 3.4vw, 46px); }
.pg-home .offer > .pix { width: 60px; height: auto; }
.pg-home .offer h3 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1.08; color: var(--petrol-tief); }
.pg-home .offer p { line-height: 1.7; }
.pg-home .offer-media { align-self: center; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; margin-block: clamp(22px, 3.4vw, 46px); padding: clamp(18px, 2.6vw, 34px); border-radius: 28px; background: var(--petrol-nebel); }
.pg-home .offer-media::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol) 9%, transparent) 0 12px, transparent 12px 24px); pointer-events: none; }
.pg-home .offer-media .shot:nth-child(1) { grid-column: 1 / 9; grid-row: 1; }
.pg-home .offer-media .shot:nth-child(2) { grid-column: 7 / 13; grid-row: 1; margin-top: 46%; z-index: 2; }
.pg-home .offer-consoles-media { background: color-mix(in srgb, var(--petrol-hell) 20%, var(--weiss)); }
.pg-home .offer-consoles-media::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol-hell) 16%, transparent) 0 12px, transparent 12px 24px); }
.pg-home .offer-consoles-media .shot:nth-child(1) { grid-column: 1 / 6; }
.pg-home .offer-consoles-media .shot:nth-child(1) img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 62%; }
.pg-home .offer-consoles-media .shot:nth-child(2) { grid-column: 5 / 13; margin-top: 30%; }
.pg-home .offer-figures-media { background: color-mix(in srgb, var(--petrol-hell) 34%, var(--weiss)); }
.pg-home .offer-collection-media { padding: 0; background: none; margin-bottom: 0; }
.pg-home .offer-collection-media::before { display: none; }
.pg-home .offer-collection-media .shot:nth-child(1) { grid-column: 1 / -1; }
.pg-home .offer-collection-media .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
.pg-home .offer-collection { padding-bottom: clamp(22px, 3.4vw, 46px); }

.pg-home .steps { margin-top: var(--section-y); padding-block: var(--section-y); display: grid; gap: clamp(26px, 4vw, 46px); }
.pg-home .steps h2 { color: var(--weiss); font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 22ch; }
.pg-home .steps .mascot { position: absolute; right: 0; top: clamp(10px, 3vw, 44px); width: clamp(96px, 13vw, 168px); height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); }

.pg-home .about { padding-block: var(--section-y); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.pg-home .about h2 { grid-column: 1 / -1; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.pg-home .about .home-introduction-grid { display: contents; }
.pg-home .about .shot img { aspect-ratio: 4 / 3; }
.pg-home .player { margin: 0; position: relative; justify-self: center; width: min(100%, 360px); background: var(--weiss); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 9px 0 var(--ink); overflow: hidden; rotate: 2deg; transition: rotate .3s var(--ease); }
.pg-home .player:hover { rotate: 0deg; }
.pg-home .player img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: center 18%; border-bottom: 3px solid var(--ink); }
.pg-home .player figcaption { position: relative; display: grid; gap: 2px; padding: 16px 20px 18px 62px; background: var(--petrol-hell); }
.pg-home .player figcaption::before { content: ""; position: absolute; left: 20px; top: 50%; width: 26px; height: 26px; translate: 0 -50%; border-radius: 50%; background: var(--cash); border: 3px solid var(--ink); box-shadow: 0 0 0 4px rgba(21, 163, 59, .25); }
.pg-home .player strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.pg-home .player span { color: var(--ink); font-size: .95rem; font-weight: 500; }

.pg-home .faq { padding-block: var(--section-y); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.pg-home .faq h2 { position: sticky; top: calc(var(--header-h) + 28px); font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.pg-home .faq .faq-list { grid-column: 2; }
.pg-home .faq > p { grid-column: 2; margin-top: 10px; }

@media (max-width: 899px) {
  .pg-home .hero-copy h1 { padding-top: 30px; padding-bottom: 6px; font-size: clamp(2rem, 8.6vw, 2.9rem); }
  .pg-home .hero-media { padding: 6px 0 18px; }
  .pg-home .hero-copy > p { padding-block: 6px; }
  .pg-home .hero-copy > p:last-child { padding-bottom: 46px; margin-top: 8px; }
  .pg-home .hero-copy > p:last-child .btn { width: 100%; }
  .pg-home .offer { padding-block: 34px 6px; }
  .pg-home .offer-media { margin-block: 14px 8px; }
  .pg-home .offer-collection { padding-bottom: 6px; }
  .pg-home .steps .mascot { top: 14px; right: -6px; width: 88px; }
  .pg-home .steps h2 { padding-right: 86px; }
  .pg-home .about { grid-template-columns: minmax(0, 1fr); }
  .pg-home .faq { grid-template-columns: minmax(0, 1fr); }
  .pg-home .faq h2 { position: static; }
  .pg-home .faq .faq-list, .pg-home .faq > p { grid-column: 1; }
  .pg-home .faq > p .btn { width: 100%; }
}

/* Unterseiten · gemeinsame Bausteine, danach je Seite eine eigene Komposition */
.pg .m-contents > * { position: relative; z-index: 1; min-width: 0; }

/* ---------- Einstieg ---------- */
.sub-hero h1 { color: var(--weiss); font-size: clamp(2.05rem, 3.9vw, 3.3rem); line-height: 1.06; text-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
.sub-hero > p { color: var(--weiss); line-height: 1.68; max-width: 54ch; }
.sub-media { align-self: center; }
.hero-action { align-self: start; }
@media (min-width: 900px) {
  .sub-hero { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: clamp(44px, 6vw, 84px) clamp(48px, 6.5vw, 92px); }
  .sub-hero--action { padding-bottom: 18px; justify-content: flex-end; }
  .hero-action { padding-bottom: clamp(48px, 6.5vw, 92px); padding-top: 6px; }
  .sub-media { padding: clamp(30px, 4vw, 52px) 0 clamp(44px, 6vw, 76px) clamp(20px, 3.4vw, 54px); }
}
@media (max-width: 899px) {
  .sub-hero h1 { padding-top: 30px; padding-bottom: 8px; font-size: clamp(1.9rem, 8.2vw, 2.7rem); }
  .sub-hero > p { padding-block: 7px; }
  .sub-hero > p:last-child { padding-bottom: 44px; }
  .sub-hero > p .btn, .hero-action .btn { width: 100%; }
  .sub-hero > p:has(.btn) { padding-top: 14px; }
  .sub-media { padding: 8px 0 16px; }
  .hero-action { padding: 14px 0 44px; }
  .sub-hero--action > p:last-child { padding-bottom: 6px; }
}
.band .teeth { position: absolute; left: 0; right: 0; bottom: 0; color: var(--weiss); z-index: 1; }
.band-hero .bits .pix:nth-child(1) { left: 47%; top: 10%; --s: 34px; }
.band-hero .bits .pix:nth-child(2) { left: 2.5%; bottom: 8%; --s: 30px; --d: -2s; }
.band-hero .bits .pix:nth-child(3) { right: 2.5%; top: 9%; --s: 38px; --d: -4s; }
.band-hero .bits .pix:nth-child(4) { left: 43%; bottom: 10%; --s: 28px; --d: -1s; }
@media (max-width: 899px) { .band-hero .bits .pix:nth-child(1), .band-hero .bits .pix:nth-child(4) { display: none; } .band-hero .bits .pix:nth-child(2) { bottom: 2%; } .band-hero .bits .pix:nth-child(3) { top: 1.5%; --s: 28px; } }

/* ---------- Textabschnitte ---------- */
.sec { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(22px, 3.2vw, 44px); }
.sec > h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.08; margin-bottom: 4px; }
.sec > h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; color: var(--petrol-tief); margin-top: 10px; }
.sec > h3:first-child { margin-top: 0; }
.sec p, .sec li { line-height: 1.74; }
.sec > .pix { width: 56px; height: auto; flex: 0 0 auto; }
.sec--top { padding-top: var(--section-y); }
.sec--bottom { padding-bottom: var(--section-y); }
.sec--mid { justify-content: center; }
.sec--lead p { font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.66; max-width: 70ch; }
.sec--lead { padding-block: clamp(34px, 5vw, 64px) 0; border-left: 8px solid var(--petrol-hell); padding-left: clamp(16px, 2.4vw, 30px); margin-top: clamp(34px, 5vw, 64px); padding-top: 0; }
.sec--card { margin-block: clamp(10px, 1.6vw, 20px); padding: clamp(20px, 2.8vw, 36px); background: var(--weiss); border: 2px solid var(--petrol-tief); border-radius: 22px; box-shadow: var(--hard); }
.sec--spine { border-left-width: 16px; }
.sec--spine.spine-amber { border-left-color: var(--petrol-hell); }
.sec--spine.spine-hell { border-left-color: var(--petrol-hell); }
.sec--spine.spine-petrol { border-left-color: var(--petrol); }
.sec--inkcard { margin-block: clamp(10px, 1.6vw, 20px); padding: clamp(22px, 3vw, 40px); background: var(--stage-2); border-radius: 22px; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); color: var(--weiss); background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.sec--inkcard h2, .sec--inkcard h3 { color: var(--weiss); }
.sec--inkcard h3 { color: var(--petrol-hell); }
.sec--inkcard p { color: var(--weiss); }
.sec--inkcard p a:not(.btn) { color: var(--weiss) !important; }
@media (min-width: 900px) {
  .sec--aside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 60px); row-gap: 14px; align-items: start; }
  .sec--aside > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--header-h) + 28px); }
  .sec--aside > :not(h2) { grid-column: 2; }
  .sec--aside > .pix { grid-column: 1; grid-row: 1; align-self: start; display: none; }
  .sec--cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 3vw, 44px); row-gap: 14px; align-items: start; }
  .sec--cols2 > h2, .sec--cols2 > h3 { grid-column: 1 / -1; }
  .pad-r { padding-right: clamp(18px, 3vw, 52px); }
  .pad-l { padding-left: clamp(18px, 3vw, 52px); }
}
.h-bar-in > h2::after { content: ""; display: block; width: 72px; height: 8px; margin-top: 16px; background: linear-gradient(90deg, var(--petrol-hell) 0 50%, var(--petrol) 50% 75%, var(--petrol-hell) 75%); }
.on-dark.h-bar-in > h2::after { background: linear-gradient(90deg, var(--petrol-hell) 0 50%, var(--petrol-hell) 50% 75%, var(--weiss) 75%); }

/* ---------- Bildgruppen ---------- */
.media { align-self: center; display: grid; gap: clamp(14px, 2vw, 22px); padding-block: clamp(14px, 2.4vw, 30px); }
.media--top { align-self: start; }
.media--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.media--stagger .shot:nth-child(2) { margin-top: 18%; }
.media--stack .shot:nth-child(2) { width: 82%; justify-self: end; margin-top: -9%; z-index: 2; }
.media--panel { padding: clamp(16px, 2.4vw, 30px); margin-block: clamp(14px, 2.4vw, 30px); border-radius: 28px; background: var(--petrol-nebel); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol) 9%, transparent) 0 12px, transparent 12px 24px); }
.media--amber { background-color: color-mix(in srgb, var(--petrol-hell) 20%, var(--weiss)); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol-hell) 16%, transparent) 0 12px, transparent 12px 24px); }
.media--hell { background-color: color-mix(in srgb, var(--petrol-hell) 34%, var(--weiss)); }
@media (min-width: 900px) { .gap-l { margin-left: clamp(18px, 3vw, 52px); } .gap-r { margin-right: clamp(18px, 3vw, 52px); } }
@media (max-width: 899px) { .media { padding-block: 6px 18px; } .media--panel { margin-block: 6px 18px; } }

/* Karte aus Foto oben und Text unten (zwei Rasterzellen, optisch ein Stück) */
.cover { margin: 0; align-self: end; padding: 0; }
.cover .shot { border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: none; rotate: none; }
.cover .shot:hover { transform: none; box-shadow: none; }
.cover + .under, .under { margin-top: 0; }
.under { align-self: stretch; padding: clamp(18px, 2.4vw, 30px); background: var(--weiss); border: 2px solid var(--petrol-tief); border-top: 0; border-radius: 0 0 22px 22px; box-shadow: var(--hard); margin-bottom: clamp(18px, 2.6vw, 34px); }
@media (min-width: 900px) { .col-l { margin-right: 14px; } .col-r { margin-left: 14px; } .col-m { margin-inline: 7px; } }

/* ---------- Checkliste ---------- */
.checklist ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding: 14px 18px 14px 58px; background: var(--weiss); border: 2px solid color-mix(in srgb, var(--petrol-tief) 30%, transparent); border-radius: 14px; box-shadow: 0 4px 0 color-mix(in srgb, var(--petrol-tief) 12%, transparent); }
.checklist li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; border-radius: 7px; background: var(--cash); border: 2px solid var(--ink); }
.checklist li::after { content: ""; position: absolute; left: 25px; top: 20px; width: 8px; height: 13px; border-right: 3px solid var(--weiss); border-bottom: 3px solid var(--weiss); rotate: 45deg; }
.checklist li p { line-height: 1.6; }

/* ---------- Ablauf ---------- */
.proc { padding-block: var(--section-y); gap: clamp(20px, 3vw, 34px); margin-top: clamp(26px, 4vw, 56px); }
.proc > h2 { color: var(--weiss); max-width: 24ch; }
.proc > p { color: var(--weiss); margin-top: -10px; }
.steps-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .steps-grid--4, .steps-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.proc .mascot { position: absolute; right: 0; top: clamp(8px, 2.4vw, 36px); width: clamp(88px, 12vw, 150px); height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); }
@media (max-width: 899px) { .proc .mascot { width: 84px; right: -6px; top: 12px; } .proc > h2 { padding-right: 84px; } }

/* ---------- FAQ auf Unterseiten ---------- */
.faq-sec { padding-block: var(--section-y); }
@media (min-width: 900px) {
  .faq-sec--aside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 60px); row-gap: 14px; align-items: start; }
  .faq-sec--aside > h2 { position: sticky; top: calc(var(--header-h) + 28px); }
  .faq-sec--aside > .faq-list, .faq-sec--aside > p { grid-column: 2; }
}
.faq-sec > p { margin-top: 12px; }
@media (max-width: 899px) { .faq-sec > p .btn { width: 100%; } }

/* ---------- Bildrahmen mit eigener Form ---------- */
.frame-case { position: relative; display: grid; grid-template-columns: clamp(26px, 3.4vw, 40px) minmax(0, 1fr); border: 3px solid var(--ink); border-radius: 10px 20px 20px 10px; box-shadow: 0 9px 0 rgba(0, 0, 0, .3); overflow: hidden; rotate: 1.5deg; background: var(--weiss); max-width: 560px; margin-inline: auto; }
.frame-case::before { content: ""; background: var(--petrol-hell); border-right: 3px solid var(--ink); background-image: repeating-linear-gradient(180deg, transparent 0 18px, rgba(0, 0, 0, .16) 18px 21px); }
.frame-case .shot { border: 0; border-radius: 0; box-shadow: none; }
.frame-case .shot img { aspect-ratio: 4 / 3; }
.frame-blister { position: relative; max-width: 520px; margin-inline: auto; padding: clamp(58px, 7vw, 78px) clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px); background: var(--petrol-hell); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 9px 0 rgba(0, 0, 0, .3); rotate: -1.5deg; background-image: radial-gradient(circle at 14% 16%, rgba(255, 255, 255, .5) 0 3px, transparent 4px), radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .5) 0 3px, transparent 4px); }
.frame-blister::before { content: ""; position: absolute; left: 50%; top: clamp(18px, 2.4vw, 26px); width: 88px; height: 20px; translate: -50% 0; border: 3px solid var(--ink); border-radius: 12px; background: var(--stage); }
.frame-blister .shot { border: 3px solid var(--ink); border-radius: 26px; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .6); }
.frame-mem { position: relative; max-width: 540px; margin-inline: auto; padding: clamp(16px, 2vw, 22px); padding-bottom: clamp(44px, 5vw, 58px); background: var(--ink); border: 3px solid var(--ink); border-radius: 16px 16px 26px 26px; box-shadow: 0 9px 0 rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .14); }
.frame-mem::before { content: ""; position: absolute; left: 22px; right: 22px; bottom: 16px; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--petrol-hell) 0 12px, transparent 12px 20px); opacity: .9; }
.frame-mem .shot { border: 3px solid var(--ink); border-radius: 10px; box-shadow: none; }
.frame-wide { max-width: none; }
.frame-wide .shot { border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 rgba(0, 0, 0, .3); }
.frame-wide .shot img { aspect-ratio: 21 / 9; object-fit: cover; object-position: center 38%; }
@media (max-width: 899px) { .frame-wide .shot img { aspect-ratio: 4 / 3; } .frame-case, .frame-blister { rotate: none; } }

/* ================= Konsolen: Systemwahl ================= */
.pg-konsolen .a-over { padding-top: var(--section-y); }
.pg-konsolen .a-over p { max-width: 70ch; font-size: 1.08rem; }
.pg-konsolen .a-modern { margin-bottom: clamp(26px, 4vw, 56px); }
.pg-konsolen .a-checkm .shot img { aspect-ratio: 4 / 3; }
.pg-konsolen .a-segam .shot:nth-child(1) img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 62%; }
.pg-konsolen .a-segam .shot:nth-child(2) img { aspect-ratio: 3 / 4; }
.pg-konsolen .a-check { padding-block: var(--section-y); }
.pg-konsolen .a-checkm { padding-block: var(--section-y); align-self: start; position: sticky; top: calc(var(--header-h) + 10px); }
.pg-konsolen .a-value { padding-top: var(--section-y); }
.pg-konsolen .a-routes { padding-bottom: 0; }
@media (max-width: 899px) { .pg-konsolen .a-check { padding-bottom: 8px; } .pg-konsolen .a-checkm { position: static; padding-block: 8px 44px; } }

/* ================= Retro-Spiele: Hüllen und Module ================= */
.pg-spiele .a-sort { padding-top: clamp(34px, 5vw, 64px); }
.pg-spiele .a-pslink { padding-block: 4px clamp(26px, 4vw, 56px); }
.pg-spiele .a-pslink p { padding: 16px 20px; border-radius: 14px; background: var(--petrol-nebel); border-left: 8px solid var(--petrol); }
.pg-spiele .a-cond { padding-block: var(--section-y) 6px; }
.pg-spiele .a-editionm .shot img { aspect-ratio: 3 / 4; }
.pg-spiele .a-editionm { max-width: 340px; justify-self: center; width: 100%; }
.pg-spiele .a-check { padding-block: var(--section-y); }
.pg-spiele .a-checkm { padding-block: var(--section-y); }
.pg-spiele .a-check { margin-top: clamp(26px, 4vw, 56px); }
.pg-spiele .a-checkm { margin-top: clamp(26px, 4vw, 56px); }
.pg-spiele .a-price { padding-top: var(--section-y); }
@media (max-width: 899px) { .pg-spiele .a-check { padding-bottom: 8px; } .pg-spiele .a-checkm { margin-top: 0; padding-block: 8px 44px; } .pg-spiele .a-editionm { max-width: 280px; } }

/* ================= Sammlung: Regal und Inventur ================= */
@media (min-width: 900px) {
  .pg-sammlung .sub-hero { align-items: center; text-align: center; padding-bottom: clamp(26px, 3vw, 40px); }
  .pg-sammlung .sub-hero h1 { max-width: 22ch; }
  .pg-sammlung .sub-hero > p { max-width: 72ch; }
  .pg-sammlung .sub-media { padding: 0 0 clamp(40px, 5vw, 70px); }
}
.pg-sammlung .a-offer { padding-top: var(--section-y); }
.pg-sammlung .a-listh { padding-block: var(--section-y) 10px; }
.pg-sammlung .lane h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.pg-sammlung .a-checkh { padding-block: var(--section-y) 0; }
.pg-sammlung .a-check { padding-bottom: var(--section-y); }
.pg-sammlung .a-checkm { padding-bottom: var(--section-y); align-self: start; }
.pg-sammlung .a-value { padding-top: var(--section-y); }
.pg-sammlung .band-list { background-image: repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--petrol) 14%, transparent) 46px 48px); }
@media (max-width: 899px) { .pg-sammlung .a-check { padding-bottom: 6px; } .pg-sammlung .a-checkm { padding-bottom: 44px; } }

/* ================= Actionfiguren: Blisterkarte ================= */
.pg-figuren .reasons { padding-block: clamp(34px, 5vw, 64px) 0; display: grid; gap: clamp(14px, 2vw, 24px); }
.pg-figuren .reasons > div { position: relative; padding: clamp(20px, 2.6vw, 32px); padding-top: clamp(46px, 5vw, 58px); background: color-mix(in srgb, var(--petrol-hell) 16%, var(--weiss)); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--hard-ink); }
.pg-figuren .reasons > div::before { content: ""; position: absolute; left: 50%; top: 16px; width: 64px; height: 14px; translate: -50% 0; border: 2px solid var(--ink); border-radius: 9px; background: var(--weiss); }
.pg-figuren .reasons > div:nth-child(2) { background: var(--petrol-nebel); }
.pg-figuren .reasons p { line-height: 1.72; }
@media (min-width: 900px) { .pg-figuren .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-figuren .reasons > div:nth-child(1) { rotate: -.6deg; } .pg-figuren .reasons > div:nth-child(2) { rotate: .6deg; margin-top: 22px; } }
.pg-figuren .a-vintage { padding-block: var(--section-y) clamp(26px, 4vw, 56px); }
.pg-figuren .a-loosem .shot img, .pg-figuren .a-faqm .shot img, .pg-figuren .a-packm .shot img { aspect-ratio: 3 / 2; }
.pg-figuren .a-coll { padding-top: var(--section-y); }
.pg-figuren .a-collm { padding-top: var(--section-y); }
.pg-figuren .a-value { padding-block: var(--section-y); }
.pg-figuren .a-proc { margin-top: 0; }
.pg-figuren .proc .steps-grid .step p { font-size: 1rem; }
.pg-figuren .a-faqm { padding-block: var(--section-y); align-self: start; position: sticky; top: calc(var(--header-h) + 10px); }
@media (max-width: 899px) { .pg-figuren .a-collm { padding-top: 6px; } .pg-figuren .a-faq { padding-bottom: 10px; } .pg-figuren .a-faqm { position: static; padding-block: 6px 44px; } }

/* ================= PlayStation: dunkle Bühne, Speicherkarte ================= */
.pg-ps .band-hero { background: var(--petrol-tief); }
.pg-ps .band-hero::before { opacity: .12; }
.pg-ps .band-hero::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px), radial-gradient(90% 80% at 76% 40%, color-mix(in srgb, var(--petrol) 34%, transparent) 0, transparent 70%); }
.pg-ps .a-models { padding-top: var(--section-y); }
.pg-ps .a-acc, .pg-ps .a-accm { margin-top: clamp(14px, 2vw, 26px); }
.pg-ps .a-ps1 { padding-block: var(--section-y); }
.pg-ps .a-ps1m { padding-block: var(--section-y); }
.pg-ps .a-ps1 h2, .pg-ps .a-ps1 p { color: var(--weiss); }
.pg-ps .a-ps1 p { color: var(--ink); }
.pg-ps .a-ps1 p a:not(.btn) { color: var(--weiss) !important; }
.pg-ps .a-ps1m .shot { border-color: var(--ink); }
.pg-ps .a-games, .pg-ps .a-gamesm { padding-top: var(--section-y); }
.pg-ps .a-gamesm { align-self: start; }
.pg-ps .a-value { padding-block: var(--section-y) 0; }
.pg-ps .disc .shot { border-radius: 50%; aspect-ratio: 1; }
.pg-ps .disc .shot img { aspect-ratio: 1; object-fit: cover; height: 100%; }
.pg-ps .disc .shot figcaption { left: 50%; translate: -50% 0; bottom: 16%; white-space: nowrap; }
@media (max-width: 899px) { .pg-ps .a-ps1 { padding-bottom: 6px; } .pg-ps .a-ps1m { padding-block: 6px 44px; } .pg-ps .a-gamesm { padding-top: 6px; } }

/* Korrekturen nach der ersten Browserrunde (Desktop 1280, Handy 390) */
body.rt .on-dark .step p a:not(.btn), body.rt .step p a:not(.btn) { color: var(--petrol-tief); }
.band-hero .bits .pix:nth-child(1) { left: 51.5%; top: 5%; }
.pg-home .bits .pix:nth-child(1) { left: 51.5%; top: 6%; }
@media (max-width: 899px) { .band-hero .bits { display: none; } }
@media (min-width: 900px) {
  .pg-home .hero-copy h1 { font-size: clamp(2.2rem, 4.1vw, 3.5rem); }
  .pg-home .offer-collection, .pg-home .offer-collection-media { margin-bottom: clamp(26px, 4vw, 56px); }
}
.pg-home .steps { margin-top: clamp(26px, 4vw, 56px); }
@media (max-width: 760px) {
  .rt .rt-nav { margin-inline: 0; }
  .rt .rt-nav > a, .rt .rt-menu > summary { padding: 0 9px; min-height: 42px; }
  .rt .rt-nav > a:last-child { padding: 0 13px; }
}
.pg-ps .a-gamesm .shot:nth-child(2) { width: 62%; }
/* Schrittkarten ohne hervorgehobenen Titel: erste Zeile bleibt gut lesbar */
.step p { font-size: 1rem; }
/* Fokus darf nicht hinter dem fixierten Header liegen */
.rt :target { scroll-margin-top: calc(var(--header-h) + 20px); }
.rt summary:focus-visible, .rt a:focus-visible, .rt button:focus-visible { scroll-margin-block: calc(var(--header-h) + 24px) 24px; }
.faq-list summary:focus-visible { outline-offset: -3px; border-radius: 14px; }

/* Video: großes Startfeld für Maus und Touch; Tastatur und Screenreader nutzen die nativen Bedienelemente */
.tv__start { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; cursor: pointer; }
.tv__start .tv__play { position: static; translate: none; pointer-events: none; }
.tv.is-playing .tv__start, .tv.has-played .tv__start { pointer-events: none; }
/* Fokusring: Petrol Tief auf hellen Flächen (mind. 3:1), Amber auf dunklen Flächen */
body.rt :focus-visible { outline-color: var(--petrol-tief); }
body.rt .on-dark :focus-visible, body.rt #anfrage :focus-visible, body.rt .rt-footer :focus-visible, body.rt .sec--inkcard :focus-visible, body.rt .prep-banner :focus-visible { outline-color: var(--petrol-hell); }
body.rt .step :focus-visible, body.rt #anfrage .prep-form :focus-visible, body.rt .rt-menu[open] > summary:focus-visible { outline-color: var(--petrol-tief); }
body.rt .rt-menu[open] > summary:focus-visible { outline-color: var(--petrol-hell); outline-offset: -5px; }
.rt .prep-form input:focus-visible, .rt .prep-form textarea:focus-visible, .rt .prep-form select:focus-visible { outline: 3px solid var(--petrol-tief); box-shadow: 0 0 0 6px color-mix(in srgb, var(--petrol-hell) 55%, transparent); }
.rt .prep-form .toggle input:focus-visible + label { outline: 3px solid var(--petrol-tief); box-shadow: 0 0 0 6px color-mix(in srgb, var(--petrol-hell) 55%, transparent); }
.rt .prep-skip:focus { outline: 3px solid var(--ink); }
/* Kontrast nach Messung: Kennzeile im Anfrageband und Ränder der Eingabefelder (mind. 4,5:1 bzw. 3:1) */
.rt #anfrage .eyebrow { color: var(--petrol-nebel); }
.rt .prep-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .rt .prep-form textarea, .rt .prep-form select, .rt .prep-form .toggle { border-color: var(--petrol); }
.rt .prep-form .upload-preview__empty { border-color: var(--petrol); }
/* Lange Einstiege: Anfrage-Schaltfläche bleibt am Desktop im ersten Bildschirm */
@media (min-width: 900px) {
  .pg-ps .sub-hero { padding-block: 34px 46px; gap: 14px; }
  .pg-ps .sub-hero h1 { font-size: clamp(2rem, 3.5vw, 2.9rem); }
  .pg-ps .sub-hero > p { max-width: 64ch; font-size: 1rem; line-height: 1.6; }
  .pg-ps .sub-media { padding-left: clamp(16px, 2.4vw, 36px); }
  .pg-konsolen .sub-hero { padding-block: 40px 56px; }
}
/* Deko im Einstieg berührt den Bildrahmen nicht */
.band-hero .bits .pix:nth-child(3) { right: 1.2%; top: 4%; --s: 32px; }
.pg-home .bits .pix:nth-child(3) { right: 2.4%; top: 9%; --s: 38px; }
.pg-ps .band-hero .bits .pix:nth-child(1) { display: none; }
.band-hero .bits .pix:nth-child(1) { left: 49.6%; top: 2.6%; --s: 26px; }
.pg-home .bits .pix:nth-child(1) { left: 51.5%; top: 6%; --s: 34px; }
.pg-sammlung .band-hero .bits .pix:nth-child(1), .pg-sammlung .band-hero .bits .pix:nth-child(4) { display: none; }
/* Deko nur dort, wo neben Text und Bild sicher Platz ist */
@media (max-width: 1199px) { .band-hero .bits { display: none; } }
/* Tablet hochkant: einspaltig, aber mit begrenzter Zeilenlänge */
@media (min-width: 620px) and (max-width: 899px) {
  .pg { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 660px) minmax(var(--gutter), 1fr); }
  .tv { max-width: 520px; }
}

/* Markenkorrektur nach der unabhängigen QA vom 11.11.2026.
   1. Dunkle Flächen sind exakt Petrol Tief (#2C6470). Weiße Schrift steht nur darauf.
   2. Amber bleibt dem Haupt-CTA vorbehalten sowie den Akzenten, die das bestehende
      Designsystem schon trägt: Drehknöpfe des Fernsehers, Streifenkante, Kopfleiste der Schrittkarten.
   3. Helle Flächen nutzen nur die Tokens Petrol Nebel, Nebel-2 und Mint Hell. */

:root {
  --stage: var(--petrol-tief);
  --stage-2: var(--petrol-tief);
  --hard-ink: 0 6px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ---------- Dunkle Bänder ---------- */
.band--stage { background: var(--petrol-tief); }
.band--stage::before, .pg-ps .band-hero::before { display: none; background: none; }
.band--stage::after, .pg-ps .band-hero::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.pg-ps .band-hero { background: var(--petrol-tief); }
.band--dark, .rt #anfrage, .sec--inkcard, .rt-legal main.legal-page::before { background-color: var(--petrol-tief); }
.rt .prep-banner { background: var(--petrol-tief); color: var(--weiss); }
.pg-home .hero-copy h1, .sub-hero h1 { text-shadow: none; }
.tv .crt__led { background: rgba(255, 255, 255, .3); }
.tv__feet::before, .tv__feet::after { background: var(--ink); }

/* PlayStation: gleiche Bühne, eigene Form über den Speicherkarten-Rahmen; PS1 auf hellem Band */
.pg-ps .a-ps1 h2 { color: var(--ink); }
.pg-ps .a-ps1 p { color: var(--ink); }
.pg-ps .a-ps1 p a:not(.btn) { color: var(--petrol-tief) !important; }
.pg-ps .a-ps1m .shot { border-color: var(--petrol-tief); }
.frame-mem { background: var(--ink); border-color: var(--ink); box-shadow: 0 9px 0 color-mix(in srgb, var(--ink) 30%, transparent), inset 0 2px 0 rgba(255, 255, 255, .14); }
.frame-mem::before { background: repeating-linear-gradient(90deg, var(--petrol-hell) 0 12px, transparent 12px 20px); }
.frame-mem .shot { border-color: var(--ink); }

/* ---------- Amber nur für den Haupt-CTA ---------- */
body.rt main p a:not(.btn) { text-decoration-color: var(--petrol-hell); }
body.rt main p a:not(.btn):hover { background: var(--petrol-nebel); color: var(--petrol-tief); }
.rt .rt-menu > div a:first-child { background: var(--mint-hell); }
.rt .rt-menu > div a:hover { background: var(--petrol-nebel); color: var(--petrol-tief); }
.sec-head h2::after, .h-bar::after, .h-bar-in > h2::after { background: linear-gradient(90deg, var(--petrol-tief) 0 50%, var(--petrol) 50% 75%, var(--petrol-hell) 75%); }
.on-dark.h-bar-in > h2::after { background: linear-gradient(90deg, var(--weiss) 0 50%, var(--petrol-hell) 50% 75%, var(--petrol) 75%); }
.tv__play { background: var(--weiss); border-color: var(--petrol-tief); box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 45%, transparent); }
.tv__play::before { border-left-color: var(--petrol-tief); }
@keyframes rt-pulse { 50% { box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 45%, transparent), 0 0 0 14px rgba(255, 255, 255, .28); } }
.sec--lead { border-left-color: var(--petrol); }
.sec--spine.spine-amber { border-left-color: var(--petrol); }
.sec--spine.spine-petrol { border-left-color: var(--petrol-hell); }
.sec--inkcard h3 { color: var(--mint-hell); }
.band--amber { background: var(--nebel-2); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol-hell) 16%, transparent) 0 12px, transparent 12px 24px); }
.media--amber, .pg-home .offer-consoles-media { background-color: var(--mint-hell); background-image: none; }
.pg-home .offer-consoles-media::before, .media--amber::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol) 10%, transparent) 0 12px, transparent 12px 24px); }
.pg-home .offer-figures-media, .media--hell { background-color: var(--nebel-2); }
.pg-home .player figcaption { background: var(--petrol-nebel); }
.pg-home .player, .pg-home .player img { border-color: var(--petrol-tief); }
.pg-home .player { box-shadow: 0 9px 0 color-mix(in srgb, var(--petrol-tief) 30%, transparent); }
.pg-home .player figcaption::before { border-color: var(--weiss); }
.pg-home .player strong { color: var(--petrol-tief); }
.frame-case::before { background-color: var(--petrol); }
.frame-case { border-color: var(--petrol-tief); box-shadow: 0 9px 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.frame-case::before { border-right-color: var(--petrol-tief); }
.frame-blister { background-color: var(--petrol-hell); border-color: var(--petrol-tief); box-shadow: 0 9px 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.frame-blister::before { border-color: var(--petrol-tief); background: var(--petrol-tief); }
.frame-blister .shot { border-color: var(--petrol-tief); }
.frame-wide .shot { border-color: var(--petrol-tief); box-shadow: 0 10px 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.pg-figuren .reasons > div { background: var(--nebel-2); border-color: var(--petrol-tief); box-shadow: var(--hard); }
.pg-figuren .reasons > div::before { border-color: var(--petrol-tief); }
.pg-figuren .reasons > div:nth-child(2) { background: var(--petrol-nebel); }
.step { border-color: var(--petrol-tief); box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 22%, transparent); }
.step::before { border-bottom-color: var(--petrol-tief); }
.checklist li::before { border-color: var(--weiss); box-shadow: 0 0 0 2px var(--cash); }
.rt .prep-form { border-color: var(--petrol-tief); box-shadow: 0 10px 0 color-mix(in srgb, var(--ink) 30%, transparent), var(--shadow-lg); }
.rt .prep-form::before { border-bottom-color: var(--petrol-tief); }
.rt .prep-form input[type=file]::file-selector-button { background: var(--weiss); border-color: var(--petrol-tief); color: var(--petrol-tief); box-shadow: 0 3px 0 var(--petrol-tief); }
.rt .prep-form .hint, .rt .prep-form .consent-check { color: var(--muted); }
.rt .prep-form input:focus-visible, .rt .prep-form textarea:focus-visible, .rt .prep-form select:focus-visible, .rt .prep-form .toggle input:focus-visible + label { box-shadow: 0 0 0 6px var(--mint-hell); }
.rt #anfrage::before { background: repeating-linear-gradient(90deg, var(--weiss) 0 22px, var(--petrol-hell) 22px 33px, var(--petrol) 33px 44px); }
.faq-list details[open] { box-shadow: 0 6px 0 color-mix(in srgb, var(--petrol-tief) 24%, transparent); }
.faq-list details[open]::before { background: var(--petrol-tief); }

/* Fokus: Petrol Tief auf hellen Flächen, Weiß auf Petrol Tief */
body.rt .on-dark :focus-visible, body.rt #anfrage :focus-visible, body.rt .sec--inkcard :focus-visible, body.rt .prep-banner :focus-visible, body.rt .rt-menu[open] > summary:focus-visible { outline-color: var(--weiss); }
body.rt .step :focus-visible, body.rt #anfrage .prep-form :focus-visible, body.rt .rt-footer :focus-visible { outline-color: var(--petrol-tief); }
.rt .prep-skip { background: var(--weiss); border: 2px solid var(--petrol-tief); color: var(--petrol-tief); }
.rt .prep-skip:focus { outline: 3px solid var(--petrol-tief); }

/* ---------- Footer hell: Logo steht nach Guideline auf sehr hellem Petrol ---------- */
.rt .rt-footer { background: var(--petrol-nebel); color: var(--ink); }
.rt .rt-footer::before { background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 var(--px), transparent var(--px) calc(var(--px) * 2)); }
.rt .rt-footer .prep-footer-logo { padding: 0; background: none; border-radius: 0; box-shadow: none; width: 210px; }
.rt .rt-footer p { color: var(--ink); }
.rt .rt-footer .prep-small { color: var(--petrol-tief); }
.rt .rt-footer nav a { color: var(--petrol-tief); font-weight: 500; }
.rt .rt-footer nav a::before { background: var(--petrol); }
.rt .rt-footer nav:last-of-type a::before { background: var(--petrol-hell); }
.rt .rt-footer nav a:hover { color: var(--ink); }
.rt .rt-footer > .container > .prep-small { border-top-color: var(--linie); }

/* Korrekturen nach der zweiten unabhängigen Sichtprüfung vom 11.11.2026 */

/* 1. Kein haftendes Foto im Seitenraster: es wanderte beim Scrollen über Text, Schrittkarten und FAQ. */
.pg-konsolen .a-checkm, .pg-figuren .a-faqm { position: relative; top: auto; }

/* 2. Bildkennzeichnung nie verdeckt: bei überlappenden Bildgruppen steht sie am ersten Foto oben. */
.pg-home .offer-media .shot:nth-child(1):not(:only-child) figcaption,
.media--stack .shot:nth-child(1) figcaption { top: 10px; bottom: auto; }
.shot figcaption { font-size: .75rem; }

/* 3. Logo-Schutzraum: rundherum mindestens die Höhe des „R“ (rund drei Viertel der Logohöhe). Keine Effekte am Logo. */
:root { --header-h: 106px; }
.rt .rt-header .site-header__inner { min-height: 106px; padding-block: 0; }
.rt .rt-header .brand { padding: 32px 0; }
.rt .rt-header .brand img { width: 150px; transition: none; }
.rt .rt-header .brand:hover img { transform: none; }
.rt .rt-footer .prep-footer-logo { width: 150px; margin: 0 0 34px; }
@media (max-width: 899px) { .rt .rt-footer .prep-footer-logo { margin-left: 14px; } }
@media (max-width: 760px) {
  :root { --header-h: 58px; }
  .rt .rt-header { top: -99px; }
  .rt .rt-header .site-header__inner { min-height: 0; }
  .rt .rt-header .brand { height: auto; padding: 30px 0; justify-content: center; }
  .rt .rt-header .brand img { width: 140px; }
}

/* 4. Maskottchen: einmal je Seite am Formular, auf sehr hellem Petrol, ohne Schatten und ohne Bewegung. */
.rt #anfrage .prep-request > div > img { padding: 14px; border-radius: 24px; background: var(--petrol-nebel); filter: none; animation: none; }
@media (max-width: 899px) { .rt #anfrage .prep-request > div > img { padding: 8px; border-radius: 16px; } }

/* 5. Antenne und Leuchten in Markenfarben; Cash-Grün nur für Geld und Haken. */
.crt__antenna { stroke: var(--linie); }
.crt__antenna circle { fill: var(--petrol-hell); stroke: none; }
.crt__antenna rect { fill: var(--ink); stroke: none; }
.tv--photo .crt__led { background: rgba(255, 255, 255, .3); box-shadow: none; }
.pg-home .player figcaption::before { background: var(--petrol); box-shadow: none; }

/* 6. Zweispaltige Textabschnitte ohne leere Rasterzeilen: Abstand über Außenabstände statt Zeilenabstand. */
@media (min-width: 900px) {
  .sec--aside { row-gap: 0; }
  .sec--aside > :not(h2) + :not(h2) { margin-top: 14px; }
  .sec--aside > h3 { margin-top: 26px !important; }
}

/* 7. Kleinere Sichtmängel */
.loc__cards::before { display: none; }
.loc .card:nth-child(2) { margin-top: 0; }
body.rt { padding-bottom: 0; }
.rt-legal .prep-legal-note { margin-top: 18px; border-radius: var(--r-card); }
.rt-legal main.legal-page { margin-top: 18px; }
@media (max-width: 899px) { .rt-legal main.legal-page > .container, .rt-legal .prep-legal-note { width: calc(100% - 2 * var(--gutter)); } }

/* 8. Unterseiten am Handy: Überschrift, Einstiegstext und Schaltfläche stehen vor dem Bild, wie in der bisherigen Fassung. */
@media (max-width: 899px) {
  .sub-hero h1 { padding-top: 24px; }
  .sub-hero > p { padding-block: 5px; line-height: 1.6; }
  .sub-hero > p:last-child { padding-bottom: 14px; }
  .sub-hero > p:has(.btn) { padding-top: 12px; }
  .hero-action { padding: 10px 0 14px; }
  .sub-media { padding: 8px 0 44px; }
}
@media (max-width: 899px) {
  .sub-hero h1 { font-size: clamp(1.7rem, 7.3vw, 2.4rem); padding-bottom: 4px; }
  .sub-hero > p { font-size: .98rem; }
}
@media (max-width: 899px) { .sub-hero h1 { padding-top: 14px; } .sub-hero > p:has(.btn) { padding-top: 8px; } }

/* Hinweise aus der dritten unabhängigen Prüfung */
/* Rechtsseiten am Handy: lange Überschriften passen ohne Bruch mitten im Wort. */
.rt-legal main.legal-page h1 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 899px) { .rt-legal main.legal-page h1 { font-size: clamp(1.15rem, 5.6vw, 2.2rem); } .rt-legal main.legal-page > .container { padding-inline: 20px; } }
/* Logo-Schutzraum auch dann eingehalten, wenn die schwarze Kontur zur Höhe des „R“ zählt. */
:root { --header-h: 118px; }
.rt .rt-header .site-header__inner { min-height: 118px; }
.rt .rt-header .brand { padding: 38px 0; }
.rt .rt-footer .prep-footer-logo { margin-bottom: 40px; }
@media (max-width: 899px) { .rt .rt-footer .prep-footer-logo { margin-left: 20px; } }
@media (max-width: 760px) {
  :root { --header-h: 58px; }
  .rt .rt-header { top: -105px; }
  .rt .rt-header .site-header__inner { min-height: 0; }
  .rt .rt-header .brand { padding: 36px 0 30px; }
}
/* Bildkennzeichnung einzeilig; schmale erste Karte der Konsolenreihe am Handy breiter, Nachbarkarte tiefer. */
.shot figcaption { white-space: nowrap; }
@media (max-width: 899px) {
  .pg-home .offer-consoles-media .shot:nth-child(1) { grid-column: 1 / 8; }
  .pg-home .offer-consoles-media .shot:nth-child(2) { grid-column: 6 / 13; margin-top: 44%; }
  .pg-home .offer-media .shot:nth-child(2) { margin-top: 52%; }
  .pg-home .offer-consoles-media .shot:nth-child(2) { margin-top: 48%; }
}
/* Maskottchen am Handy groß genug */
@media (max-width: 899px) { .rt #anfrage .prep-request > div > img { width: 124px; } .rt #anfrage .stack { padding-right: 138px; } }
/* Leuchte am Fernseher ohne Cash-Grün */
.tv.is-playing .crt__led { background: var(--weiss); box-shadow: 0 0 9px rgba(255, 255, 255, .8); }
/* Handy-Einstieg der Unterseiten gleicht die höhere Logozeile aus */
@media (max-width: 899px) { .sub-hero h1 { padding-top: 10px; } }
/* Etikett bleibt immer innerhalb der Karte: darf auf sehr schmalen Karten in zwei Zeilen umbrechen. */
.shot figcaption { white-space: normal; max-width: calc(100% - 16px); }
@media (max-width: 420px) { .shot figcaption { left: 8px; padding-inline: .6em; } .pg-home .offer-media .shot:nth-child(2) { grid-column: 6 / 13; } }
/* Sehr schmale Geräte (bis 350 px): Navigation passt in eine Zeile, Bildpaare stehen untereinander. */
@media (max-width: 350px) {
  .rt .rt-nav { font-size: .8rem; gap: 0; }
  .rt .rt-nav > a, .rt .rt-menu > summary { padding: 0 6px; gap: .3em; }
  .rt .rt-nav > a:last-child { padding: 0 9px; }
  .media--pair { grid-template-columns: minmax(0, 1fr); }
  .media--stagger .shot:nth-child(2) { margin-top: 0; }
}
/* Fokusring im Einstieg: Video und außerhalb der Textregion stehender Hauptbutton liegen auf Petrol Tief. */
body.rt .hero-media :focus-visible, body.rt .hero-action :focus-visible { outline-color: var(--weiss); }
.tv video:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; }
/* Fokusring bleibt überall mit mindestens 3:1 sichtbar: Sprunglink über dem Abnahmehinweis, Logo-Link, Video im Bildschirmrahmen. */
.rt .prep-skip:focus { outline: 3px solid var(--weiss); box-shadow: 0 0 0 6px var(--petrol-tief); }
.rt .rt-header .brand:focus-visible { outline-offset: -8px; }
.tv video:focus, .tv video:focus-visible { outline: 3px solid var(--weiss); outline-offset: -6px; }
/* Der Ring liegt um den Bildschirm des Fernsehers, damit er unabhängig vom Videobild sichtbar ist. */
.tv video:focus, .tv video:focus-visible { outline: none; }
.tv__screen:has(video:focus-visible) { outline: 4px solid var(--weiss); outline-offset: 3px; }

/* Befund und Hinweise der vierten unabhängigen Prüfung */
/* Fokusring am Logo liegt außerhalb der Wortmarke: der Link bekommt seitlichen Innenabstand, der Ring sitzt 16 px neben und 30 px über dem Logo. */
.rt .rt-header .brand { padding-inline: 24px; margin-left: -24px; }
.rt .rt-header .brand:focus-visible { outline-offset: -8px; border-radius: 12px; }
@media (max-width: 760px) { .rt .rt-header .brand { margin-left: 0; align-self: center; justify-self: center; } }
/* Schaltflächen und Navigationspillen behalten im Fokus ihre Form. */
.rt .btn:focus-visible, .rt .rt-nav > a:focus-visible, .rt .rt-menu > summary:focus-visible, .rt-legal main.legal-page .legal-back a:focus-visible { border-radius: var(--r-pill); }
/* Rechtsseiten: H1 bleibt auf schmalen Geräten sichtbar größer als H2. */
@media (max-width: 899px) { .rt-legal main.legal-page h2 { font-size: clamp(1rem, 4.4vw, 1.4rem); } }
/* Footer-Logo mit vollem Schutzraum auch bei 320 px. */
@media (max-width: 899px) { .rt .rt-footer .prep-footer-logo { margin-left: 24px; } }
/* Sammlungsseite: Hauptbutton auch bei 1366 x 768 im ersten Bildschirm. */
@media (min-width: 900px) { .pg-sammlung .sub-hero { padding-top: 26px; gap: 14px; } .pg-sammlung .sub-hero h1 { font-size: clamp(2rem, 3.5vw, 2.9rem); } }

/* Handy: Hauptbutton im ersten Bildschirm. Die Textfolge im Quelltext bleibt Überschrift, Text, Schaltfläche;
   nur das Raster setzt die Schaltfläche auf der Startseite unter das Video und auf den Unterseiten hinter den ersten Absatz. */
@media (max-width: 899px) {
  .pg-home .hero-copy h1 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); padding-top: 22px; }
  .pg-home .hero-media { padding: 2px 0 10px; }
  .pg-home .hero-copy > p.a-cta { padding: 6px 0 8px; margin-top: 0; }
  .pg-home .hero-copy > p.a-lead { padding: 10px 0 42px; }
  .sub-hero > p.a-cta { padding: 8px 0 12px; }
  .sub-hero > p.a-lead2 { padding: 6px 0 14px; }
}
/* Kleine Handys bis 380 px Breite: Einstieg etwas dichter, damit der Hauptbutton früher erscheint. */
@media (max-width: 380px) {
  .sub-hero h1 { font-size: 1.62rem; padding-top: 8px; }
  .sub-hero > p { font-size: .93rem; line-height: 1.55; padding-block: 4px; }
  .pg-home .hero-copy h1 { font-size: 1.62rem; padding-top: 14px; }
  .pg-home .tv { padding-top: 40px; }
}


/* Abnahme 12.11.2026 (Marius): Startseite unter 900 px.
   1. Die Antennen des Fernsehers ragten in die H1: Der Fernseher rückt um die Höhe ab, die die Antennen über ihn hinausstehen.
   2. Das Sammlungsfoto ragte in das dunkle Band der Schritte: Unter dem Foto bleibt jetzt Luft bis zum Band. */
@media (max-width: 899.98px) {
  .pg-home .tv { margin-top: clamp(26px, 9vw, 64px); }
  .pg-home .offer-collection-media { margin-bottom: clamp(68px, 11vw, 84px); }
  /* Derselbe Fehler auf /konsolen-ankauf zwischen etwa 480 und 900 px: Die Antennen ragten in den Aufruf zur Fotoanfrage. */
  .pg-konsolen .sub-media .tv { margin-top: clamp(0px, calc(20vw - 66px), 48px); }
}

/* ---------- Cookie-Hinweis und Einwilligung (Go-live 13.11.2026) ----------
   Baut auf der vorhandenen Komponente .cookie des Designsystems auf und übernimmt Rahmen, Ecken und harten
   Schatten von Kopf und Menü. Nicht modal: Kopf, Menü, Kontaktleiste, Formular und Bestätigungsdialog bleiben
   bedienbar. Drei gleichwertige Wege in derselben Sekundärgestaltung; Amber bleibt dem Haupt-CTA der Seite.
   Nur Marken-Tokens, Fredoka und Inter. Ohne Skript oder ohne Mess-ID erscheint nichts davon. */
.rt .ra-zustimmung {
  --ra-abstand: 12px;
  position: fixed; z-index: 50; top: auto;
  left: max(var(--ra-abstand), env(safe-area-inset-left, 0px));
  right: max(var(--ra-abstand), env(safe-area-inset-right, 0px));
  bottom: calc(var(--ra-abstand) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; width: auto; max-width: 640px; margin: 0 auto;
  max-height: calc(100vh - var(--rk-bar, 84px) - 3 * var(--ra-abstand) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--rk-bar, 84px) - 3 * var(--ra-abstand) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; padding: 18px 20px 20px;
  background: var(--weiss); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--rk-hart);
  font-family: var(--font-body);
}
.rt .ra-zustimmung[hidden], .rt .ra-zustimmung__auswahl[hidden] { display: none; }
.rt .ra-zustimmung__titel { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--ink); }
.rt .ra-zustimmung__titel:focus { outline: none; }
.rt .ra-zustimmung .ra-zustimmung__text { margin: 0; max-width: none; font-size: .93rem; line-height: 1.55; color: var(--ink); }
.rt .ra-zustimmung a { color: var(--petrol-tief); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rt .ra-zustimmung a:hover { color: var(--ink); }

/* Drei gleichwertige Knöpfe: gleiche Klasse, gleiche Breite, gleiche Höhe, gleiche Schrift. */
.rt .ra-zustimmung .ra-zustimmung__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 6px; }
.rt .ra-zustimmung .ra-zustimmung__wahl .btn { width: 100%; min-height: 48px; padding: .7em .8em; font-size: .97rem; }
.rt .ra-zustimmung .ra-zustimmung__wahl .btn::after { content: none; }
.rt .ra-zustimmung .ra-zustimmung__wahl .btn[aria-expanded="true"] { background: var(--petrol-nebel); }

/* Auswahl: Notwendig (immer an), Statistik, Marketing (nur mit Ads-ID). Schalter aus dem Designsystem. */
.rt .ra-zustimmung .ra-zustimmung__auswahl { display: grid; gap: 14px; padding-top: 14px; border-top: 2px solid var(--linie); }
.rt .ra-zustimmung .ra-zustimmung__auswahl .cookie__prefs { margin: 0; gap: 14px; }
.rt .ra-zustimmung .ra-zustimmung__kat { display: grid; gap: 2px; font-size: .9rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.rt .ra-zustimmung .ra-zustimmung__kat b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.rt .ra-zustimmung .ra-zustimmung__kat--fest { cursor: default; }
.rt .ra-zustimmung .ra-zustimmung__auswahl[hidden] { display: none; }
.rt .ra-zustimmung .cookie__switch input:focus-visible + .track { outline: 3px solid var(--petrol-tief); outline-offset: 3px; }
.rt .ra-zustimmung .cookie__switch input:checked + .track { background: var(--petrol-tief); }
.rt .ra-zustimmung :focus-visible { outline: 3px solid var(--petrol-tief); outline-offset: 3px; }

/* Platz für den Hinweis: Sprungziele und fokussierte Felder bleiben darüber, das Seitenende bleibt erreichbar. */
html.ra-hinweis-offen { scroll-padding-bottom: calc(var(--ra-hinweis-h, 0px) + 16px); }
html.ra-hinweis-offen body.rt { padding-bottom: var(--ra-hinweis-h, 0px); }
.rt main[tabindex="-1"].ra-fokusziel:focus { outline: none; }

/* Fuß: "Cookie-Einstellungen" sieht aus und verhält sich wie die Links daneben. */
.rt .rt-footer nav .ra-cookie-link { display: inline-flex; align-items: center; justify-self: start; min-height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--petrol-tief); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.rt .rt-footer nav .ra-cookie-link[hidden] { display: none; }
.rt .rt-footer nav .ra-cookie-link::before { content: ""; width: 8px; height: 8px; margin-right: 12px; background: var(--petrol-hell); flex: 0 0 auto; }
.rt .rt-footer nav .ra-cookie-link:hover { color: var(--ink); translate: 4px 0; }

@media (max-width: 979px) {
  /* Über der Kontaktleiste; wenn die Leiste Platz macht (Formular, Tastatur, Menü), rückt der Hinweis nach unten. */
  .rt .ra-zustimmung { bottom: calc(var(--rk-leiste) + var(--ra-abstand) + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--rk-bar) - var(--rk-leiste) - 3 * var(--ra-abstand) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--rk-bar) - var(--rk-leiste) - 3 * var(--ra-abstand) - env(safe-area-inset-bottom, 0px)); }
  html.rk-leiste-aus .rt .ra-zustimmung { bottom: calc(var(--ra-abstand) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 599px) {
  .rt .ra-zustimmung { --ra-abstand: 10px; gap: 8px; padding: 12px 14px 14px; }
  .rt .ra-zustimmung__titel { font-size: 1.08rem; }
  .rt .ra-zustimmung .ra-zustimmung__text { font-size: .87rem; line-height: 1.45; }
  .rt .ra-zustimmung .ra-zustimmung__wahl { grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 0 0 5px; }
  .rt .ra-zustimmung .ra-zustimmung__wahl .btn { min-height: 42px; padding: .5em .8em; font-size: .95rem; }
}
/* Kleine Handys: Der Titel bleibt für Screenreader (Name der Region), sichtbar zählt die Frage. So bleibt über dem
   Hinweis genug Platz, damit fokussierte Formularfelder ganz zu sehen sind. */
@media (max-width: 599px) and (max-height: 700px) {
  .rt .ra-zustimmung__titel { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .rt .ra-zustimmung:not([hidden]) { animation: ra-hinweis-ein .24s var(--ease); }
  .rt .ra-zustimmung { transition: bottom .25s var(--ease); }
  .rt .rt-footer nav .ra-cookie-link { transition: color .15s, translate .15s var(--ease); }
  @keyframes ra-hinweis-ein { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .rt .ra-zustimmung, .rt .ra-zustimmung *, .rt .rt-footer nav .ra-cookie-link { animation: none; transition: none; }
}
@media print { .rt .ra-zustimmung { display: none; } }

/* Staedteseiten Viersen und Heinsberg (golive-2026-11-13/staedte), an das ausgelieferte Stylesheet angehängt.
   Nur neue Klassen (.pg-stadt, .stadt-*, .loc__stadtlink); vorhandene Tokens, Fredoka/Inter, keine per CSS erzeugten Texte.
   Einstieg links mit Aufrufen darunter, Standortkarte rechts; danach je Textabschnitt eine volle Fläche, abwechselnd Weiß und Petrol Nebel. */

/* ---------- Raster ---------- */
.pg-stadt > .stadt-band { grid-column: 1 / -1; grid-row: 1 / 3; }
.pg-stadt .stadt-hero { grid-column: 2 / 9; grid-row: 1; }
.pg-stadt > .stadt-aktionen { grid-column: 2 / 9; grid-row: 2; }
.pg-stadt > .stadt-ort { grid-column: 9 / -2; grid-row: 1 / 3; align-self: center; padding: clamp(30px, 4vw, 52px) 0 clamp(44px, 6vw, 76px) clamp(20px, 3.4vw, 54px); }
.pg-stadt .stadt-abschnitt { grid-column: 1 / -1; padding-block: clamp(46px, 6.4vw, 84px); }
@media (max-width: 899.98px) {
  .pg-stadt > .stadt-band { grid-row: 1 / 4; }
  .pg-stadt .stadt-hero, .pg-stadt > .stadt-aktionen, .pg-stadt > .stadt-ort { grid-column: 2 / -2; }
  .pg-stadt > .stadt-aktionen { grid-row: 2; }
  .pg-stadt > .stadt-ort { grid-row: 3; align-self: start; padding: 6px 0 52px; }
}
/* Tablet hochkant: Textabschnitte so breit wie der Einstieg (660 px Satzspiegel des Rasters) */
@media (min-width: 620px) and (max-width: 899.98px) {
  .pg-stadt .stadt-abschnitt > .container { max-width: calc(660px + 2 * var(--gutter)); }
}

/* ---------- Einstieg ---------- */
.pg-stadt .stadt-hero h1 { overflow-wrap: break-word; }
.pg-stadt .stadt-hero { padding-bottom: 18px; }
.stadt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (min-width: 900px) { .stadt-aktionen { align-self: start; padding-top: 10px; } }

/* ---------- Standortkarte ---------- */
.stadt-ort__karte { display: grid; gap: 10px; justify-items: start; padding: clamp(20px, 2.6vw, 30px); background: var(--weiss); color: var(--ink); border: 2px solid var(--petrol-tief); border-radius: 20px; box-shadow: var(--hard-ink); }
.stadt-ort__karte .pix { width: 48px; height: auto; }
.stadt-ort__titel { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--petrol-tief); }
.stadt-ort__filiale { margin: 0; font-size: .95rem; color: var(--muted); }
.stadt-ort__adresse { font-style: normal; font-size: 1.08rem; font-weight: 500; line-height: 1.55; }
.stadt-ort__daten { display: grid; gap: 2px; width: 100%; margin: 4px 0 0; padding-top: 10px; border-top: 2px solid var(--petrol-nebel); }
.stadt-ort__daten > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 44px; }
.stadt-ort__daten dt { font-size: .88rem; font-weight: 600; color: var(--petrol-tief); }
.stadt-ort__daten dd { margin: 0; overflow-wrap: anywhere; }
.stadt-ort__daten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrol-tief); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--petrol-hell); text-underline-offset: .18em; }
.stadt-ort__daten a:hover { background: var(--petrol-nebel); color: var(--ink); }
body.rt .stadt-ort :focus-visible { outline-color: var(--petrol-tief); }
@media (max-width: 420px) {
  .stadt-ort__daten > div { grid-template-columns: minmax(0, 1fr); padding-block: 4px; }
  .stadt-ort__daten a { min-height: 40px; }
}

/* ---------- Textabschnitte ---------- */
.stadt-abschnitt--hell { background: var(--weiss); }
.stadt-abschnitt--nebel { background: var(--petrol-nebel); }
.stadt-abschnitt > .sec, .stadt-abschnitt > .faq-sec { padding-block: 0; }
.stadt-abschnitt .sec > h2, .stadt-abschnitt .faq-sec > h2 { overflow-wrap: break-word; }
.stadt-abschnitt .sec > p, .stadt-abschnitt .sec > ul, .stadt-abschnitt .sec > ol, .stadt-abschnitt .sec > h3 { max-width: 70ch; }
.stadt-text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stadt-text ul > li { position: relative; padding-left: 26px; line-height: 1.7; }
.stadt-text ul > li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 10px; height: 10px; background: var(--petrol); }
.stadt-text ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.stadt-text li > p { line-height: 1.7; }
body.rt main .stadt-text li a:not(.btn) { color: var(--petrol-tief); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--petrol-hell); text-underline-offset: .18em; }
body.rt main .stadt-text li a:not(.btn):hover { background: var(--petrol-nebel); color: var(--petrol-tief); }
.stadt-faq .faq-list details > ul, .stadt-faq .faq-list details > ol { padding: 0 28px 20px; }
.stadt-abschnitt--nebel .faq-list details { border-color: color-mix(in srgb, var(--petrol-tief) 40%, transparent); }

/* ---------- Startseite: Link in der Standortkarte ---------- */
.loc .card .loc__stadtlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrol-tief); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--petrol-hell); text-underline-offset: .18em; }
.loc .card .loc__stadtlink:hover { background: var(--petrol-nebel); color: var(--ink); }