/* 3D-Track: baut auf seo.css (.ti-seo) auf, damit Schrift, Farben und Hero wie auf den anderen Seiten aussehen */
.ti3d { --i-ok: var(--ti-petrol-strong, #1B7889); --i-err: #B3261E; }
.ti3d-crumbs { font-size: 14px; color: var(--s-soft); margin-bottom: 8px; }
.ti3d-crumbs a { color: var(--s-soft); }
.ti-seo .ti3d-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.ti3d-viewwrap { position: sticky; top: 24px; }
.ti3d-view { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; background: radial-gradient(110% 90% at 50% 35%, #fff 0%, rgba(255,255,255,0) 75%); overflow: hidden; touch-action: none; }
.ti3d-view canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ti3d-view canvas:active { cursor: grabbing; }
.ti3d-view-load, .ti3d-view-tip { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; color: var(--s-soft); pointer-events: none; }
.ti3d-view-load { top: 50%; transform: translateY(-50%); }
.ti3d-view.is-ready .ti3d-view-load { display: none; }
.ti3d-view-tip { bottom: 14px; opacity: 0; transition: opacity .3s; }
.ti3d-view.is-ready .ti3d-view-tip { opacity: 1; }
.ti3d-view.is-moved .ti3d-view-tip { opacity: 0; }
.ti3d-price { margin: 8px 0 28px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.ti3d-price .ti3d-price-note { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--s-soft); margin-top: 4px; }
.ti3d-form fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.ti3d-form legend { font-size: 17px; font-weight: 600; margin-bottom: 12px; padding: 0; }
.ti3d-form legend strong { font-weight: 400; color: var(--s-soft); }
.ti3d-fw-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ti3d-fw-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 8px; border: 1.5px solid var(--s-line); border-radius: 999px; cursor: pointer; background: #fff; }
.ti3d-fw-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ti3d-fw-item:has(input:checked) { border-color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-ink); }
.ti3d-fw-item:has(input:focus-visible) { outline: 2px solid var(--s-magenta); outline-offset: 2px; }
.ti3d-fw-dots { display: flex; }
.ti3d-fw-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.ti3d-fw-dots i:first-child { margin-left: 0; }
.ti3d-fw-dots i.is-glanz { background-image: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%) !important; }
.ti3d-fw-txt { font-size: 15px; font-weight: 500; }
.ti3d-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--s-line); }
.ti3d-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ti3d-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s-soft); }
.ti3d-field[hidden] { display: none; }
.ti3d-field--wide { grid-column: 1 / -1; }
.ti3d-field input, .ti3d-field select { height: 48px; padding: 0 14px; border: 1.5px solid var(--s-line); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 400; color: var(--s-ink); background: #fff; width: 100%; box-sizing: border-box; }
.ti3d-field input:focus, .ti3d-field select:focus { outline: none; border-color: var(--s-ink); }
.ti3d-hint { min-height: 22px; margin: -8px 0 20px; font-size: 15px; color: var(--s-soft); }
.ti3d-hint[data-state="ok"] { color: var(--i-ok); }
.ti3d-hint[data-state="error"] { color: var(--i-err); font-weight: 600; }
.ti3d-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ti3d-btn { border: 0; cursor: pointer; font-family: inherit; }
.ti3d-btn:disabled { background: #C7C7CC !important; cursor: not-allowed; }
.ti3d-stock { margin: 0; font-size: 15px; font-weight: 600; color: var(--i-ok); }
.ti3d-stock[data-state="out"] { color: var(--i-err); }
.ti3d-gallery-wrap { margin-top: 88px; }
.ti3d-gallery[hidden] { display: none !important; }
.ti3d-fw-farben { font-size: 14px; font-weight: 400; color: var(--s-soft); }
.ti3d-fw-stock { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--s-soft); }
.ti3d-fw-stock.is-out { color: var(--i-err); }
.ti3d-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ti3d-gallery figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--s-surface); }
.ti3d-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ti3d-ph { display: grid; place-items: center; text-align: center; border: 2px dashed var(--s-line); background: transparent !important; color: var(--s-soft); font-weight: 600; }
.ti3d-ph small { font-weight: 400; font-size: 12px; }
.ti3d-facts, .ti3d-text, .ti3d-faq { max-width: 760px; margin-top: 72px; }
.ti3d-facts ul { margin: 0; padding-left: 20px; line-height: 1.75; font-size: 17px; }
.ti3d-text { font-size: 17px; line-height: 1.65; }
@media (max-width: 860px) {
  .ti-seo .ti3d-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ti3d-viewwrap { position: relative; top: 0; }
  .ti3d-view { aspect-ratio: 4 / 3.4; }
  .ti3d-choose { grid-template-columns: minmax(0, 1fr); }
  .ti3d-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ti3d-gallery figure { border-radius: 14px; }
  .ti3d-gallery-wrap { margin-top: 56px; }
}
@media (max-width: 420px) { .ti3d-values { grid-template-columns: minmax(0, 1fr); } }

.ti3d-view-note { margin: 10px 4px 0; font-size: 13px; color: var(--s-soft); text-align: center; }
/* Luft zwischen letzter Sektion (Fragen) und Footer */
main.ti3d { padding-bottom: 104px; }
@media (max-width: 860px) { main.ti3d { padding-bottom: 72px; } }

/* Wunschformular */
.ti3d-wunsch { margin-top: 72px; padding: 40px; border-radius: 32px; background: #F4F4F6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.ti3d-wunsch .ti3d-wunsch-eye { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #1B7889; }
.ti3d-wunsch h2 { margin: 0 0 12px; }
.ti3d-wunsch-txt p:last-child { margin: 0; font-size: 17px; line-height: 1.55; color: var(--s-soft); }
.ti3d-wunsch-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ti3d-wunsch-form textarea { padding: 12px 14px; border: 1.5px solid var(--s-line); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 400; color: var(--s-ink); background: #fff; width: 100%; box-sizing: border-box; resize: vertical; }
.ti3d-wunsch-form textarea:focus { outline: none; border-color: var(--s-ink); }
.ti3d-wunsch-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ti3d-wunsch-foot small { flex: 1 1 220px; font-size: 13px; line-height: 1.5; color: var(--s-soft); }
.ti3d-wunsch-ok { margin: 0; padding: 20px 24px; border-radius: 20px; background: #E6F4F7; color: #1B7889; font-size: 17px; font-weight: 600; }
.ti3d-wunsch-err { grid-column: 1 / -1; margin: 0; color: var(--i-err); font-weight: 600; font-size: 15px; }
.ti3d-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .ti3d-wunsch { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; gap: 24px; border-radius: 20px; margin-top: 56px; }
  .ti3d-wunsch-form { grid-template-columns: minmax(0, 1fr); }
  .ti3d-wunsch-foot .ti3d-btn { width: 100%; }
}