/* Reading activities of M2 (plan §6.1): A7 Silben-Schwingen (mockup 12). Sizes follow the 1180 × 820 mockup frame:
   the word in 150 px reading font, each arc a button of at least 150 × 108 px. */

/* ---- A7: the word on its label, one arc per syllable, the picture face down ---- */
.a7 { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: start; width: 100%; height: 100%;
  gap: calc(3 * var(--u)); }
.a7 .label.sw { display: flex; align-items: flex-start; gap: 6px; padding: calc(2.6 * var(--u)) calc(6 * var(--u)) calc(2.2 * var(--u));
  border-radius: 18px 28px 20px 30px / 28px 18px 30px 20px; background: linear-gradient(175deg, var(--white), var(--card));
  box-shadow: var(--shadow-float); transform: rotate(-1.3deg); }
.a7 .sy { --arc-c: var(--ink); display: flex; flex-direction: column; align-items: center; position: relative; }
.a7 .colours .sy.s-b { --arc-c: var(--syl-blue); } .a7 .colours .sy.s-r { --arc-c: var(--syl-red); }
.a7 .sy-t { font: 700 min(15 * var(--u), 150px) / 1.02 var(--font-read); letter-spacing: .01em; padding: 0 3px;
  border-radius: 40px; color: var(--ink); transition: text-shadow 300ms; }
.a7 .colours .sy-t { color: var(--arc-c); }
.a7 .sy.done .sy-t, .a7 .sy.sounding .sy-t, .a7 .label.sounding .sy-t { text-shadow: 0 0 24px var(--glow), 0 0 6px var(--glow); }
.a7 .sy.now .sy-t { background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--sun-light) 80%, transparent) 0 62%, transparent 100%); }

.a7 .arc { position: relative; display: block; width: 100%; min-width: max(150px, 15 * var(--u)); height: max(108px, 10.8 * var(--u));
  margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
.a7 .arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.a7 .arc path { fill: none; stroke-linecap: round; opacity: 0; transition: opacity 300ms; }
.a7 .arc .glow { stroke: var(--glow); stroke-width: 30; }
.a7 .arc .line { stroke: var(--arc-c); stroke-width: 12; }
.a7 .arc .halo { stroke: var(--sun-light); stroke-width: 34; }
.a7 .arc .guide { stroke: var(--arc-c); stroke-width: 9; stroke-dasharray: .1 6; }
.a7 .arc .ink { stroke: var(--arc-c); stroke-width: 12; stroke-dasharray: 0 100; }
.a7 .sy.done .arc .glow, .a7 .sy.done .arc .line { opacity: 1; }
.a7 .sy.done .arc .glow { opacity: .55; }
.a7 .sy.now .arc { animation: breathe 2.6s ease-in-out infinite; }
.a7 .sy.now .arc .halo { opacity: .85; }
.a7 .sy.now .arc .guide { opacity: .5; }
.a7 .sy.now .arc.painting .ink { opacity: 1; }
.a7 .sy.wait .arc .guide { stroke: var(--ink-soft); stroke-width: 8; opacity: .38; }
.a7 .sy.sounding .arc .glow, .a7 .label.sounding .arc .glow { opacity: .9; }
.a7 .sy.pulse .arc { animation: breathe 1.3s ease-in-out infinite; }
.a7 .sy.shimmer .arc .halo { animation: arc-shimmer 1.2s ease-in-out 2; }
@keyframes arc-shimmer { 50% { stroke: var(--glow); opacity: 1; } }

/* the demo hand traces the current arc (first round of the first time, help level 2) */
.a7 .trace { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; transform: translate(50%, 87%); }
.a7 .sy.tracing .trace { display: block; animation: trace 4s ease-in-out infinite; }
.a7 .sy.tracing .arc .ink { opacity: 1; animation: ink 4s ease-in-out infinite; stroke-dasharray: 100; }
.a7 .trace .hand { position: absolute; left: -46px; top: -5px; width: 124px; height: 160px; opacity: .75; }
.a7 .trace .hand img { width: 100%; height: 100%; }
@keyframes trace { 0% { transform: translate(6%, 10%); opacity: 0; } 8% { opacity: 1; } 30% { transform: translate(23%, 68%); }
  50% { transform: translate(50%, 87%); } 70% { transform: translate(77%, 68%); } 88% { transform: translate(94%, 10%); opacity: 1; }
  100% { transform: translate(94%, 10%); opacity: 0; } }
@keyframes ink { 0%, 4% { stroke-dashoffset: 100; } 88%, 100% { stroke-dashoffset: 0; } }

/* the picture: face down until the word is swung (reveal), or three cards that open for the choice (pick) */
.a7 .pics { justify-self: end; align-self: end; display: flex; gap: calc(3.5 * var(--u)); margin-right: calc(4 * var(--u)); }
.a7 .pics.pick { justify-self: center; margin-right: 0; }
.a7 .pics .card { width: min(22 * var(--u), 236px); aspect-ratio: 236 / 248; --card-size: min(22 * var(--u), 236px); }
.a7 .pics.pick .card { width: min(20 * var(--u), 220px); --card-size: min(20 * var(--u), 220px); }
.a7 .card.wait { cursor: default; background: linear-gradient(170deg, var(--sun-light), var(--card)); opacity: .92; }
.a7 .card.wait::after { content: ""; position: absolute; inset: 26px; border-radius: inherit;
  border: 3px dashed color-mix(in srgb, var(--sun-deep) 45%, transparent); }
.a7 .card.wait .paw { width: 38%; opacity: .5; }
.a7 .card.flip-in { animation: flip-in 450ms ease-out both; cursor: default; }
@keyframes flip-in { 0% { transform: rotateY(90deg); } 100% { transform: translateY(-14px) scale(1.06); } }

@media (orientation: portrait) {
  .a7 { padding-top: calc(3 * var(--u)); } /* the label's tape stays clear of the leaves */
  .a7 .sy-t { font-size: min(16vw, 150px); }
  .a7 .pics { justify-self: center; margin-right: 0; }
  .a7 .pics.pick .card { width: min(26vw, 220px); }
}

/* ---- A8 Wörter bauen (mockup 13): a fixed 1180 × 820 scene scaled to fit (1cqw = 11.8 mockup px) ---- */
.build-stage { position: relative; width: min(100%, calc((100vh - 15 * var(--u)) * 1180 / 820)); aspect-ratio: 1180 / 820;
  container-type: inline-size; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, var(--wall), var(--paper) 70%); }
