/* Abstimmung Tankkarten-Anzeigen – Pro-Wash-CI (app/DESIGN.md, pro-wash.net):
   Navy als flache, kantige Fläche, Gelb nur als Marker/Preis/Auswahl, Bubbles
   als Hintergrund, schwere kursive Versalien nur für wenige Titel. */

@font-face { font-family: ProWashHeading; src: url(/assets/fonts/heading.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: ProWashPrice; src: url(/assets/fonts/impact.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: DinCondensed; src: url(/assets/fonts/din-condensed.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Din; src: url(/assets/fonts/din-light.woff2) format("woff2"); font-display: swap; }

:root {
  --navy: #162983;
  --navy-deep: #101e5e;
  --navy-bright: #3d4fb5;
  --yellow: #ffec00;
  --sky: #afdff5;
  --sky-soft: #e6f3fb;
  --bg: #f3f6fa;
  --paper: #ffffff;
  --ink: #141a3d;
  --muted: #5a6390;
  --line: rgb(22 41 131 / 0.12);
  --line-strong: rgb(22 41 131 / 0.22);
  --r: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --top: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 72px); scroll-padding-bottom: 96px; }
body {
  margin: 0;
  font: 16px/1.5 var(--ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--yellow); color: var(--navy); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Typo-Bausteine ----------------------------------------------------- */
.eyebrow {
  margin: 0;
  font: 400 17px/1 DinCondensed, var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.title {
  margin: 0;
  font: 400 clamp(38px, 5.4vw, 74px) / 1 ProWashHeading, "Arial Black", var(--ui);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--navy);
}
/* gelber Marker wie in den Anzeigen: wischt einmal von links auf. Die Versalien haben
   keine Unterlängen; Zeilenhöhe = Versalhöhe und mehr Abstand oben setzen den Text
   senkrecht mittig in den Kasten; oben bleibt Platz für Umlautpunkte. */
.marker { position: relative; display: inline-block; line-height: 0.74; padding: 0.36em 0.34em 0.07em 0.22em; color: var(--navy); z-index: 0; }
/* wo unterstützt, exakt auf Versalhöhe und Grundlinie zuschneiden (unabhängig von Systemmetriken) */
@supports (text-box: trim-both cap alphabetic) {
  .marker { line-height: 1; text-box: trim-both cap alphabetic; padding-top: 0.23em; padding-bottom: 0.23em; }
}
.marker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  transform: skewX(-8deg);
  transform-origin: left center;
  animation: marker-in 700ms 120ms var(--ease) both;
}
@keyframes marker-in { from { transform: skewX(-8deg) scaleX(0); } }
.muted { color: var(--muted); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px 0 22px;
  border: 0;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  font: 400 21px/1 DinCondensed, var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms var(--ease), background 200ms, box-shadow 200ms;
  white-space: nowrap;
}
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: scale(0.97); }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { background: #f5e000; }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-ghost:hover { background: rgb(22 41 131 / 0.06); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 18px; }

/* --- Kopfzeile ---------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--top);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(14px, 3vw, 32px);
  background: var(--navy);
  color: #fff;
  view-transition-name: topbar;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.topbar .brand img { width: 104px; }
.topbar .brand span { font: 400 17px/1 DinCondensed, var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.topbar nav { display: flex; gap: 4px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.topbar nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font: 400 20px/1 DinCondensed, var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.78);
  white-space: nowrap;
  transition: color 160ms;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a[aria-current="page"] { color: #fff; }
.topbar nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 4px;
  background: var(--yellow);
  view-transition-name: nav-indicator;
}
.topbar .me { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.topbar .me-name { font-size: 14px; color: rgb(255 255 255 / 0.85); }
.topbar .logout {
  border: 0;
  background: transparent;
  color: var(--sky);
  font: 400 17px/1 DinCondensed, var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 4px;
}
.topbar .logout:hover { color: #fff; }

@media (max-width: 820px) {
  .topbar { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .topbar .brand span, .topbar .me-name { display: none; }
  .topbar nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; height: 46px; padding: 0 4px; }
  .topbar nav a { font-size: 18px; padding: 0 10px; }
  .topbar nav a[aria-current="page"]::after { left: 10px; right: 10px; }
  :root { --top: 104px; }
}

/* --- Personen ----------------------------------------------------------- */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font: 400 16px/1 DinCondensed, var(--ui);
  letter-spacing: 0.04em;
  flex: none;
  background: var(--sky);
  color: var(--navy);
}
.avatar.p-luca { background: var(--yellow); }
.avatar.p-ralph { background: var(--navy); color: #fff; box-shadow: 0 0 0 2px #fff; }
.avatar.p-karsten { background: var(--sky); }
.topbar .avatar.p-ralph { box-shadow: 0 0 0 2px var(--sky); }

/* --- Seitenrahmen ------------------------------------------------------- */
.page { width: min(1280px, 100% - clamp(28px, 6vw, 80px)); margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 96px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.page-head .lead { margin: 14px 0 0; max-width: 60ch; color: var(--muted); }

/* gestaffeltes Einblenden */
.reveal { animation: reveal 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } }

/* --- Toast -------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translate(-50%, 200%);
  visibility: hidden;
  padding: 12px 18px;
  border-radius: var(--r);
  background: var(--navy-deep);
  color: #fff;
  font-size: 15px;
  transition: transform 320ms var(--ease);
  pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); visibility: visible; }

/* --- Login -------------------------------------------------------------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-art {
  position: relative;
  overflow: hidden;
  background: #eaf4fb url(/assets/bubbles.webp) center / cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 64px);
}
.login-art img.logo { width: clamp(150px, 16vw, 230px); }
.login-art .title { font-size: clamp(44px, 6.4vw, 104px); }
.login-art .title .marker { margin-top: 0.12em; }
.login-art .eyebrow { color: var(--navy); margin-bottom: 18px; }
.login-art > div:not(.login-cards) { position: relative; z-index: 1; }
.login-cards { position: absolute; right: 2%; top: 20%; width: 48%; aspect-ratio: 16 / 11; pointer-events: none; }
.login-cards img { position: absolute; width: 100%; filter: drop-shadow(0 18px 24px rgb(16 30 94 / 0.25)); animation: card-float 7s ease-in-out infinite; }
.login-cards img:nth-child(1) { transform: translate(-26%, -8%) rotate(-12deg); animation-delay: -2s; }
.login-cards img:nth-child(2) { transform: translate(6%, 8%) rotate(5deg); animation-delay: -4s; }
.login-cards img:nth-child(3) { transform: translate(-10%, 30%) rotate(-3deg); }
@keyframes card-float { 50% { translate: 0 -10px; } }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px clamp(24px, 5vw, 72px); background: var(--paper); }
.login-form form { width: min(380px, 100%); }
.login-form h2 { margin: 0 0 6px; font: 400 40px/1 ProWashHeading, var(--ui); font-style: italic; text-transform: uppercase; color: var(--navy); }
.login-form p { margin: 0 0 28px; color: var(--muted); }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; margin-bottom: 6px; font: 400 17px/1 DinCondensed, var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.field input, .field textarea {
  width: 100%;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: #fff;
  padding: 12px 14px;
  font: 16px/1.4 var(--ui);
  color: var(--ink);
  transition: border-color 160ms, box-shadow 160ms;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(22 41 131 / 0.12); }
.login-form .btn { width: 100%; margin-top: 8px; }
.form-error { min-height: 24px; margin: 10px 0 0; color: #b4232c; font-size: 15px; }
.shake { animation: shake 360ms var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-art { min-height: 46dvh; }
  .login-art { min-height: auto; gap: 18px; }
  .login-art img.logo { width: 150px; }
  .login-cards { order: 1; position: relative; right: auto; top: auto; align-self: flex-end; width: 70%; margin: -36px -4% 26% 0; }
  .login-art > div:not(.login-cards) { order: 2; }
}

/* --- Abstimmen ---------------------------------------------------------- */
.steps {
  position: sticky;
  top: var(--top);
  z-index: 40;
  background: rgb(243 246 250 / 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.steps-inner { display: flex; align-items: center; gap: 18px; width: min(1280px, 100% - clamp(28px, 6vw, 80px)); margin: 0 auto; padding: 10px 0; }
.steps ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; flex: 1; }
.steps li { flex-shrink: 0; }
.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  text-align: left;
  transition: background 160ms;
  white-space: nowrap;
}
.step:hover { background: rgb(22 41 131 / 0.06); }
.step img { width: 34px; height: 42px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.step b { display: block; font: 400 17px/1 DinCondensed, var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.step .pips { display: flex; gap: 4px; margin-top: 5px; }
.step .pip { width: 16px; height: 4px; border-radius: 2px; background: var(--line-strong); transition: background 240ms; }
.step .pip.on { background: var(--navy); }
.step[aria-current="step"] { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 1px 0 var(--line); }
.step[aria-current="step"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -11px; height: 3px; background: var(--yellow); }
.progress { flex: none; display: flex; align-items: center; gap: 10px; font: 400 18px/1 DinCondensed, var(--ui); letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; }
.progress-bar { width: 120px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--navy); transform-origin: left; transition: transform 500ms var(--ease); }
@media (max-width: 820px) {
  .progress-bar { display: none; }
  .steps-inner { gap: 10px; padding: 8px 0; }
  .steps ol { gap: 4px; }
  .step { padding: 4px; flex-direction: column; gap: 4px; }
  .step img { width: 30px; height: 37px; }
  .step b { display: none; }
  .step .pips { margin-top: 0; gap: 3px; }
  .step .pip { width: 12px; }
  .step[aria-current="step"]::after { bottom: -9px; }
}

.page.wide { width: min(1760px, 100% - clamp(28px, 4vw, 64px)); }
.vote { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3vw, 56px); align-items: start; padding-top: 24px; }
.vote > div { min-width: 0; }

/* Umschalter als Spalte links neben den Handys */
.stage-wrap { display: grid; grid-template-columns: 196px max-content; justify-content: center; gap: 36px; align-items: start; }
.stage-tools { position: sticky; top: calc(var(--top) + 96px); display: flex; flex-direction: column; gap: 18px; padding-top: 30px; }
.tool { display: flex; flex-direction: column; gap: 7px; }
.tool-label { font: 400 15px/1 DinCondensed, var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tool .seg { display: flex; }
.only-video { margin: 0; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: rgb(22 41 131 / 0.08); font: 400 17px/1.15 DinCondensed, var(--ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy); }
.tag-loop { display: inline-block; padding: 3px 7px 2px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--navy); color: var(--navy); font: 400 13px/1 DinCondensed, var(--ui); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }
.tool .seg button { flex: 1; padding: 0 10px; }
.stage-tools .switches { gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: rgb(22 41 131 / 0.08); }
.seg button {
  position: relative;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 400 18px/1 DinCondensed, var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 160ms, background 220ms var(--ease), box-shadow 220ms;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: 0 1px 2px rgb(16 30 94 / 0.16); }
.switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; font-size: 14px; color: var(--muted); padding: 6px 0; }
.switch i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line-strong); transition: background 200ms; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 240ms var(--ease); }
.switch[aria-pressed="true"] i { background: var(--navy); }
.switch[aria-pressed="true"] i::after { transform: translateX(16px); }
.format-seg { display: none !important; }

