/* „Was nach ./ratings.sh all auf deinem Rechner liegt“: die drei Bilder (Bericht, Zusammenfassung, Übersicht) als gezeichnete,
   animierte Nachbauten (js/results.js). Maße folgen den Originalbildern: 1 em = 10 Bildpixel, skaliert über die Breite des Rahmens.
   Bewusst immer hell, wie die Bildschirmfotos zuvor. */
.win .re { container-type: inline-size; position: relative; overflow: hidden; background: #f6f7fb; color: #14143a; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; cursor: zoom-in; }
.win .re * { box-sizing: border-box; }
.win .re-a { aspect-ratio: 16 / 10; } .win .re-a.open { aspect-ratio: 1800 / 1581; }
.win.tall .re-b { aspect-ratio: 4 / 3; } .win.tall .re-b.open { aspect-ratio: 1520 / 2400; }
.win .re-c { aspect-ratio: 1800 / 1107; cursor: default; }
.win .re.open { cursor: zoom-out; }
.re-in { font-size: calc(100cqw / 180); line-height: 1.25; font-variant-numeric: tabular-nums; }
.re-b .re-in { font-size: calc(100cqw / 152); }
.re-hint { position: absolute; right: 1em; top: 1em; z-index: 2; padding: .35em .9em; border-radius: 99em; background: rgba(20, 20, 58, .82); color: #fff;
  font: 600 clamp(11px, 1.35cqw, 15px)/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; pointer-events: none; transition: opacity .3s; }
.re.open .re-hint { opacity: .75; }
.re-card { background: #fff; border: .1em solid #e6e8f1; border-radius: 3.2em; box-shadow: 0 1em 3em rgba(40, 50, 90, .1); }
.re h1, .re h2, .re h3, .re p { margin: 0; max-width: none; font-family: inherit; }
/* Einblenden: alles mit .fx startet unsichtbar und läuft nacheinander (--i), sobald der Rahmen im Bild ist (.play) */
.re .fx { opacity: 0; transform: translateY(1em); }
.re.play .fx { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 55ms); }
.re .hl { background: #eef0fb; transition: background .4s; }

/* --- A: Bericht mit Filter und Store-Kennzahlen --- */
.re-a .re-in { padding: .2em 7.8em 0 7.8em; }
.re-a .c1 { padding: 2.6em 2.8em 2.8em; }
.re-a .c1 h2 { font-size: 2.2em; font-weight: 800; letter-spacing: -.02em; color: #14143a; }
.re-a .sb { font-size: 1.7em; color: #5b6079; margin-top: .45em; }
.re-a .tri { position: absolute; right: 3.2em; top: 3.4em; font-size: 1.1em; color: #5b6079; }
.re-a .c1 { position: relative; }
.re-a .gd { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.1em 1.7em; margin-top: 2.6em; }
.re-a .fl { font-size: 1.45em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #4a4f6a; margin-bottom: .55em; white-space: nowrap; }
.re-a .ctl { height: 2.6em; border: .075em solid #d3d7e5; border-radius: .75em; display: flex; align-items: center; justify-content: space-between;
  padding: 0 .7em 0 1.05em; font-size: 2em; color: #1a1a3a; background: #fff; white-space: nowrap; overflow: hidden; }
.re-a .ctl.ph { color: #6a6f88; }
.re-a .ctl svg { width: .55em; height: .55em; flex: none; stroke: #14143a; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.re-a .ctl.date svg { width: .72em; height: .72em; }
.re-a .chk { width: 2.8em; height: 2.8em; border: .15em solid #9096ad; border-radius: .6em; background: #fff; margin-top: .75em; }
.re-a .reset { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.95em; height: 2.5em; padding: 0 1.15em; border: .077em solid #d3d7e5;
  border-radius: 99em; font-size: 1.95em; font-weight: 600; color: #14143a; background: #fff; }
.re-a .c2 { margin-top: 3.2em; padding: 2.7em 2.8em 2.6em; }
.re-a .c2 h2 { font-size: 2.3em; font-weight: 800; letter-spacing: -.02em; }
.re-a .tbl { margin-top: 2.2em; border: .1em solid #e1e4ee; border-radius: 2.4em; overflow: hidden; }
.re-a .tr { display: grid; grid-template-columns: 31.6em 14em 32.5em 41.8em 1fr; align-items: center; padding: 0 1.7em; }
.re-a .th { height: 5em; } .re-a .th > * { font-size: 1.5em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a4f6a; }
.re-a .tb { height: 5.45em; border-top: .1em solid #e8eaf2; } .re-a .tb > * { font-size: 1.95em; }
.re-a .tb b { font-weight: 800; letter-spacing: -.01em; }
.re-a .st { display: inline-flex; align-items: center; gap: .55em; }
.re-a .stars { position: relative; display: inline-block; font-size: 1.05em; line-height: 1; white-space: nowrap; letter-spacing: 0; color: #d6d9e4; }
.re-a .stars .f { position: absolute; left: 0; top: 0; overflow: hidden; width: 0; color: #f5a623; white-space: nowrap; }
.re-a.play .stars .f { width: var(--w); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 55ms + .35s); }
.re-a .note { font-size: 1.7em; color: #5b6079; margin-top: .9em; }

/* --- B: Markdown-Zusammenfassung --- */
.re-b .re-in { padding-top: 5.5em; }
.re-b .md { margin-left: 0; padding: 7em 6.2em 8em 6.4em; border: .1em solid #e1e4ee; border-radius: 3.6em 3.6em 0 0; background: #fff; min-height: 100em; }
.re-b h1 { font-size: 6.2em; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.re-b .meta { font-size: 2.9em; margin-top: 1.55em; }
.re-b .meta b { font-weight: 800; }
.re-b h2 { font-size: 4.4em; font-weight: 800; letter-spacing: -.025em; margin-top: 1.55em; padding-bottom: .42em; border-bottom: .1em solid #e1e4ee; }
.re-b .t1, .re-b .t2, .re-b .t3 { margin-top: 3.9em; }
.re-b .rw { display: grid; align-items: center; height: 8.5em; border-bottom: .1em solid #dde0ea; padding: 0 2.1em; }
.re-b .rw > * { font-size: 2.9em; }
.re-b .rw.h { height: 7.4em; } .re-b .rw.h > * { font-size: 2.5em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #5a5f86; }
.re-b .t1 { width: 128.5em; } .re-b .t1 .rw { grid-template-columns: 1fr 29.6em 38.1em; }
.re-b .t2 { width: 100em; } .re-b .t2 .rw { grid-template-columns: 15.6em 15.7em 1fr; }
.re-b .t3 { width: 112.4em; } .re-b .t3 .rw { grid-template-columns: 1fr 29.6em 38.1em; }
.re-b .n { text-align: right; } .re-b .rw > span:first-child { white-space: nowrap; }
.re-b .pp { font-size: 2.9em; line-height: 1.75; margin-top: .85em; }
.re-b .pp b { font-weight: 800; }
.re-b .bar { height: 1.31em; background: #14143a; transform-origin: left; width: 22.07em; margin-left: .86em; transform: scaleX(0); }
.re-b.play .bar { transform: none; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); transition-delay: 1.2s; }

/* --- C: Übersicht --- */
.re-c .re-in { padding: 4.5em 0 0 26.5em; }
.re-c .card { width: 127.1em; padding: 5.3em 5.3em 0; border: .1em solid #e1e4ee; border-radius: 3.6em 3.6em 0 0; background: #fff; height: 120em; }
.re-c h1 { font-size: 4.6em; font-weight: 800; letter-spacing: -.025em; }
.re-c .meta { font-size: 2.3em; margin-top: 1.1em; } .re-c .meta b { font-weight: 800; }
.re-c .gd { display: grid; margin-top: 3em; }
.re-c .gr { display: grid; grid-template-columns: 13.5em 17em 15.7em 11em 11.6em 14em 17.2em 16.4em; border-bottom: .1em solid #e0e3ee; }
.re-c .gr > div { padding: 1.15em 1.6em; display: flex; align-items: center; font-size: 2.15em; line-height: 1.65; overflow-wrap: break-word; min-width: 0; }
.re-c .gr.h > div { font-size: 1.5em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a4f6a; line-height: 1.55; padding: 1.2em 1.6em 1.2em; }
.re-c .gr .r { justify-content: flex-end; text-align: right; }
.re-c .gr a { color: #4a3fe0; text-decoration: underline; text-underline-offset: .12em; }
.re-c .gr.h { border-bottom-width: .1em; }

@media (prefers-reduced-motion: reduce) { .re .fx, .re.play .fx { opacity: 1; transform: none; transition: none; } .re-a .stars .f { width: var(--w); transition: none; } .re-b .bar { transform: none; transition: none; } }