/* Hinweis auf den 3D-Track im Konfigurator. Farben nach CI: Magenta nur für den Weg zum Kauf, Petrol für Information */
.ti3d-pop { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: rgba(29,29,31,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ti3dFade .2s ease-out; }
.ti3d-pop-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.25); font-family: var(--ti-font, Inter), -apple-system, BlinkMacSystemFont, sans-serif; color: #1D1D1F; animation: ti3dUp .25s ease-out; }
.ti3d-pop-media { display: grid; place-items: center; padding: 28px; background: #F4F4F6; }
.ti3d-pop-media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; }
.ti3d-pop-txt { padding: 48px 44px 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ti3d-pop .ti3d-pop-eye { margin: 0; font-size: 15px; font-weight: 600; color: #1B7889; }
.ti3d-pop h2 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.ti3d-pop p { margin: 0; font-size: 17px; line-height: 1.55; color: #6E6E73; }
.ti3d-pop .ti3d-pop-stock { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: #F6EAF4; color: #7A2E74; font-size: 15px; font-weight: 600; }
.ti3d-pop .ti3d-pop-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #963A8F; }
.ti3d-pop-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.ti3d-pop-go, .ti3d-pop-no { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none !important; cursor: pointer; box-sizing: border-box; }
.ti3d-pop-go { background: #963A8F; color: #fff !important; border: 0; }
.ti3d-pop-go:hover { background: #7A2E74; }
.ti3d-pop-no { border: 1.5px solid #1B7889; background: #fff; color: #1B7889; }
.ti3d-pop-no:hover { background: #E6F4F7; }
.ti3d-pop-x { position: absolute; top: 14px; right: 14px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 26px; line-height: 1; cursor: pointer; color: #1D1D1F; }
.ti3d-pop a:focus-visible, .ti3d-pop button:focus-visible { outline: 2px solid #2DA0B5; outline-offset: 3px; }
@keyframes ti3dFade { from { opacity: 0; } }
@keyframes ti3dUp { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 720px) {
  .ti3d-pop { padding: 16px; }
  .ti3d-pop-box { grid-template-columns: minmax(0, 1fr); border-radius: 28px; max-height: calc(100vh - 32px); }
  .ti3d-pop-media { padding: 24px 24px 8px; }
  .ti3d-pop-media img { max-height: 34vh; }
  .ti3d-pop-txt { padding: 24px 24px 28px; gap: 12px; text-align: center; align-items: center; }
  .ti3d-pop .ti3d-pop-stock { align-self: center; }
  .ti3d-pop h2 { font-size: 28px; }
  .ti3d-pop p { font-size: 16px; }
  .ti3d-pop-btns { flex-direction: column; width: 100%; gap: 10px; }
  .ti3d-pop-go, .ti3d-pop-no { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ti3d-pop, .ti3d-pop-box { animation: none; } }

/* Startseite: zwei Stadt-Buttons, der zweite in Petrol */
.ti3d-pop-go--alt { background: #1B7889; }
.ti3d-pop-go--alt:hover { background: #155F6C; }
.ti3d-pop--home .ti3d-pop-media { background: linear-gradient(160deg, #E6F4F7, #F4F4F6); }