.stage { --s: 0.8; min-height: 300px; }

.stage.swap-next { animation: swap-next 420ms var(--ease) both; }
.stage.swap-prev { animation: swap-prev 420ms var(--ease) both; }
@keyframes swap-next { from { opacity: 0; transform: translateX(36px); } }
@keyframes swap-prev { from { opacity: 0; transform: translateX(-36px); } }
.stage.fade { animation: fade 280ms var(--ease) both; }
@keyframes fade { from { opacity: 0.2; } }

/* Bewertungs-Panel */
.panel { position: sticky; top: calc(var(--top) + 86px); padding-top: 4px; container-type: inline-size; }
/* lange Titel (Waschstraße, Schlagworte) passen in die Spalte */
.panel .title { font-size: clamp(30px, 10.5cqi, 54px); margin: 10px 0 12px; }
.panel .desc { margin: 0 0 6px; color: var(--ink); }
.panel .copy { margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.rate {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 16px 16px;
  border: 0;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  text-align: left;
  transition: box-shadow 200ms, transform 200ms var(--ease);
}
.rate.active { box-shadow: 0 0 0 2px var(--navy); }
.rate-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rate-head b { font: 400 21px/1 DinCondensed, var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.rate-head span { font-size: 14px; color: var(--muted); min-height: 1em; transition: color 160ms; }
.rate-head span.set { color: var(--navy); font-weight: 600; }
.stars { display: flex; gap: 6px; }
.star {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 160ms var(--ease), background 160ms;
}
.star:hover { background: rgb(22 41 131 / 0.06); }
.star svg { width: 34px; height: 34px; overflow: visible; }
.star path { fill: transparent; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; transition: fill 200ms, stroke 200ms; }
.stars.preview .star.lit path, .star.on path { fill: var(--yellow); }
.star.on.pop { animation: star-pop 420ms var(--ease) both; animation-delay: calc(var(--n) * 40ms); }
@keyframes star-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy-bright); opacity: 0; transition: opacity 240ms; }
.saved.show { opacity: 1; }
.note { margin: 18px 0 0; }
.note textarea { min-height: 84px; resize: vertical; }
.panel-nav { display: flex; gap: 10px; margin-top: 18px; }
.panel-nav .btn:last-child { flex: 1; }
.btn.ready { background: var(--yellow); color: var(--navy); animation: ready 700ms var(--ease); }
@keyframes ready { 40% { transform: scale(1.04); } }
.keys { margin-top: 16px; font-size: 13px; color: var(--muted); }
.keys kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 4px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-strong); font: 12px/1.4 var(--ui); text-align: center; color: var(--navy); }

