/* M2 "Karten": one Vollfarb surface per step, large tap tiles, the next step opens as a circle
   from the chosen tile and closes back into it. Radii: 0 (tiles, surfaces) and 999 (actions, rings). */

.m2 { --tile-h: clamp(136px, 21vh, 210px); }

/* Colour of the next surface: the chosen tile takes it, then opens it. */
[data-next-surface="blau"] { --next-bg: var(--blau); --next-fg: var(--creme); }
[data-next-surface="gelb"] { --next-bg: var(--gelb); --next-fg: var(--nacht); }
[data-next-surface="creme"] { --next-bg: var(--creme); --next-fg: var(--nacht); }
[data-next-surface="nacht"] { --next-bg: var(--nacht); --next-fg: var(--creme); }
[data-next-surface="rosa"] { --next-bg: var(--rosa); --next-fg: var(--nacht); }
[data-next-surface="koralle"] { --next-bg: var(--koralle); --next-fg: var(--nacht); }

.surface { background: var(--bg); color: var(--fg); }

/* ---------- Screens ---------- */
.intro, .step, .end { position: relative; min-height: 100svh; padding: calc(var(--bar-h) + clamp(40px, 8vh, 96px)) var(--margin) 0; display: flex; flex-direction: column; }
.js [data-screen]:not(.is-current):not(.is-leaving):not(.is-overlay),
.js .step:not(.is-current):not(.is-leaving):not(.is-overlay) { display: none; }
.is-overlay { position: fixed !important; inset: 0; z-index: 20; overflow: hidden; }
.is-leaving { pointer-events: none; }

/* Without JS: the surfaces stack into one colourful long page. */
.no-js .step [data-back], .no-js .intro [data-start] { display: none; }
.no-js .step:not(:last-child) [data-next] { display: none; }
.no-js .step__controls { position: static; }
.no-js .end { display: none; }

/* ---------- Intro ---------- */
.intro__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-4); align-content: start; flex: 1; padding-bottom: var(--space-7); }
.intro__inner > * { grid-column: 1 / 10; }
.intro__title { font-size: clamp(3.25rem, 1rem + 6.6vw, 7.75rem); line-height: 0.95; font-weight: 200; letter-spacing: -0.045em; text-wrap: balance; }
.intro__title .accent { font-weight: 700; }
.intro__lead { grid-column: 1 / 7; font-size: 1.25rem; line-height: 1.5; font-weight: 300; color: var(--muted); text-wrap: pretty; }
.intro__go { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.journey { grid-column: 1 / -1 !important; display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-5); border-top: 1px solid var(--line); }
.journey li { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 120px; padding: var(--space-2) var(--space-2) 0 0; font-size: var(--t-small); color: var(--muted); }
.journey__dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg); background: var(--dot); }
[data-dot-surface="blau"] { --dot: var(--blau); }
[data-dot-surface="gelb"] { --dot: var(--gelb); }
[data-dot-surface="creme"] { --dot: var(--creme); }
[data-dot-surface="nacht"] { --dot: var(--nacht); }
[data-dot-surface="rosa"] { --dot: var(--rosa); }

/* ---------- Step ---------- */
.step { gap: 0; }
.step__title { max-width: 15em; margin-bottom: var(--space-5); font-size: clamp(2.5rem, 1rem + 4.4vw, 5.25rem); line-height: 1.02; font-weight: 250; letter-spacing: -0.035em; text-wrap: balance; }
.step__title .accent { font-weight: 650; }
.step__no { display: block; margin-bottom: var(--space-3); color: var(--muted); }
.step__no .tnum { color: var(--fg); }
.step__body { display: grid; gap: var(--space-3); align-content: start; flex: 1; padding-bottom: var(--space-6); }
.step__hint { font-size: var(--t-small); color: var(--muted); max-width: 60ch; }

