/* Tour view: the way DudeCorp works, told as one run through the machine. Builds on styles-bundle.css. */
.tour { --raised: #111014; --frame: #b1a68a; --wire: #57514d; --active: #1d1718; --ok: #a8d8b0; --glow: 0 0 24px rgba(255, 90, 79, .28); --ease: cubic-bezier(.18, .82, .16, 1); }
.tour main { overflow-x: clip; }
.tour .micro { font-size: 9px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.tour section > .eyebrow, .tour section div > .eyebrow { color: var(--coral); margin-bottom: 14px; }

/* Chips of scattered work that the run draws into its first phase. */
.shards li { position: absolute; white-space: nowrap; font-size: 11px; line-height: 1; color: var(--cream); background: var(--raised); border: 1px solid var(--line); padding: 9px 11px; }
.shards li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--wire); vertical-align: 1px; }

/* 2 · The run */
.run { padding: 120px 48px 40px; }
.run-intro { max-width: 660px; margin: 0 auto 72px; text-align: center; }
.run-intro h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.035em; }
.run-intro p:last-child { color: var(--muted); font-size: 13px; line-height: 1.9; margin-top: 18px; }
.run-grid { display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 50%); gap: 64px; align-items: start; }
.stage { position: sticky; top: 108px; }
.stage-frame { background: var(--raised); border: 1px solid #b1a68a55; display: flex; flex-direction: column; height: calc(100svh - 150px); max-height: 760px; }
.stage-head { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.stage-state { color: var(--coral); transition: color .25s; }
.stage-state.is-running { color: var(--ok); }
.stage-body { position: relative; flex: 1; min-height: 0; padding: 26px 28px 26px 96px; background-image: linear-gradient(#eee7d806 1px, transparent 1px), linear-gradient(90deg, #eee7d806 1px, transparent 1px); background-size: 40px 40px; }
.wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire-base { stroke: var(--wire); stroke-width: 1.35; }
.wire-lit { stroke: var(--coral); stroke-width: 1.35; }
.wire-loop { fill: none; stroke: var(--ok); stroke-width: 1.35; stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: calc(var(--len, 0) * (1 - var(--loop, 0))); }
.loop-label { position: absolute; font-size: 9px; letter-spacing: .08em; color: var(--ok); opacity: var(--loop, 0); transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; pointer-events: none; }
.pulse { fill: var(--coral); }
.pulse-halo { fill: var(--coral); opacity: .22; filter: blur(4px); }
.stations { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.station {
  display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; min-height: 58px; padding: 0 18px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s, box-shadow .25s, transform .25s var(--ease);
}
.station:hover { color: var(--cream); }
.station strong { font-size: 21px; letter-spacing: -.015em; color: inherit; }
.st-index { font-size: 10px; color: var(--coral); }
.st-mark { text-align: right; }
.station.is-done { color: var(--cream); border-color: var(--wire); }
.station.is-active { color: var(--cream); border-color: var(--coral); background: var(--active); box-shadow: var(--glow); transform: translateX(6px); }
.shards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.shards li { --tx: 0px; --ty: 0px; --s: 1; --o: 1; left: var(--x); top: var(--y); transform: translate(var(--tx), var(--ty)) rotate(calc(var(--r) * var(--s))) scale(var(--s)); opacity: var(--o); box-shadow: 0 12px 30px #000a; }

.steps { display: flex; flex-direction: column; padding-bottom: 32svh; }
/* Reaching operation: the whole line settles into the success colour. */
.stage-frame .wire-lit, .stage-frame .pulse, .stage-frame .pulse-halo { transition: stroke .55s, fill .55s; }
.stage-frame.is-running .wire-lit { stroke: var(--ok); }
.stage-frame.is-running .pulse, .stage-frame.is-running .pulse-halo { fill: var(--ok); }
.stage-frame.is-running .station.is-done { border-color: #a8d8b055; }
.stage-frame.is-running .station.is-done .st-mark { color: var(--ok); }
.stage-frame.is-running .station.is-active { border-color: var(--ok); box-shadow: 0 0 24px rgba(168, 216, 176, .22); }
.step { min-height: 82svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 540px; opacity: .22; transition: opacity .7s var(--ease); scroll-margin-top: 10svh; }
.step.is-current { opacity: 1; }
.step .eyebrow { color: var(--coral); margin-bottom: 14px; }
.step h3 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.step > p:not(.eyebrow):not(.step-cost) { color: var(--muted); font-size: 15px; line-height: 1.9; margin-top: 18px; max-width: 46ch; }
.step-cost { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.step-cost b { font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); border: 1px solid #b1a68a55; padding: 5px 9px; white-space: nowrap; }
.step:first-child .step-cost b { border-color: #a8d8b0; color: #a8d8b0; }
.step-more { margin-top: 20px; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 11px; color: var(--muted); border-bottom: 1px solid #ff5a4f66; }
.step-more:hover { color: var(--cream); }

.run-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 0 40px; text-align: center; }
.run-cta p { font-family: Instrument, serif; font-style: italic; font-size: clamp(22px, 2.2vw, 30px); color: var(--muted); }

/* 3 · Modules */
.modules { padding: 110px 48px 80px; }
.modules-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 64px; align-items: end; margin-bottom: 44px; }
.modules-head h2 { font-size: clamp(34px, 3.6vw, 57px); letter-spacing: -.035em; line-height: 1.08; }
.modules-head > p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module {
  --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 230px; padding: 22px; background: var(--raised); border: 1px solid var(--line); overflow: hidden;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: border-color .18s, transform .25s var(--ease);
}
.module.is-core { grid-row: span 2; border-color: #9b5149; background: linear-gradient(160deg, #1a1416, var(--raised) 60%); }
/* Four services: the last tile fills the row beside the core, so the grid has no gap. */
.module-grid > .module:last-child { grid-column: span 2; }
.module.is-core strong { font-size: clamp(30px, 2.6vw, 40px); }
.hub { width: 100%; max-width: 360px; margin: 10px 0 4px; overflow: visible; }
.hub-spokes { stroke: #57514d; stroke-width: 1; stroke-dasharray: 3 4; fill: none; transition: stroke .3s; }
.hub-core { fill: #1d1718; stroke: var(--coral); stroke-width: 1; }
.hub text { font-family: Azeret, monospace; font-size: 9px; letter-spacing: .08em; fill: var(--cream); text-anchor: middle; }
.hub .hub-dock { fill: var(--muted); font-size: 8px; }
.hub .hub-start { text-anchor: start; }
.hub circle { fill: var(--bg); stroke: var(--coral); stroke-width: 1; }
.module.is-core:hover .hub-spokes { stroke: var(--coral); }
.module::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 90, 79, .14), transparent 60%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.module:hover { border-color: var(--coral); transform: translateY(-3px); }
.module:hover::before { opacity: 1; }
.module:focus-visible { outline: 3px solid var(--coral); outline-offset: 5px; }
.m-index { font-size: 10px; color: var(--coral); letter-spacing: .06em; }
.module strong { font-size: 25px; line-height: 1.15; letter-spacing: -.015em; }
.module p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.m-go { margin-top: auto; align-self: flex-end; font-size: 20px; }

/* 4 · Principles */
.stance { padding: 120px 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 40px 64px; }
.stance-head h2 { font-size: clamp(34px, 3.6vw, 57px); letter-spacing: -.035em; line-height: 1.08; position: sticky; top: 140px; }
.principles { list-style: none; margin: 0; padding: 0; }
.principles li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); font-family: Saira, sans-serif; font-weight: 700; font-size: clamp(28px, 3vw, 46px); line-height: 1.1; letter-spacing: -.03em; color: #4a4542; transition: color .5s var(--ease); }
.principles li:first-child { border-top: 1px solid var(--line); }
.principles li span { font-family: Azeret, monospace; font-weight: 400; font-size: 10px; letter-spacing: .06em; color: var(--coral); }
.principles li.is-lit { color: var(--cream); }
.operator { grid-column: 2; display: grid; grid-template-columns: 72px 1fr; gap: 10px 22px; align-items: center; }
.operator img { width: 72px; height: 72px; object-fit: contain; }
.operator p { font-size: 13px; line-height: 1.9; color: var(--muted); }
.operator em { font-family: Instrument, serif; font-size: 20px; color: var(--cream); display: block; margin-top: 6px; }
.operator .quiet-link { grid-column: 2; margin-top: 0; justify-self: start; }

/* Häufige Fragen */
.faq { padding: 120px 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 40px 64px; }
.faq-head h2 { font-size: clamp(34px, 3.6vw, 57px); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 18px; }
.faq-head .quiet-link { margin-top: 0; }

/* 5 · Finale */
.finale { padding: 140px 48px; text-align: center; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.finale .question { font-family: Instrument, serif; font-style: italic; font-size: clamp(22px, 2.2vw, 30px); color: var(--muted); max-width: 30ch; }
.finale h2 { font-size: clamp(48px, 6vw, 90px); letter-spacing: -.045em; line-height: 1; }
.finale-note { font-size: 12px; color: var(--muted); }
.finale .button { margin-top: 12px; }


/* Responsive: the stage becomes a compact sticky strip above the story */
@media (max-width: 1100px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .run { padding: 80px 20px 20px; }
  .run-intro { margin-bottom: 36px; text-align: left; }
  .run-grid { grid-template-columns: 1fr; gap: 0; }
  .stage { top: 76px; z-index: 5; margin: 0 -20px; }
  .stage-frame { height: auto; max-height: none; border-left: 0; border-right: 0; }
  .stage-head { padding: 10px 16px; font-size: 9px; }
  .stage-body { padding: 14px 16px 22px; height: 104px; flex: none; }
  .stations { flex-direction: row; height: 100%; gap: 8px; }
  .station { flex: 1; min-width: 0; grid-template-columns: 1fr; justify-items: center; align-content: center; min-height: 0; padding: 6px 0; gap: 2px; }
  .station strong { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .station .st-mark { display: none; }
  .station.is-active { transform: translateY(-3px); }
  .shards, .loop-label { display: none; }
  .step { min-height: 82svh; padding-top: 30px; scroll-margin-top: 200px; }
  .steps { padding-bottom: 12svh; }
  .modules, .stance, .faq, .finale { padding-left: 24px; padding-right: 24px; }
  .faq { grid-template-columns: 1fr; padding-top: 80px; padding-bottom: 80px; }
  .modules, .stance { padding-top: 80px; padding-bottom: 80px; }
  .modules-head { grid-template-columns: 1fr; }
  .stance { grid-template-columns: 1fr; }
  .stance-head h2 { position: static; }
  .operator { grid-column: 1; }
  .finale { padding-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 600px) {
  .module-grid { grid-template-columns: 1fr; }
  .module.is-core { grid-row: auto; }
  .module-grid > .module:last-child { grid-column: auto; }
  .module { min-height: 0; }
  .principles li { grid-template-columns: 36px 1fr; padding: 20px 0; }
  .operator { grid-template-columns: 56px 1fr; }
  .operator img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .shards { display: none; }
  .step { opacity: 1; }
  .principles li { color: var(--cream); }
}