@media (max-width: 1100px) {
  .vote { grid-template-columns: 1fr; }
  .panel { position: static; }
  .keys { display: none; }
}
@media (max-width: 760px) {
  .format-seg { display: flex !important; }
  .phone-fig { display: none !important; }
  .phone-fig.show { display: flex !important; }
  .vote { padding-top: 14px; gap: 18px; }
  .stage-wrap { grid-template-columns: 1fr; gap: 12px; }
  .stage-tools { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 12px; padding-top: 0; }
  .tool { flex: 1 1 150px; }
  .stage-tools .switches { flex-basis: 100%; flex-direction: row; gap: 16px; border-top: 0; padding-top: 0; }
  .seg button { min-height: 36px; padding: 0 14px; }
  .stars { justify-content: space-between; }
  .panel-nav { position: sticky; bottom: 0; margin: 18px -14px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: rgb(243 246 250 / 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
}

/* Start- und Schlussbild */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: calc(100dvh - var(--top) - 140px); }
.intro .title { margin: 16px 0 22px; font-size: clamp(36px, 4.6vw, 64px); }
.title .marker { white-space: nowrap; }
.intro p { max-width: 54ch; margin: 0 0 14px; font-size: 18px; }
.how { display: grid; gap: 14px; margin: 30px 0 34px; padding: 0; list-style: none; }
.how li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; color: var(--ink); }
.how li b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font: 400 18px/1 DinCondensed, var(--ui); }
.how li span { padding-top: 5px; }
.fan { position: relative; height: clamp(360px, 52vw, 620px); }
.fan img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgb(16 30 94 / 0.55), 0 0 0 1px rgb(16 30 94 / 0.08);
  transform: translate(-50%, -50%) rotate(calc(var(--k) * 7deg)) translateX(calc(var(--k) * 34%)) translateY(calc(var(--k) * var(--k) * 2.2%));
  animation: fan-in 900ms var(--ease) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes fan-in { from { opacity: 0; transform: translate(-50%, -30%) rotate(0deg) scale(0.9); } }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } .fan { order: -1; height: 300px; } .fan img { width: 30%; } }