/* Tiles: big squares; number, a ring that fills (the Kreis), the word. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--n2, .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-height: var(--tile-h); padding: 18px 20px 20px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; user-select: none; transition: box-shadow var(--dur-fast-out) var(--ease-exit), background-color var(--dur-fast-out) var(--ease-exit), color var(--dur-fast-out) var(--ease-exit); }
.tile__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile__top { display: flex; justify-content: space-between; align-items: center; }
.tile__key { font-size: var(--t-label); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.tile__ring { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: box-shadow var(--dur-fast-out) var(--ease-exit); }
.tile__word { font-size: clamp(1.375rem, 0.9rem + 1vw, 2.125rem); line-height: 1.1; font-weight: 320; letter-spacing: -0.02em; text-wrap: balance; transition: font-weight var(--dur-fast-out) var(--ease-exit); }
.tile__hint { margin-top: -8px; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.tile:hover { box-shadow: inset 0 0 0 1.5px var(--fg); background: var(--tint); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-enter); }
.tile:hover .tile__word { font-weight: 560; transition: font-weight var(--dur-fast) var(--ease-enter); }
.tile:has(.tile__input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 4px; }
.tile:has(.tile__input:checked) { background: var(--next-bg); color: var(--next-fg); box-shadow: inset 0 0 0 1.5px var(--next-bg); --muted: color-mix(in oklab, var(--next-fg) 78%, var(--next-bg)); }
.tile:has(.tile__input:checked) .tile__word { font-weight: 700; }
.tile:has(.tile__input:checked) .tile__ring { box-shadow: inset 0 0 0 12px currentColor; transition: box-shadow var(--dur-fast) var(--ease-enter); }
.tile.is-off { opacity: 0.4; cursor: default; }
.tile.is-off:hover { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.tile.is-off .tile__word { font-weight: 320; }

.tiles--visual { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile--visual { min-height: 0; padding: 10px 10px 16px; gap: 12px; }
.tile__visual { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--tint); }
.tile--visual .tile__top { order: 2; }
.tile--visual .tile__word { order: 3; font-size: 1.375rem; }
.tile--visual .tile__hint { order: 4; margin-top: -4px; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.tiles__group { display: grid; gap: var(--space-2); }
.tiles__glabel { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.tile--small { min-height: calc(var(--tile-h) * 0.8); }

/* Fields as large as the tiles. */
.fields { display: grid; gap: var(--space-4) var(--gap); }
.fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields--url { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
.field--big .field__input { min-height: 76px; font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; border-bottom-width: 2px; }
.field--big .field__input::placeholder { font-style: italic; font-weight: 200; }
.tile--none { min-height: 96px; }
.tile--none .tile__word { font-size: 1.25rem; }

/* Controls stay at the bottom of each surface, in thumb reach. */
.step__controls { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: 0 calc(-1 * var(--margin)); padding: var(--space-3) var(--margin) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }

/* ---------- Bar: dots in the colour of their step ---------- */
.bar__count { min-width: 5.5em; text-align: right; }
.dots__dot { background: transparent; }
.dots__dot.is-done, .dots__dot.is-current { background: var(--dot); }
.dots__dot.is-current { transform: scale(1.4); }

/* ---------- End: Koralle, the core expands ---------- */
.end { padding-bottom: var(--space-8); }
.end__inner { display: grid; gap: var(--space-5); max-width: 1440px; }
.end__title { font-size: clamp(3.75rem, 1rem + 8vw, 9rem); line-height: 0.92; font-weight: 200; letter-spacing: -0.05em; }
.end__title [data-out] { font-weight: 800; font-style: italic; }
.end__lead { max-width: 30ch; font-size: clamp(1.375rem, 1rem + 1.1vw, 2.125rem); line-height: 1.25; font-weight: 300; text-wrap: balance; }
.end__lead strong { font-weight: 700; }
.end__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.end__next { grid-column: 1 / 8; display: grid; gap: var(--space-2); align-content: start; }
.end__side { grid-column: 9 / 13; display: grid; gap: var(--space-4); align-content: start; }
.next-list { display: grid; }
.next-list[hidden] { display: none; }
.next-list li { display: grid; grid-template-columns: 3em 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; line-height: 1.4; font-weight: 300; }
.next-list li strong { font-weight: 700; }
.next-list .tnum { font-size: var(--t-label); padding-top: 6px; }
.end__sheet { display: grid; gap: var(--space-2); }
.end__sheet dt { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.end__sheet dd { font-size: var(--t-small); }
.end__direct { font-size: var(--t-small); }
.end__direct a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 32px; align-items: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .tiles, .tiles--n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--visual { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intro__inner > *, .intro__lead { grid-column: 1 / -1; }
  .end__next, .end__side { grid-column: 1 / -1; }
}

/* ---------- Phone: own composition ---------- */
@media (max-width: 720px) {
  .m2 { --tile-h: 92px; }
  .intro, .step, .end { padding-top: calc(var(--bar-h) + var(--space-4)); }
  .intro__title { font-size: clamp(2.9rem, 1rem + 9.5vw, 3.75rem); }
  .intro__lead { font-size: 1.0625rem; }
  .intro__go .button { width: 100%; }
  .journey { margin-top: var(--space-3); }
  .journey li { flex: 1 1 40%; min-width: 0; }
  .step__title { font-size: clamp(2rem, 1rem + 5vw, 2.6rem); margin-bottom: var(--space-4); }
  .step__no { margin-bottom: var(--space-2); }
  .tiles, .tiles--n5, .tiles--n6 { grid-template-columns: 1fr; gap: 8px; }
  .tiles--n7 { grid-template-columns: 1fr 1fr; }
  .tile { min-height: var(--tile-h); padding: 14px 16px; gap: 6px; }
  .tiles--n7 .tile, .tiles--2 .tile { min-height: 88px; }
  .tile__word { font-size: 1.25rem; }
  .tile__hint { margin-top: -4px; font-size: var(--t-label); }
  .tiles--visual { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile--visual .tile__word { font-size: 1.0625rem; }
  .tile--visual .tile__hint { display: none; }
  .pair { grid-template-columns: 1fr; gap: var(--space-4); }
  .fields--two, .fields--three, .fields--url { grid-template-columns: 1fr; }
  .field--big .field__input { font-size: 1.625rem; min-height: 60px; }
  .step__controls .back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .step__controls .back { min-width: 48px; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
  .step__controls .button { flex: 1; max-width: 70%; }
  .dots { gap: 7px; }
  .dots__dot { width: 8px; height: 8px; }
  .end__title { font-size: 3.6rem; }
  .next-list li { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile__word, .tile__ring { transition: none; }
}

/* Release: intro visible before the engine runs, so nothing shifts on load. */
html.js:not([data-screen]) section.intro[data-screen="intro"]:not(.is-current) { display: flex; }