/* The two access points share one card anatomy. All scenes are static examples. */
#produkte { padding-block: clamp(64px, 6vw, 96px); }
#produkte > h2 { max-width: 1080px; margin: 28px 0 36px; font-size: clamp(30px, 4.5vw, 64px); line-height: 1.08; hyphens: none; }
#produkte .access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 24px; }
#produkte .access-grid > article { display: grid; grid-template-rows: subgrid; grid-row: span 4; padding: 28px 30px 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
#produkte .web-product { background: var(--tint); }
#produkte .togo-product { background: var(--panel); }
#produkte .product-topline { margin: 0 0 22px; min-height: 28px; font: 11px/1.5 var(--mono); gap: 20px; }
#produkte .product-topline > span:first-child { max-width: 30ch; }
#produkte .product-topline > span:last-child { color: var(--accent); font-size: 28px; }
#produkte .product-copy h3 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.04em; }
#produkte .access-tagline { margin-top: 7px; font-size: 18px; line-height: 1.45; }
#produkte .access-description { margin-top: 16px; font-size: 16px; line-height: 1.65; max-width: 47ch; }
#produkte .access-description a { text-decoration: underline; text-underline-offset: 4px; }
#produkte .browser-scene, #produkte .togo-scene { height: 360px; margin-top: 26px; position: relative; perspective: none; }
#produkte .web-route, #produkte .togo-route, #produkte .togo-ring, #produkte .link-slip { display: none; }
#produkte .mini-browser { top: 22px; left: 2%; width: 92%; height: 288px; transform: rotate(-3deg); transform-origin: 50% 100%; border-color: var(--line); border-radius: 6px; box-shadow: 0 16px 28px -12px #191b1b26; }
#produkte .browser-top { padding: 11px 14px; gap: 16px; font-size: 10px; }
#produkte .website-example { height: 245px; padding: 22px; }
#produkte .website-example > span { font-size: 10px; }
#produkte .website-example > div { max-width: 10ch; margin-top: 18px; font-size: 26px; }
#produkte .chat-example { top: 90px; right: -3%; width: 85%; padding: 19px; transform: rotate(3deg); border-color: var(--line); border-radius: 6px; box-shadow: 0 16px 28px -12px #191b1b33; }
#produkte .chat-header { font-size: 15px; }
#produkte .ai-disclosure { font-size: 12px; line-height: 1.5; margin: 7px 0 12px; }
#produkte .chat-bubble { font-size: 13px; line-height: 1.5; padding: 11px 13px; margin-top: 9px; background: var(--tint); }
#produkte .user-bubble { background: var(--lilac); }
#produkte .chat-example-note { font: 11px/1.5 var(--mono); margin-top: 12px; }
#produkte .togo-scene .access-card { width: min(340px, 68%); top: 112px; left: 3%; aspect-ratio: 85.6 / 53.98; height: auto; translate: none !important; }
#produkte .togo-scene .back-card { top: 88px; left: 8%; transform: rotate(4deg); border-color: var(--accent); background: var(--lilac); box-shadow: 0 12px 25px -12px #191b1b33; }
#produkte .togo-scene .front-card { padding: 18px; transform: rotate(-5deg); background: var(--panel); border-color: var(--line); box-shadow: 0 15px 26px -11px #191b1b4d; z-index: 3; }
#produkte .front-card > div { font: 400 8cqi/1 var(--display); }
#produkte .front-card > div img { width: 17%; height: auto; }
#produkte .front-card strong { font-size: 13cqi; margin-top: 6cqi; }
#produkte .front-card .sample-qr { top: 34%; }
#produkte .front-card .sample-qr figcaption { font-size: clamp(8px, 2.7cqi, 10px); }
#produkte .front-card > small { font-size: clamp(8px, 2.7cqi, 10px); }
#produkte .product-phone { position: absolute; right: 3%; top: 25px; width: 29%; max-width: 156px; aspect-ratio: 1 / 2; padding: 34px 13px 15px; background: var(--paper); border: 4px solid var(--ink); border-radius: 24px; transform: rotate(6deg); box-shadow: 0 18px 28px -12px #191b1b4d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; z-index: 2; }
#produkte .product-phone::before { content: ""; position: absolute; top: 7px; left: 30%; width: 40%; height: 10px; border-radius: 10px; background: var(--ink); }
#produkte .product-phone > img:first-child { width: 44%; }
#produkte .product-phone > strong { font: 600 clamp(14px, 1.45vw, 22px)/1.15 var(--heading); letter-spacing: -.04em; text-align: center; }
#produkte .product-phone > img:last-of-type { width: 92%; height: auto; aspect-ratio: 1; }
#produkte .product-phone > small { font: 8px/1.4 var(--mono); text-align: center; }
#produkte .product-foot { margin-top: 15px; padding-block: 14px; min-height: 76px; font: 11px/1.5 var(--mono); gap: 12px; }
#produkte .web-product .product-foot > a.text-link { font: 13px/1.4 var(--body); }
#produkte .product-foot > span { max-width: 45%; }
#produkte .access-dev { margin-top: 22px; }
#produkte .access-dev + .access-dev { margin-top: 0; }
#produkte .access-dev .text-link { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  #produkte .mini-browser, #produkte .product-phone, #produkte .front-card { transition: transform 240ms var(--ease); }
  #produkte .web-product:is(:hover, :focus-within) .mini-browser { transform: rotate(-1deg) translateY(-3px); }
  #produkte .togo-product:is(:hover, :focus-within) .front-card { transform: rotate(-3deg) translateY(-3px); }
  #produkte .togo-product:is(:hover, :focus-within) .product-phone { transform: rotate(4deg) translateY(-3px); }
}
@media (max-width: 900px) {
  #produkte .access-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; }
  #produkte .access-grid > article { grid-template-rows: auto auto auto auto; grid-row: auto; }
  #produkte .product-copy { max-width: 540px; }
  #produkte .browser-scene, #produkte .togo-scene { width: min(100%, 550px); margin-inline: auto; }
  #produkte .product-phone > strong { font-size: 22px; }
}
@media (max-width: 540px) {
  #produkte .access-grid > article { padding: 22px 20px 0; border-radius: 14px; }
  #produkte .product-topline { font-size: 10px; margin-bottom: 16px; }
  #produkte .product-copy h3 { font-size: 27px; }
  #produkte .access-tagline { font-size: 16px; }
  #produkte .access-description { font-size: 14px; }
  #produkte .browser-scene, #produkte .togo-scene { height: 310px; margin-top: 24px; }
  #produkte .browser-scene { height: auto; min-height: 310px; padding-block: 12px 26px; }
  #produkte .mini-browser { position: relative; height: auto; min-height: 253px; top: auto; }
  #produkte .browser-top { padding: 10px; font-size: 9px; gap: 10px; }
  #produkte .website-example { position: absolute; inset: 34px 0 0; height: auto; padding: 16px; }
  #produkte .website-example > div { font-size: 22px; }
  #produkte .chat-example { position: relative; width: 103%; top: auto; right: auto; margin: 45px 0 10px 8%; padding: 14px; }
  #produkte .chat-header { font-size: 13px; }
  #produkte .ai-disclosure { font-size: 11px; }
  #produkte .chat-bubble { font-size: 12px; padding: 9px; }
  #produkte .chat-example-note { font-size: 10px; }
  #produkte .togo-scene .access-card { width: 73%; left: 0; top: 112px; }
  #produkte .togo-scene .back-card { left: 5%; top: 96px; }
  #produkte .togo-scene .front-card { padding: 12px; }
  #produkte .product-phone { right: 0; width: 33%; top: 25px; padding: 26px 8px 12px; border-width: 3px; border-radius: 18px; gap: 9px; }
  #produkte .product-phone::before { top: 5px; height: 8px; }
  #produkte .product-phone > strong { font-size: 16px; }
  #produkte .product-phone > small { font-size: 7px; }
  #produkte .product-foot { font-size: 10px; min-height: 74px; margin-top: 0; }
  #produkte .web-product .product-foot > a.text-link { font-size: 12px; }
}
@media (forced-colors: active) {
  #produkte .access-grid > article, #produkte .product-phone { border-color: CanvasText; }
}