/* ---------- Wahltool ----------
   After the Figma pages "3. Phase -> Mobile" (402x874 phone frames, the
   content area between status bar and browser chrome is 402x712) and
   "3. Phase -> Desktop", flow "Desktop-1" (1702x1117 MacBook frames:
   yellow ground, two still key visuals, the title top left, logo bottom
   left, close control top right, the tool as a 402x880 white card with
   a shadow in the middle). Screens are rendered by wahltool.js from
   wahltool-data.json. The tool's own tokens carry a --wt- prefix so
   they never clash with the campaign page (styles.css). */

.wt-dialog {
  --wt-yellow: #FFD618;
  --wt-orange: #F59A00;        /* Figma us-orange */
  --wt-orange-bright: #F7A214; /* Figma us-orange-bright */
  --wt-green: #84F278;
  --wt-blue: #ADEDFB;
  --wt-violet: #E6AFED;
  --wt-ink: #1F1F1F;
  --wt-font: "Neue Haas Grotesk Display Pro", "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--wt-font);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  overflow: hidden;
}
.wt-dialog:not([open]) { display: none; }
.wt-dialog::backdrop { background: transparent; }
body.has-dialog { overflow: hidden; }
/* Base rules at zero specificity, so every component class wins */
:where(.wt-dialog) img { display: block; max-width: 100%; }
:where(.wt-dialog) :where(p, h2) { margin: 0; font-weight: 500; }
:where(.wt-dialog) button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Desktop-only furniture */
.wt-dialog > .wt-collage,
.wt-dialog > .wt-dialog-title,
.wt-dialog > .wt-dialog-logo,
.wt-dialog > .wt-x--page { display: none; }

/* ---------- The tool (full screen on phones, card on desktop) ---------- */
.wt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  background: #FFFFFF;
  /* Spacings below scale with the tool's height (cqh), so the choice
     screens fit without scrolling on short phones too */
  container-type: size;
}

/* ---------- Tag tilts ---------- */
/* Every rotation the Figma frames use, addressed by index (the site's
   CSP forbids inline style attributes) */
.wt-dialog [data-tilt="1"] { --tilt: 1deg; }
.wt-dialog [data-tilt="2"] { --tilt: 2deg; }
.wt-dialog [data-tilt="3"] { --tilt: -1deg; }
.wt-dialog [data-tilt="4"] { --tilt: -1.3deg; }
.wt-dialog [data-tilt="5"] { --tilt: 1.32deg; }
.wt-dialog [data-tilt="6"] { --tilt: -2.42deg; }
.wt-dialog [data-tilt="7"] { --tilt: 1.26deg; }
.wt-dialog [data-tilt="8"] { --tilt: 2.11deg; }
.wt-dialog [data-tilt="9"] { --tilt: -1.05deg; }
.wt-dialog [data-tilt="10"] { --tilt: 0.98deg; }
.wt-dialog [data-tilt="11"] { --tilt: 2.03deg; }
.wt-dialog [data-tilt="12"] { --tilt: -0.7deg; }
.wt-dialog [data-tilt="13"] { --tilt: -2.38deg; }
.wt-dialog [data-tilt="14"] { --tilt: -1.2deg; }
.wt-dialog [data-tilt="15"] { --tilt: 1.5deg; }
.wt-dialog [data-tilt="16"] { --tilt: -1.5deg; }
.wt-dialog [data-tilt="17"] { --tilt: 1.06deg; }

/* ---------- Progress ---------- */
/* Figma: 4px segments, 2px apart; upcoming steps at 20% */
.wt-progress {
  flex: none;
  display: flex;
  gap: 2px;
  height: 4px;
  margin: 8px 16px 0;
}
.wt-progress span {
  flex: 1;
  background: var(--wt-yellow);
  opacity: 0.2;
}
.wt-progress span.is-active { opacity: 1; }
.wt-progress:empty { visibility: hidden; }

.wt-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden; /* tilted tags must never make the screen pan sideways */
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom: room for the floating nav buttons */
  padding: clamp(14px, 3.5cqh, 26px) 20px 76px;
  text-align: center;
  scrollbar-width: none;
}
.wt-body::-webkit-scrollbar { display: none; }
.wt-body:focus { outline: none; }