.build-stage .shelf { position: absolute; left: 42.2%; top: 49.3%; width: 51.9%; height: 4.9%; border-radius: 4px;
  background: var(--bark); box-shadow: inset 0 1cqw 0 color-mix(in srgb, var(--bark) 55%, var(--path-light)), var(--shadow-lift); }
.build-stage .table { position: absolute; inset: 72.5% 0 0; border-top: .7cqw solid color-mix(in srgb, var(--bark) 30%, var(--path-light));
  background: color-mix(in srgb, var(--bark) 52%, var(--path)); }
.build-pic { position: absolute; left: 7.1%; top: 15.4%; width: 25.4cqw; height: 26.8cqw; --card-size: 25.4cqw; }
.build-pic.correct { transform: scale(1.05) rotate(-1.2deg); }

.pocket { position: absolute; left: var(--px); top: 29%; width: 18.1cqw; height: 13.9cqw; transform: translateX(-50%);
  padding: 0; border: 0; cursor: pointer; border-radius: var(--r-chip);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-deep) 85%, var(--paper-edge)), var(--paper-deep));
  box-shadow: inset 0 10px 18px -8px rgba(var(--shade-rgb), .45), inset 0 -2px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(255, 255, 255, .6); }
.build-stage[data-n="3"] .pocket { width: 15.6cqw; }
.pocket::before { content: ""; position: absolute; inset: 10px; border-radius: inherit; border: 4px dashed var(--paper-edge); }
.pocket svg { position: absolute; left: 18%; bottom: 1.7cqw; width: 64%; height: 2.5cqw; overflow: visible; }
.pocket path { fill: none; stroke: var(--ink-soft); stroke-width: 6; stroke-linecap: round; opacity: .45; transition: opacity 300ms; }
.build-stage.colours .pocket.s-b path { stroke: var(--syl-blue); } .build-stage.colours .pocket.s-r path { stroke: var(--syl-red); }
.pocket.target { animation: breathe 2.6s ease-in-out infinite;
  box-shadow: inset 0 10px 18px -8px rgba(var(--shade-rgb), .45), 0 0 0 6px var(--glow), 0 0 44px 10px color-mix(in srgb, var(--sun-light) 80%, transparent); }
.pocket.target::before { border-color: var(--sun-deep); }
.build-stage.built .pocket path, .pocket.sounding path { opacity: 1; }

