/* Variant: Ticket — a boarding pass from Wiesbaden to your project. Light, warm. */
:root {
  --bg: #fff4ec; --surface: #ffffff; --muted: #fde8da; --ink: #1d2340; --ink-2: #5d6178; --line: #f2dccd;
  --accent: #1d2340; --accent-ink: #ffffff; --accent-soft: #ffe2cf; --green-soft: #ffe2cf; --amber-soft: #fff0c9;
  --night: #1d2340; --night-2: #2a3157; --orange: #ff7a45;
  --ui-accent: #ff7a45; --ui-img: #fff0e6;
  color-scheme: light;
}
.tk-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .tk-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.tk-title { font-size: clamp(2.75rem, 5.2vw, 5rem); line-height: 0.98; letter-spacing: -0.05em; }
.tk-hero .hero__lead { margin-top: 1.5rem; }
.tk-hero .hero__actions { margin-top: 2rem; }
.tk { display: grid; filter: drop-shadow(0 30px 40px rgba(29, 35, 64, 0.22)); rotate: -2deg; }
@media (min-width: 40em) { .tk { grid-template-columns: minmax(0, 1fr) 9rem; } }
.tk-main, .tk-stub { background: #ffffff; }
.tk-main { padding: clamp(20px, 3vw, 32px); border-radius: 22px 0 0 22px;
  -webkit-mask: radial-gradient(circle 14px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 14px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tk-title { margin: 0; }
p.tk-title { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--orange); }
p.tk-title span { color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
.tk-route { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.tk-route div { display: grid; }
.tk-route div:last-child { text-align: right; }
.tk-route span { font-size: 0.75rem; color: var(--ink-2); }
.tk-route b { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.tk-route em { font-style: normal; font-size: 0.875rem; font-weight: 600; }
.tk-plane { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); position: relative; }
.tk-plane::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; background: var(--orange); clip-path: polygon(0 45%, 40% 45%, 25% 5%, 38% 5%, 62% 45%, 92% 45%, 100% 50%, 92% 55%, 62% 55%, 38% 95%, 25% 95%, 40% 55%, 0 55%); }
.tk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px dashed var(--line); }
@media (min-width: 64em) { .tk-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-fields dt { font-size: 0.6875rem; font-weight: 600; color: var(--ink-2); }
.tk-fields dd { margin: 0.1rem 0 0; font-size: 0.875rem; font-weight: 650; line-height: 1.3; }
.tk-stub { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 22px 16px; border-left: 2px dashed var(--line); border-radius: 0 22px 22px 0; background: var(--orange); color: #ffffff; }
.tk-stub p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.tk-stub b { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; }
.tk-code { flex: 1; width: 70%; min-height: 5rem; background: repeating-linear-gradient(90deg, #ffffff 0 2px, transparent 2px 4px, #ffffff 4px 7px, transparent 7px 9px, #ffffff 9px 10px, transparent 10px 13px); }
@media (max-width: 39.99em) { .tk-main { border-radius: 22px 22px 0 0; -webkit-mask: none; mask: none; } .tk-stub { flex-direction: row; justify-content: space-between; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, 0.6); border-radius: 0 0 22px 22px; } .tk-code { flex: 0 0 40%; min-height: 3rem; } }
.tile--dark .focus strong { color: #ffb38f; }
.steps li::before { background: var(--orange); color: #ffffff; }
.product__visual--water { background: #ffe2cf; } .product__visual--jobs { background: #e6e8ff; } .product__visual--food { background: #fff0c9; }