/* Nav row: back left, i in the middle, close right (Figma Frame 399:
   20px from the edges, 19px above the bottom). The buttons float over
   the content, no bar behind them. */
.wt-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
  padding: 0 20px 19px;
  pointer-events: none;
}
.wt-nav button { pointer-events: auto; }
.wt-nav-l { justify-self: start; }
.wt-nav-r { justify-self: end; }
/* Every other screen: back left, the i or (result page only) the
   restart button in the middle, close right */
.wt-nav--row .wt-arrow--back { grid-column: 1; justify-self: start; }
.wt-nav--row :is(.wt-restart, .wt-infobtn) { grid-column: 2; }
.wt-nav--row .wt-x { grid-column: 3; justify-self: end; }
/* Intro: the big arrow sits a little above the row, 41px over the
   bottom edge like in the Figma desktop card (2947:15210); the x stays
   in the row */
.wt-nav--intro { padding-bottom: 40px; }
.wt-nav--intro .wt-nav-r { align-self: end; translate: 0 21px; }

/* ---------- Round buttons ---------- */
/* Figma Group 392 (arrow), Group 393 (big arrow), Group 435 (i),
   Group 455 (x), Group 392 of 2947:15060 (restart). Arrow, i and
   restart are inline SVG (wahltool.js). */
.wt-arrow,
.wt-infobtn,
.wt-restart,
.wt-x {
  flex: none;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: rotate 0.5s cubic-bezier(0.45, 0, 0.25, 1);
}
.wt-arrow,
.wt-restart { width: 55px; height: 45px; }
.wt-infobtn { width: 46px; height: 49px; }
.wt-x { width: 46px; height: 48px; }
.wt-icon,
.wt-x img {
  display: block;
  width: 100%;
  height: 100%;
}
.wt-icon { overflow: visible; }
.wt-icon-disc { fill: var(--wt-yellow); }
.wt-icon-glyph {
  fill: none;
  stroke: #000000;
  stroke-width: 1.5;
  transform-box: view-box;
}
.wt-arrow--next .wt-icon { transform: scaleX(-1); }
.wt-arrow--big {
  width: 74px;
  height: 61px;
}
.wt-arrow--big.wt-arrow--next .wt-icon { transform: rotate(180deg); }

/* Mini animation after the Figma variants (2327:7470, 2327:7503,
   2947:15060): every few seconds the glyph tips over to "Variant2" and
   back, the disc fading to 75% (arrow: turned back 8deg around its tip
   and dropped; i: leaning 8deg to the right; restart: turned back 45deg
   around the disc's centre). Hover, focus and an open infos card hold
   that pose.
   Both movements drive one number, --wt-pose (0 = Default, 1 =
   Variant2): the loop animates --wt-loop, hover and focus transition
   --wt-hover, the glyph takes the larger of the two. So hovering glides
   into the pose from wherever the loop is and glides back out, instead
   of jumping (browsers without @property step between the poses). */