.build-stage .tile { position: absolute; z-index: 7; left: var(--x); top: 78%; width: 15.6cqw; height: 11.2cqw; padding: 0 0 1.5cqw;
  border: 0; cursor: pointer; display: grid; place-items: center; border-radius: var(--r-chip); touch-action: none;
  transform: translateX(-50%) rotate(var(--tilt)); transition: left 300ms var(--ease-pop), top 300ms var(--ease-pop), transform 200ms;
  background: linear-gradient(170deg, var(--white), var(--card) 60%, var(--paper));
  box-shadow: var(--shadow-lift), inset 0 -3px 0 rgba(var(--shade-rgb), .08);
  font: 700 7.5cqw / 1.1 var(--font-read); color: var(--ink); }
.build-stage.colours .tile .s-b { color: var(--syl-blue); } .build-stage.colours .tile .s-r { color: var(--syl-red); }
.build-stage .tile.in-pocket { left: var(--px); top: calc(29% + 1.35cqw); transform: translateX(-50%); cursor: pointer; }
.build-stage .tile.lifted, .build-stage .tile.dragging { z-index: 20; transform: translateX(-50%) scale(1.08) rotate(-3deg);
  box-shadow: 0 0 0 6px var(--glow), var(--shadow-float); }
.build-stage .tile.dragging { transition: none; cursor: grabbing; }
.build-stage .tile.nope { animation: wobble .6s ease-in-out; box-shadow: 0 0 0 6px var(--amber), var(--shadow-lift); }
.build-stage .tile.disabled { opacity: .28; pointer-events: none; }
.build-stage .tile.glow { animation: glow 1.4s ease-in-out infinite; }

/* the demo hand drags the right tile up to the glowing pocket (first round of the first time, help level 2) */
.drag-demo { position: absolute; z-index: 15; display: none; left: var(--from); top: 78%; width: 15.6cqw; height: 11.2cqw;
  transform: translateX(-50%); pointer-events: none; }
.drag-demo.on { display: block; animation: drag-demo 4.2s ease-in-out infinite; }
.drag-demo .tile { position: absolute; inset: 0; left: 50%; top: 0; transform: translateX(-50%) scale(1.08) rotate(-3deg); opacity: .85;
  box-shadow: 0 0 0 6px var(--glow), var(--shadow-float); }
.drag-demo .hand { position: absolute; left: 6.6cqw; top: 6.8cqw; width: 10.5cqw; opacity: .75; }
.drag-demo .hand img { width: 100%; }
@keyframes drag-demo { 0%, 10% { left: var(--from); top: 78%; opacity: 0; } 16% { opacity: 1; }
  60%, 72% { left: var(--to); top: calc(29% + 1.35cqw); opacity: 1; } 82%, 100% { left: var(--to); top: calc(29% + 1.35cqw); opacity: 0; } }

/* ---- A9 Satz und Bild: the A5 layout with a sentence on the label (≥ 44 px reading font, plan §11) ---- */
.choice.a9 .ask .label { max-width: 92%; }
.choice.a9 .ask .word { font-size: inherit; }
.sentence { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .3em; row-gap: .15em;
  font-size: min(7.2 * var(--u), 72px); }
.sentence .word { font-size: inherit; }
.sentence .punct { margin-left: -.26em; font: 700 1em / 1.1 var(--font-read); color: var(--ink); }

/* ---- A10 Geschichte (mockup 14): the open book, 1132 × 652 in the mockup (1cqw = 11.32 px) ---- */
.story-stage { position: relative; width: min(100%, calc((100vh - 15 * var(--u)) * 1132 / 652)); aspect-ratio: 1132 / 652;
  container-type: inline-size; }
.story-stage.quiz { aspect-ratio: auto; container-type: normal; }
.sbook { position: absolute; inset: 0; border-radius: 26px 30px 28px 24px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px), var(--petrol);
  box-shadow: 0 36px 60px -26px rgba(var(--shade-rgb), .7), inset 0 0 0 3px rgba(255, 255, 255, .08); }
.sbook .page { position: absolute; top: 1.4cqw; bottom: 1.9cqw; width: calc(50% - 1.6cqw); }
.sbook .page.l { left: 1.6cqw; border-radius: 16px 4px 4px 18px;
  background: linear-gradient(90deg, var(--paper) 0, var(--paper) 80%, var(--paper-deep) 100%);
  box-shadow: inset -16px 0 30px -14px rgba(var(--shade-rgb), .55), -3px 3px 0 var(--paper-deep), -6px 6px 0 var(--paper), -8px 8px 0 var(--paper-edge); }
.sbook .page.r { right: 1.6cqw; border-radius: 4px 16px 18px 4px;
  background: linear-gradient(270deg, var(--paper) 0, var(--paper) 80%, var(--paper-deep) 100%);
  box-shadow: inset 16px 0 30px -14px rgba(var(--shade-rgb), .55), 3px 3px 0 var(--paper-deep), 6px 6px 0 var(--paper), 8px 8px 0 var(--paper-edge); }