.done-screen { text-align: left; max-width: 760px; margin: 40px auto; }
.done-screen .title { margin: 14px 0 20px; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0; }
.picks section h3 { margin: 0 0 10px; font: 400 19px/1 DinCondensed, var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pick { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.pick img { width: 44px; height: 55px; object-fit: cover; border-radius: 3px; }
.pick b { font: 400 22px/1 DinCondensed, var(--ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); }
.pick small { display: block; color: var(--muted); }

/* --- Ergebnis ----------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.person { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.person + .person { border-left: 1px solid var(--line); }
.person .avatar { width: 46px; height: 46px; font-size: 20px; }
.person b { display: block; font-weight: 600; }
.person small { color: var(--muted); }
.ring { margin-left: auto; width: 48px; height: 48px; flex: none; }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: var(--line); }
.ring .val { stroke: var(--navy); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 900ms var(--ease); }

.ring .tick { fill: none; stroke: var(--navy); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ring text { font: 400 14px/1 DinCondensed, var(--ui); fill: var(--navy); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 820px) { .people { grid-template-columns: 1fr; } .person + .person { border-left: 0; border-top: 1px solid var(--line); } }

.reco { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-bottom: 40px; padding: 22px 26px; background: var(--navy); color: #fff; border-radius: var(--r); }
.reco .eyebrow { color: var(--sky); }
.reco h2 { margin: 6px 0 0; font: 400 34px/1 ProWashHeading, var(--ui); font-style: italic; text-transform: uppercase; }
.reco-list { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: flex-end; }
.reco-item { display: flex; align-items: center; gap: 10px; }
.reco-item img { width: 40px; height: 50px; object-fit: cover; border-radius: 3px; }
.reco-item b { display: block; font: 400 21px/1 DinCondensed, var(--ui); text-transform: uppercase; letter-spacing: 0.04em; }
.reco-item small { color: var(--sky); font-size: 13px; }
@media (max-width: 820px) { .reco { grid-template-columns: 1fr; } .reco-list { justify-content: flex-start; } }

.boards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); position: relative; }
@media (max-width: 980px) { .boards { grid-template-columns: 1fr; } }
.board h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font: 400 26px/1 DinCondensed, var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.board h2 small { font-size: 15px; color: var(--muted); letter-spacing: 0.04em; }
.row { display: grid; grid-template-columns: 28px 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.row .rank { font: 400 30px/1 ProWashHeading, var(--ui); font-style: italic; color: var(--line-strong); }
.row.top .rank { color: var(--navy); }
.row img { width: 52px; height: 65px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.row .name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .name b { font: 400 22px/1 DinCondensed, var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.tag { display: inline-block; padding: 4px 8px 1px; background: var(--yellow); color: var(--navy); font: 400 14px/1 DinCondensed, var(--ui); letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(-8deg); }
.bar { position: relative; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--navy); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease); transition-delay: calc(var(--i) * 60ms); }
.row.top .bar i { background: var(--navy); }
.scores { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--navy); }
.chip .avatar { width: 22px; height: 22px; font-size: 12px; box-shadow: none; }
.chip.empty { color: var(--muted); }
.avg { text-align: right; }
.avg b { display: block; font: 400 36px/1 ProWashPrice, var(--ui); color: var(--navy); }
.avg small { color: var(--muted); font-size: 13px; }
.comments { grid-column: 3 / -1; margin: 2px 0 0; padding: 0; list-style: none; font-size: 14px; }
.comments li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; color: var(--ink); }
.comments .avatar { width: 22px; height: 22px; font-size: 12px; box-shadow: none; }

.gate { position: absolute; inset: -12px; z-index: 5; display: grid; place-items: start center; padding-top: 70px; background: rgb(243 246 250 / 0.72); backdrop-filter: blur(10px); }
.gate-box { max-width: 460px; padding: 26px 28px; background: var(--paper); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgb(16 30 94 / 0.35); }
.gate-box h3 { margin: 0 0 8px; font: 400 26px/1.05 DinCondensed, var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.gate-box p { margin: 0 0 18px; color: var(--muted); }
.gate-box .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.linklike { border: 0; background: transparent; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; min-height: 44px; }

/* --- Dateien & Rohdaten ------------------------------------------------- */
.motif-files { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.motif-files h2 { margin: 8px 0 0; font: 400 32px/1 ProWashHeading, var(--ui); font-style: italic; text-transform: uppercase; color: var(--navy); }
.motif-files p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
@media (max-width: 980px) { .motif-files { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .files { grid-template-columns: 1fr 1fr; } }
.file { display: flex; flex-direction: column; gap: 10px; }
.thumb { position: relative; overflow: hidden; border-radius: 4px; background: #dde7f2; box-shadow: 0 0 0 1px var(--line); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.file:hover .thumb img, .file:hover .thumb video { transform: scale(1.03); }
.thumb .kind { position: absolute; left: 8px; top: 8px; padding: 4px 7px 3px; border-radius: 3px; background: rgb(16 30 94 / 0.82); color: #fff; font: 400 14px/1 DinCondensed, var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
.file-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.file-meta b { display: block; font: 400 18px/1.1 DinCondensed, var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.file-meta small { color: var(--muted); font-size: 12.5px; }
.dl {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  transition: background 160ms, transform 160ms var(--ease);
}
.dl:hover { background: var(--navy-deep); }
.dl:active { transform: scale(0.94); }
.dl svg { width: 20px; height: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chips a { padding: 8px 12px 7px; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font: 400 17px/1 DinCondensed, var(--ui); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--navy); transition: background 160ms; }
.chips a:hover { background: var(--sky-soft); }
.raw-section { padding: 40px 0 8px; scroll-margin-top: calc(var(--top) + 16px); }
.raw-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.raw-section h2 { margin: 0; font: 400 30px/1 ProWashHeading, var(--ui); font-style: italic; text-transform: uppercase; color: var(--navy); }
.raw-section header p { margin: 0; color: var(--muted); font-size: 14px; }
.raw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.raw-grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.raw .thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; }
.raw .thumb img { object-fit: contain; padding: 14px; }
.raw .thumb.photo img { object-fit: cover; padding: 0; }
.raw .thumb.checker { background: repeating-conic-gradient(#e9eef5 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.raw .thumb.navybg { background: var(--navy); }
.raw .desc { margin: 2px 0 0; font-size: 13.5px; color: var(--ink); }
.raw .src { font-size: 12px; color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch { border: 0; padding: 0; text-align: left; background: transparent; border-radius: var(--r); }
.swatch i { display: block; height: 92px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); transition: transform 200ms var(--ease); }
.swatch:hover i { transform: translateY(-3px); }
.swatch b { display: block; margin-top: 8px; font: 400 17px/1 DinCondensed, var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.swatch code { font-size: 13px; color: var(--ink); }
.swatch small { display: block; font-size: 12px; color: var(--muted); }
.font-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.font-item .sample { font-size: 40px; line-height: 1.1; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-item .meta { grid-column: 1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.font-item .meta b { color: var(--navy); font-weight: 600; }
.font-item .dl { grid-row: 1 / span 2; grid-column: 2; }

.empty-note { padding: 40px 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  @view-transition { navigation: none; }
}

@media (max-width: 520px) {
  .page-head .title { font-size: 34px; }
}

@media (max-width: 640px) {
  .raw-section > header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .raw-grid, .raw-grid.wide { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .raw .file-meta b { font-size: 16px; }
  .raw .desc { font-size: 12.5px; }
  .font-item .sample { font-size: 26px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .intro .title { font-size: 33px; }
  .picks { grid-template-columns: 1fr; gap: 6px; }
  .pick small { font-size: 13px; }
}