@property --wt-loop {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --wt-hover {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:is(.wt-arrow, .wt-infobtn, .wt-restart) {
  --wt-hover: 0;
  transition: --wt-hover 0.5s cubic-bezier(0.45, 0, 0.25, 1);
}
:is(.wt-arrow, .wt-infobtn, .wt-restart) .wt-icon {
  --wt-pose: max(var(--wt-loop), var(--wt-hover));
  animation: wt-tip 3.2s infinite;
}
:is(.wt-arrow, .wt-infobtn, .wt-restart) .wt-icon-glyph {
  transform: translate(calc(var(--dx, 0px) * var(--wt-pose)), calc(var(--dy, 0px) * var(--wt-pose))) rotate(calc(var(--turn) * var(--wt-pose)));
}
:is(.wt-arrow, .wt-infobtn, .wt-restart) .wt-icon-disc {
  fill-opacity: calc(1 - 0.25 * var(--wt-pose));
}
.wt-arrow .wt-icon-glyph {
  --dx: -6.2px;
  --dy: 5.7px;
  --turn: -8deg;
  transform-origin: 11px 22px;
}
.wt-arrow--big .wt-icon-glyph {
  --dx: -8.4px;
  --dy: 7.7px;
  transform-origin: 14.85px 29.79px;
}
.wt-infobtn .wt-icon-glyph {
  --turn: 8deg;
  transform-origin: 26.2px 21.4px;
}
.wt-restart .wt-icon-glyph {
  --turn: -45deg;
  transform-origin: 22.6px 22.6px;
}
/* The i follows the arrow a little later, the restart button later still */
.wt-infobtn .wt-icon { animation-delay: 0.4s; }
.wt-restart .wt-icon { animation-delay: 0.8s; }
@keyframes wt-tip {
  0%, 62% { --wt-loop: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  74% { --wt-loop: 1; }
  86% { --wt-loop: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  100% { --wt-loop: 0; }
}
:is(.wt-arrow, .wt-infobtn, .wt-restart):is(:hover, :focus-visible),
.wt-infobtn[aria-expanded="true"] { --wt-hover: 1; }
.wt-x:hover,
.wt-x:focus-visible { rotate: 90deg; }
.wt-arrow:focus-visible,
.wt-infobtn:focus-visible,
.wt-restart:focus-visible,
.wt-x:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ---------- Text ---------- */
/* H4-Mobile-Lead: 26/29 medium, 2% tracking */
.wt-title,
.wt-lead {
  width: 100%;
  max-width: 363px;
  font-size: 26px;
  line-height: 29px;
  letter-spacing: 0.02em;
  color: #000000;
}
.wt-title { flex: none; }
/* Intro text floats in the middle of the screen */
.wt-lead { margin-block: auto; }

/* Hand-drawn underline (Figma Vector 10) */
.wt-underline {
  position: relative;
  display: inline-block;
}
.wt-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 4px;
  background: url("assets/img/wahl-underline.svg?v=1") no-repeat center / 100% 100%;
}

/* Marker highlights behind words (Figma: tinted bars, some tipped). Every
   bar is 1.154em high, centred on the text (Figma Rectangle 62-64: 30px
   behind 26px text), whether it runs inline (and may wrap) or is tipped
   as an inline-block, whose own box is only one line (29px) high */
.wt-hl {
  background: linear-gradient(var(--hl), var(--hl)) center / 100% 1.154em no-repeat;
  color: inherit;
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.wt-hl--blue { --hl: var(--wt-blue); }
.wt-hl--violet { --hl: var(--wt-violet); }
.wt-hl--green { --hl: var(--wt-green); }
.wt-hl[data-tilt] {
  display: inline-block;
  rotate: var(--tilt);
  /* the box grows to the bar, the line keeps its height */
  padding-block: calc((1.154em - 1lh) / 2);
  margin-block: calc((1lh - 1.154em) / 2);
}

/* ---------- Tags ---------- */
/* Figma "Tag": tinted box, text at 80% black. Sizes: sm 18/21 (8/16
   padding), md 21.6/25.2 (9.6/19.2), lg 26/40 (8/16). */
.wt-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 8px 16px;
  border: 0;
  background: var(--wt-blue);
  color: rgba(0, 0, 0, 0.8);
  font-family: var(--wt-font);
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  rotate: var(--tilt, 0deg);
  transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.wt-tag--md {
  padding: 9.6px 19.2px;
  font-size: 21.6px;
  line-height: 25.2px;
}
.wt-tag--lg {
  font-size: 26px;
  line-height: 40px;
  letter-spacing: 0.01em;
}
.wt-tag--orange { background: var(--wt-orange); }
.wt-tag--orange-bright { background: var(--wt-orange-bright); }
.wt-tag--green { background: var(--wt-green); }
.wt-tag--blue { background: var(--wt-blue); }
.wt-tag--violet { background: var(--wt-violet); }
.wt-tag--yellow { background: var(--wt-yellow); }
button.wt-tag,
a.wt-tag { cursor: pointer; }
button.wt-tag:focus-visible,
a.wt-tag:focus-visible {
  rotate: calc(var(--tilt, 0deg) * -1);
  filter: brightness(1.06);
}
/* Hover only with a real pointer (on phones :hover sticks after a tap) */
@media (hover: hover) {
  button.wt-tag:hover,
  a.wt-tag:hover {
    rotate: calc(var(--tilt, 0deg) * -1);
    filter: brightness(1.06);
  }
}
button.wt-tag:focus-visible,
a.wt-tag:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

.wt-options {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2cqh, 16px);
  width: 100%;
  margin-top: clamp(16px, 5cqh, 40px);
}
/* Schwerpunktfächer: right under the hand-drawn arrow (Figma 2843:10994) */
.wt-options--lg {
  gap: clamp(10px, 2.3cqh, 18px);
  margin-top: 0;
}
.wt-options--md {
  gap: 12px;
  margin-top: clamp(24px, 10cqh, 87px);
}
/* The subjects chosen so far, stacked under the title (no tilt) */
.wt-stack {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: clamp(12px, 3.5cqh, 26px);
}
.wt-stack--center {
  margin-block: auto;
  cursor: pointer;
}
.wt-stack--dank { margin-top: clamp(20px, 8cqh, 85px); }
.wt-stack .wt-tag { cursor: default; }
.wt-stack--center .wt-tag { cursor: pointer; }

/* Hand-drawn arrow (Figma Vector 23), bobbing like the prototype */
.wt-hand-slot {
  position: relative;
  flex: none;
  width: 100%;
  height: clamp(90px, 24cqh, 196px);
}
.wt-hand-slot .wt-hand {
  left: calc(50% - 76px);
  top: 0;
  width: auto;
  height: 100%;
}
.wt-hand {
  position: absolute;
  left: 105px;
  top: 16px;
  width: 169px;
  height: 205px;
  rotate: 23.38deg;
  animation: wt-bob 2s ease-in-out infinite;
  pointer-events: none;
}
/* Dank (Figma 2843:11245): the loop arrow (Vector 23, its 23.38deg turn
   baked into the SVG) runs from the end of the title down to the
   button's right edge, placed from the button's centre as in Figma (128px
   between title and button). On short screens gap and arrow shrink
   together (around the arrow's head, which stays at the button). */
.wt-dank-go {
  position: relative;
  flex: none;
  margin-top: 128px;
}
.wt-hand--dank {
  left: calc(50% + 14px);
  top: calc(50% - 201px);
  width: 190.29px;
  height: 209.15px;
  rotate: none;
  transform-origin: 48.1% 93.7%;
}
@container (max-height: 700px) {
  .wt-dank-go { margin-top: 102px; }
  .wt-hand--dank { scale: 0.8; }
}
@keyframes wt-bob {
  0%, 50%, 100% { translate: 0 0; opacity: 1; }
  25%, 75% { translate: 0 14px; opacity: 0.5; }
}
.wt-go { flex: none; }

/* Options on their way out (wahltool.js moveTiles) and the page that
   leaves during the page turn to the result */
.wt-ghost {
  position: absolute;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}
.wt-page-ghost {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Result page (Figma 2843:11373, one long scroll) ---------- */
/* Bottom: scrolled to the end, the logo sits 57px above the nav
   buttons as in Figma (Frame 406 ends 119px under its logo; our nav
   sits 2px higher and our logo is 5px taller) */
.wt-body--result {
  padding-top: 12px;
  padding-bottom: 124px;
}
/* Hand-drawn circle (Figma Vector 43, 363x318) around the title */
.wt-result {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(363px, 100%);
  aspect-ratio: 363 / 318;
  margin-top: 60px;
  padding: 30px 34px;
  background: url("assets/img/wahl-circle.svg?v=1") no-repeat center / 100% 100%;
}
/* H1-2-Mobile: 37/40, 2% tracking; long labels drop to the lead size */
.wt-result-title {
  font-size: 37px;
  line-height: 40px;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  hyphens: manual;
}
.wt-result-title--long {
  font-size: 26px;
  line-height: 29px;
}
.wt-result-text {
  flex: none;
  margin-top: 90px;
}
.wt-result-text + .wt-line { margin-top: 70px; }
/* Figma 2843:11245: 78px from a line down to the next text ("Am
   Gymnasium …", with the line's 40px), "Komm vorbei …" 61px under its
   line, which sits 64px under the sign-up note */
.wt-line + .wt-result-text { margin-top: 38px; }
.wt-signup + .wt-line { margin-top: 64px; }
.wt-signup + .wt-line + .wt-result-text { margin-top: 21px; }

/* Sign-up note under the PDF button (styles.css .signup-cta): the Figma
   phone size, 37px H1, as long as the tool is wide enough; the column of
   the lines keeps it in its phone layout on a wide screen too */
.wt-signup { flex: none; max-width: 362px; margin-top: 30px; }
.wt-signup .signup-cta { --u: min(37px, 100cqw / 9.5); }

/* Hand-drawn separator (Figma Vector 37, every second one flipped) */
.wt-line {
  flex: none;
  width: 100%;
  max-width: 362px;
  height: 4px;
  margin: 40px 0;
  border: 0;
  background: url("assets/img/wahl-line.svg?v=1") no-repeat center / 100% 100%;
}
.wt-line--flip { transform: scaleY(-1); }

/* Photo strip (Figma frame "4"): five photo cards with a speech box,
   then two more photos, scrolled sideways. All px values are the Figma
   ones (310x515 photos, 29px apart). It scrolls freely like the strip
   on the campaign page: no snapping to the photos (client feedback,
   that felt hard). */
.wt-strip {
  flex: none;
  display: flex;
  gap: 29px;
  width: calc(100% + 40px);
  margin: 60px -20px 0;
  padding: 36px 20px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wt-strip::-webkit-scrollbar { display: none; }
/* A mouse drags the strip (wahltool.js) */
@media (hover: hover) and (pointer: fine) {
  .wt-strip { cursor: grab; }
}
.wt-strip.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.wt-strip img { -webkit-user-drag: none; }
.wt-card {
  position: relative;
  flex: none;
  width: 310px;
  margin: 0;
  rotate: var(--tilt, 0deg);
}
/* Figma: photos 3 and 6 are turned by -4.04deg, the others straight */
.wt-card:nth-child(3),
.wt-card:nth-child(6) { --tilt: -4.04deg; }
.wt-card-photo {
  width: 100%;
  aspect-ratio: 310 / 515;
  object-fit: cover;
}
/* Tape centred a few px above the photo's top edge, as in Figma. --tx /
   --ty: centre of the visible tape, --tw: element width (the tape images
   carry ~15% transparent margin), --tr: turn relative to the card. */
.wt-card-tape {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: var(--tw);
  max-width: none;
  opacity: 0.85;
  transform: translate(-50%, -50%) rotate(var(--tr));
  pointer-events: none;
}
.wt-card:nth-child(1) .wt-card-tape { --tx: 110px; --ty: -8px; --tw: 126px; --tr: -3.75deg; }
.wt-card:nth-child(2) .wt-card-tape { --tx: 165px; --ty: -7px; --tw: 144px; --tr: 0.44deg; }
.wt-card:nth-child(3) .wt-card-tape { --tx: 152px; --ty: 1px; --tw: 125px; --tr: 5.44deg; }
.wt-card:nth-child(4) .wt-card-tape { --tx: 158px; --ty: -8px; --tw: 131px; --tr: 6.72deg; }
.wt-card:nth-child(5) .wt-card-tape { --tx: 141px; --ty: -5px; --tw: 149px; --tr: -8.29deg; }
.wt-card:nth-child(6) .wt-card-tape { --tx: 163px; --ty: 0px; --tw: 126px; --tr: 1.65deg; }
.wt-card:nth-child(7) .wt-card-tape { --tx: 140px; --ty: -7px; --tw: 130px; --tr: -4.2deg; }

/* Speech box (Figma Union: 234px box, a 29px tail either on top at the
   left or below on the right); box and tail are one SVG outline */
.wt-speech {
  position: absolute;
  isolation: isolate;
  width: 234px;
  margin: 0;
  padding: 11.5px 13.5px 13.5px;
  color: #000000;
  text-align: left;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.02em;
  rotate: var(--br, 0deg);
}
/* The outline of a speech box (wahltool.js drawOutline), behind its
   text: the 3px line is clipped to the shape, a 1.5px inside stroke */
.wt-outline {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
.wt-outline-fill { fill: #FFFFFF; }
.wt-outline-line {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
}
.wt-card:nth-child(1) .wt-speech { left: 88px; top: 381px; }
.wt-card:nth-child(2) .wt-speech { left: 5px; top: 262px; --br: -2.92deg; }
.wt-card:nth-child(3) .wt-speech { left: 52px; top: 379px; --br: 6.34deg; }
.wt-card:nth-child(4) .wt-speech { left: 19px; top: 67px; }
.wt-card:nth-child(5) .wt-speech { left: 29px; top: 359px; --br: -3.44deg; }

/* "Hol dir deinen Mix!" with the PDF button */
.wt-mix {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}
.wt-mix .wt-title { margin-bottom: 30px; }

/* Links (Figma "los" tags) */
.wt-links {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.wt-end-logo {
  flex: none;
  align-self: flex-start;
  width: min(296px, 100%);
  height: auto;
  margin-top: 8px;
}

/* ---------- Infos zu den Fächern (Figma 2843:11643 ff., Frame 405) ---------- */
/* Phones: a white sheet over the whole screen, sliding in from the
   right; its x sits where the i was. Opened and closed by the i
   (wahltool.js toggles .is-infos on the dialog). The slide runs on
   transform (GPU-composited in every browser, also Safari) and the
   sheet stays painted beside the screen while closed, so the slide
   starts without a repaint; inert and aria-hidden keep it out of reach. */
.wt-infos {
  --slide: cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
  background: #FFFFFF;
  color: var(--wt-ink);
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  transition: transform 0.5s var(--slide);
}
.wt-dialog.is-infos .wt-infos { transform: none; }
/* The nav icons under the sheet stop their mini animation meanwhile */
.wt-dialog.is-infos .wt-icon { animation-play-state: paused; }
.wt-infos-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 42px 20px 100px;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.02em;
  text-align: left;
  scrollbar-width: none;
}
.wt-infos-body::-webkit-scrollbar { display: none; }
.wt-infos-body:focus { outline: none; }
.wt-infos-close {
  position: absolute;
  left: 50%;
  bottom: calc(19px + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
}
.wt-infos-close:hover,
.wt-infos-close:focus-visible { rotate: 90deg; }

/* The step's short text in a speech box tinted in the step's colour
   (Figma Group 453 / 416 / 417), tail bottom left; box and tail are one
   SVG outline like the photo speech boxes */
.wt-infos-head {
  position: relative;
  isolation: isolate;
  width: min(371px, 100%);
  margin: 0 auto 62px;
  padding: 19.5px 21.5px 21.5px 35.5px;
  color: #000000;
  font-size: 25.4px;
  line-height: 29px;
  letter-spacing: 0.01em;
}
/* Vertiefung / Ergänzungsfach / Wahlfächer: the narrower box (Figma
   Group 453 / 416 / 417, 340px, 23.1/26.4) */
.wt-infos:not(.wt-infos--spf) .wt-infos-head {
  width: min(340px, 100%);
  padding: 19.5px 17.5px 19.5px 27.5px;
  font-size: 23.1px;
  line-height: 26.4px;
}
.wt-infos-head .wt-outline-fill { fill: var(--c); }
.wt-infos--spf { --c: var(--wt-orange); --bar: var(--wt-orange-bright); }
.wt-infos--vert { --c: var(--wt-green); --bar: var(--wt-green); }
.wt-infos--ef { --c: var(--wt-blue); --bar: var(--wt-blue); }
.wt-infos--wf { --c: var(--wt-violet); --bar: var(--wt-violet); }

/* Subject name as a tile (client feedback): the box keeps the room of
   the choice tiles around the text (8/16, text at 80% black), not the
   tight marker bar, and the tilt of the subject's tile in the tool
   (client feedback 2026-10-20) */
.wt-info h2 {
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  background: var(--bar);
  color: rgba(0, 0, 0, 0.8);
  font-size: inherit;
  line-height: 21px;
  rotate: var(--tilt, 0deg);
}
.wt-info p { margin-top: 21px; }
.wt-infos-body .wt-line { max-width: none; }
.wt-infos-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wt-infos-end .wt-lead { margin: 0; }
.wt-infos-end .wt-end-logo { margin-top: 0; }

/* ---------- Desktop: card on the yellow ground ---------- */
/* Figma "Desktop-1" flow (2947:15209 ff., 1702x1040 viewport): the tool
   is a 402x880 white card with a soft shadow in the middle, the two
   key visuals lie still left and right of it, "Finde jetzt deinen Mix."
   sits top left exactly where the campaign page has it, the logo bottom
   left, the close control top right. */
@media (min-width: 721px) {
  .wt-dialog { background: var(--wt-yellow); }
  .wt {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 402px;
    height: min(880px, 100% - 64px);
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.25);
    translate: -50% -50%;
  }
  .wt-progress { margin: 22px 16px 0; }
  /* The intro text starts under the progress bar (Figma 2947:15230) */
  .wt-body[data-screen="intro"] > .wt-lead { margin-top: 0; }
  .wt-nav { padding-bottom: 14px; }
  .wt-nav--intro { padding-bottom: 40px; }
  /* The close control lives top right on the ground, not in the card */
  .wt-nav-r,
  .wt-nav--row .wt-x { display: none; }
  /* Without the x the i or the restart button moves right (Figma) */
  .wt-nav--row :is(.wt-infobtn, .wt-restart) { grid-column: 3; justify-self: end; }
  .wt-nav--intro .wt-nav-c { grid-column: 2; }
  .wt-dialog > .wt-x--page {
    display: block;
    position: absolute;
    top: clamp(20px, 2.5vw, 43px);
    right: clamp(20px, 2.5vw, 43px);
    z-index: 2;
  }
  /* Infos: a card over the tool card, sliding in from the right */
  .wt-infos {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 402px;
    height: min(880px, 100% - 64px);
    padding-top: 0;
    border-radius: 12px;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.25);
    transform: none;
    will-change: auto;
    translate: calc(-50% + 60px) -50%;
    opacity: 0;
    visibility: hidden;
    transition: translate 0.5s var(--slide), rotate 0.5s var(--slide), opacity 0.3s ease, visibility 0s linear 0.5s;
  }
  .wt-dialog.is-infos .wt-infos {
    translate: -50% -50%;
    opacity: 1;
    visibility: visible;
    transition: translate 0.5s var(--slide), rotate 0.5s var(--slide), opacity 0.3s ease, visibility 0s;
  }
}

/* Desktop with room for two cards: the infos card comes in from the
   right edge, turned 11deg like Figma's start pose (Frame 404), and
   lands beside the tool, over the right key visual. The tool stays in
   the middle as long as both fit with 90px free on the right for the
   x (--shift: how far the tool gives way on narrower screens, never
   closer than 20px to the left edge). The i toggles the card, so it
   has no x of its own. */
@media (min-width: 880px) {
  .wt-dialog { --shift: max(221px - 50vw, min(0px, 50vw - 717px)); }
  .wt-dialog > .wt-x--page { z-index: 6; }
  .wt { transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .wt-dialog.is-infos .wt { translate: calc(-50% + var(--shift)) -50%; }
  /* Parked right of the screen (turned, it reaches 80px further left) */
  .wt-infos {
    translate: calc(50vw + 130px) -50%;
    rotate: 11deg;
    opacity: 1;
  }
  .wt-dialog.is-infos .wt-infos {
    translate: calc(-50% + 426px + var(--shift)) -50%;
    rotate: 0deg;
  }
  .wt-infos-close { display: none; }
  .wt-infos-body { padding-bottom: 40px; }
}

/* Key visuals, logo and title. Key visuals: sizes and places in Figma
   px of the 1702x1040 viewport (2947:17317 / 17318, trimmed to their
   visible part, turned around the Figma image centre), scaled by --u
   and measured from the middle, so they stay beside the card. */
@media (min-width: 1000px) {
  .wt-dialog > .wt-collage {
    display: block;
    position: absolute;
    inset: 0;
    --u: calc(min(100vw, 163.65vh) / 1702);
    pointer-events: none;
  }
  .wt-collage img {
    position: absolute;
    max-width: none;
    height: auto;
  }
  .wt-collage-l {
    left: calc(50% - 909.88 * var(--u));
    top: calc(50% - 154.05 * var(--u));
    width: calc(703.27 * var(--u));
    transform-origin: 50.33% 38.3%;
    rotate: -20.2deg;
  }
  .wt-collage-r {
    left: calc(50% + 303.55 * var(--u));
    top: calc(50% - 287.12 * var(--u));
    width: calc(423.28 * var(--u));
    transform-origin: 50.94% 51.54%;
    rotate: 15.61deg;
    /* --wt-spring: Figma's "Gentle" spring, set by wahltool.js */
    transition: translate 1022ms var(--wt-spring, ease), rotate 1022ms var(--wt-spring, ease), scale 1022ms var(--wt-spring, ease);
  }
  /* From the Schwerpunktfach step on, the football is larger and turned
     less (Figma 2961:21975 vs the intro's 2947:17318: centre 10.9px
     right and 17.8px up, 670.9 instead of 584.1px wide, 12 instead of
     15.6deg); smart animate moves it with the steps */
  .wt-dialog[data-screen]:not([data-screen="intro"]) .wt-collage-r {
    translate: calc(10.9 * var(--u)) calc(-17.79 * var(--u));
    rotate: 12deg;
    scale: 1.1486;
  }
  /* Logo bottom left (Figma Logo-Test, 502px wide at 56/1702, 47px
     above the bottom), never reaching under the card */
  .wt-dialog > .wt-dialog-logo {
    display: block;
    position: absolute;
    left: clamp(20px, 3.3vw, 56px);
    bottom: clamp(20px, 2.75vw, 47px);
    width: min(502px, 29.5vw, 46.7vw - 225px);
    height: auto;
    transition: opacity 0.3s ease;
  }
}
/* Desktop landing layout (from 1141px): the logo lies exactly on the
   campaign page's hero logo (same size, same place: styles.css
   .hero-logo, 4% - 70px under the hero slot, whose height follows from
   the viewport, the title and the hero's padding), so it stays put
   while the tool fades in. Figma draws it 502px wide in both. */
@media (min-width: 1141px) {
  .wt-dialog > .wt-dialog-logo {
    --hpb: clamp(2rem, 5vw, 4rem);
    left: max(clamp(1.25rem, 4vw, 3rem), calc((100vw - 2000px) / 2 + 48px));
    bottom: calc(var(--hpb) - 70px + 0.04 * (100vh - clamp(1.5rem, 3vw, 2.5rem) - 2.142 * var(--h1-size) - clamp(-48px, -2.5vw, -16px) - var(--hpb)));
    width: auto;
    height: calc(var(--body-size) * 2 * 56.7 / 48.2);
  }
}
/* The title as on the campaign page (same size and place), from where
   it keeps clear of the card */
@media (min-width: 1150px) {
  .wt-dialog > .wt-dialog-title {
    display: block;
    position: absolute;
    left: max(clamp(1.25rem, 4vw, 3rem), calc((100vw - 2000px) / 2 + 48px));
    top: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    color: var(--wt-orange);
    transition: opacity 0.3s ease;
  }
}
/* Where the tool has to give way to the infos card, title and logo
   step aside meanwhile */
@media (max-width: 1433px) {
  .wt-dialog.is-infos > :is(.wt-dialog-title, .wt-dialog-logo) { opacity: 0; }
}

/* Narrow phones: let the nav row fit */
@media (max-width: 380px) {
  .wt-nav { padding-inline: 12px; }
  .wt-title,
  .wt-lead { font-size: 24px; line-height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-hand { animation: none; }
  .wt-arrow,
  .wt-infobtn,
  .wt-restart,
  .wt-x,
  .wt-tag,
  .wt,
  .wt-infos,
  .wt-dialog.is-infos .wt-infos,
  .wt-collage-r { transition: none; }
  :is(.wt-arrow, .wt-infobtn, .wt-restart) .wt-icon { animation: none; }
}