.sbook.turned .page { animation: page-in 450ms ease-out both; }
.sbook .page.r { touch-action: pan-y; } /* a leftward swipe turns the page; the browser keeps only vertical panning */
@keyframes page-in { from { opacity: .2; transform: perspective(1400px) rotateY(-14deg); } }
.plate { position: absolute; inset: 1.9cqw 2.1cqw 2.3cqw 1.9cqw; border-radius: 16px 12px 14px 18px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--shade-rgb), .12); display: grid; place-items: center; background: var(--sky-light); }
.plate > div, .plate .pic { width: 100%; height: 100%; }
.plate .pic { object-fit: cover; }
.plate .emoji { font-size: 14cqw; }
.txt { position: absolute; left: 2.3cqw; right: 1.9cqw; top: 3.2cqw; bottom: 10.4cqw; display: flex; flex-direction: column;
  justify-content: center; gap: 3cqw; }
.sent { display: flex; align-items: flex-start; gap: 1.2cqw; position: relative; isolation: isolate; }
.sent .spk { position: relative; flex: none; width: max(60px, 5.3cqw); height: max(60px, 5.3cqw); margin-top: .5cqw; border: 0;
  cursor: pointer; border-radius: var(--r-blob); display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, var(--sky-light), var(--sky) 40%, var(--lake));
  box-shadow: var(--shadow-lift), inset 0 -8px 14px rgba(var(--shade-rgb), .15); }
.sent .spk::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; } /* 88 px hit area */
.sent .spk img { width: 54%; }
.sent .st { margin: 0; padding: 0 .2em; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 clamp(44px, 3.9cqw, 52px) / 1.55 var(--font-read); color: var(--ink); letter-spacing: .01em; }
.sent .st .sentence { font-size: inherit; justify-content: flex-start; }
.sent .st .syl::after { bottom: -.12em; height: .26em; border-width: 3px; left: 7%; right: 7%; }
.sent.now::before { content: ""; position: absolute; left: calc(max(60px, 5.3cqw) + 1.2cqw - 4px); right: -10px; top: -2px; bottom: -4px;
  z-index: -1; border-radius: var(--r-chip); transform: rotate(-.6deg);
  background: color-mix(in srgb, var(--sun-light) 50%, var(--white));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 55%, transparent), 0 0 30px 6px color-mix(in srgb, var(--sun-light) 70%, transparent); }
.sent.now:has(.face)::before { left: calc(4cqw + max(60px, 5.3cqw) + 2.4cqw - 4px); } /* "Gemeinsam lesen": after the face */
.sent.now .spk::after, .sent.sounding .spk::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; z-index: -1;
  border: 4px solid color-mix(in srgb, var(--sky) 80%, transparent); animation: ring 2.4s ease-out infinite; }
.sent.hint .spk { animation: breathe 1.3s ease-in-out infinite; }
.sent .face { flex: none; width: 4cqw; height: 4cqw; margin-top: 1cqw; color: var(--ink-soft); }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.sbook .turn { position: absolute; right: 0; bottom: 0; width: 11cqw; height: 11cqw; padding: 0; border: 0; background: none;
  cursor: default; opacity: .5; }
.sbook .turn svg { width: 100%; height: 100%; overflow: visible; }
.sbook .turn .flap { fill: var(--paper-deep); stroke: var(--paper-edge); stroke-width: 2; transform-box: fill-box; transform-origin: 100% 100%;
  filter: drop-shadow(-4px -4px 6px rgba(var(--shade-rgb), .25)); }
.sbook .turn.ready { cursor: pointer; opacity: 1; }
.sbook .turn.ready .flap { animation: peel 2.6s ease-in-out infinite; fill: var(--sun-light); }
@keyframes peel { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (orientation: portrait) {
  .story-stage { aspect-ratio: 652 / 1060; width: min(100%, calc((100vh - 15 * var(--u)) * 652 / 1060)); }
  .sbook .page { width: auto; left: 2cqw; right: 2cqw; }
  .sbook .page.l { top: 2cqw; bottom: 54%; }
  .sbook .page.r { top: 47%; bottom: 2cqw; }
  .sent .st { font-size: clamp(44px, 7.4cqw, 56px); } /* reading text ≥ 44 px on the iPad (plan §11) */
  .txt { top: 3cqw; bottom: 16cqw; }
  .sbook .turn { width: 16cqw; height: 16cqw; }
}