/* Homepage direct destinations — asymmetric editorial grid + deterministic motion. */
.destinations-section {
  position: relative;
  padding: clamp(76px, 9vw, 124px) 0 clamp(64px, 8vw, 104px);
  background: #faf9f5;
}

.destinations-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(36px, 5vw, 58px);
}

.destinations-title {
  max-width: 15ch;
  margin: 15px 0 0;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.destinations-intro {
  max-width: 42ch;
  margin: 0;
  color: #4a4945;
  font-size: 16px;
  line-height: 1.62;
}

/* Placement is document order plus two spans — deliberately NOT a named-area map.
   The canonical tile order is already enforced three times (CMS array validate, the /v1
   `HomepageDestinationKey` order, the BFF content validator) and the visible „03 / 12"
   badge counts DOM order, so a hand-maintained area map could only ever drift out of sync
   with it. It also has to survive two grids at once: nine tiles in production today and
   twelve after the backfill. `grid-area: <name>` against a template that has no such area
   falls back to auto placement, which would silently reflow the whole section — flow
   placement has no such failure mode and produces exactly the intended rows for both:

     9  →  education² pedagogy / ai digitalization social-media /
           information-security privacy innovation / rooms³
     12 →  education² pedagogy / ai digitalization social-media /
           information-security privacy expertise / smart-city drones innovation / rooms³ */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d9d7d0;
  border-radius: 24px;
  background: #d9d7d0;
  box-shadow: 0 28px 72px rgba(29, 27, 22, 0.08);
}

/* Each tile is a two-column layout: copy on the left, a reserved motif cell bottom-right
   that no chip, label or arrow may enter. `top` and `copy` span the full width so long
   German compounds keep their measure. */
.destination-tile {
  --tile-pad: clamp(27px, 2.6vw, 39px);
  --motif-w: 184px;
  --motif-h: 138px;
  --motif-accent: #f08300;
  --motif-rest: 0.42;
  --motif-active: 0.95;
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 320px;
  grid-template-areas:
    'top top'
    'copy copy'
    'meta motif'
    'cta motif';
  grid-template-columns: minmax(0, 1fr) var(--motif-w);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
  padding: var(--tile-pad);
  color: #171715;
  background: #faf9f5;
  text-decoration: none;
  transition:
    color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    background-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-tile--education {
  --motif-w: min(36%, 283px);
  --motif-accent: #faf9f5;
  --motif-rest: 0.4;
  grid-column: span 2;
  grid-template-areas:
    'top top'
    'copy motif'
    'meta motif'
    'cta motif';
  min-height: 380px;
  background: #f08300;
}

/* The dark counterweight that closes the opening row next to the orange education tile. */
.destination-tile--pedagogy {
  --motif-w: 200px;
  --motif-h: 150px;
  --motif-rest: 0.5;
  min-height: 380px;
  color: #faf9f5;
  background: #171715;
}

/* Fachwissen, Smart City and Drohnen are regular light tiles — the mockup keeps the dark
   counterweight unique to Pädagogik. Their motifs are a touch smaller so the long German
   compounds („Fernpilotenzeugnis") keep their measure. */
.destination-tile--expertise,
.destination-tile--smart-city,
.destination-tile--drones {
  --motif-w: 166px;
  --motif-h: 124px;
}

/* Innovation carried its own darker paper (#efede7) since the first grid. Against the
   #faf9f5 of every other regular tile that one tile read as greyed out — a disabled state
   the tile does not have. It is a regular tile, so it keeps the regular tile background. */

/* The wide closing tile keeps a full-bleed image panel, so its motif stays out of flow
   and the copy column is capped instead. */
.destination-tile--rooms {
  --motif-accent: #f08300;
  --motif-rest: 0.5;
  grid-column: 1 / -1;
  grid-template-areas:
    'top'
    'copy'
    'meta'
    'cta';
  grid-template-columns: minmax(0, 1fr);
  min-height: 270px;
  background: #e7e4dc;
}

.destination-tile--rooms :is(.destination-copy, .destination-meta, .destination-footer) {
  max-width: min(54%, 620px);
}

.destination-tile--rooms.has-image::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    #e7e4dc 0%,
    rgba(231, 228, 220, 0.98) 38%,
    rgba(231, 228, 220, 0.18) 70%,
    transparent 100%
  );
  content: '';
  pointer-events: none;
}

.destination-grid:not(.is-visible) .destination-tile {
  opacity: 0;
  transform: translateY(18px);
}

.destination-grid.is-visible .destination-tile {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1) var(--tile-delay),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1) var(--tile-delay),
    color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    background-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-tile[href]:is(:hover, :focus-visible) {
  --motif-accent: #f08300;
  color: #faf9f5;
  background: #171715;
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) {
  --motif-accent: #faf9f5;
  color: #171715;
  background: #f08300;
}

.destination-tile:focus-visible {
  z-index: 4;
  outline: 3px solid #f08300;
  outline-offset: -5px;
}

.destination-tile--education:focus-visible {
  outline-color: #faf9f5;
}

.destination-tile--pedagogy:focus-visible {
  outline-color: #171715;
}

.destination-tile-top,
.destination-copy,
.destination-meta,
.destination-footer {
  position: relative;
  z-index: 3;
}

.destination-tile-top {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  grid-area: top;
  gap: 16px;
}

.destination-index {
  color: #67655f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.destination-tile--education .destination-index {
  color: #3a2918;
}

.destination-tile--pedagogy .destination-index,
.destination-tile[href]:is(:hover, :focus-visible) .destination-index {
  color: #f08300;
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) .destination-index {
  color: #3a2918;
}

.destination-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid #a7a39a;
  border-radius: 999px;
  padding: 4px 10px 3px;
  color: #5d5a53;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.destination-copy {
  grid-area: copy;
  max-width: 44ch;
  padding: clamp(20px, 2.2vw, 32px) 0 10px;
}

.destination-tile--education .destination-copy {
  max-width: 100%;
}

.destination-copy h3 {
  margin: 0;
  color: inherit;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: clamp(27px, 2.45vw, 35px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.destination-tile--education .destination-copy h3 {
  max-width: 18ch;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  overflow-wrap: normal;
  hyphens: none;
}

.destination-tile--information-security .destination-copy h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.045em;
  overflow-wrap: normal;
  hyphens: none;
}

.destination-tile--rooms .destination-copy h3 {
  font-size: clamp(34px, 4vw, 50px);
}

.destination-copy p {
  max-width: 39ch;
  margin: 15px 0 0;
  color: #55534d;
  font-size: 14px;
  line-height: 1.55;
}

.destination-tile--education .destination-copy p {
  color: rgba(23, 23, 21, 0.8);
  font-size: 15px;
}

.destination-tile--pedagogy .destination-copy p {
  color: #c9c6bd;
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-copy p {
  color: #d7d4cb;
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) .destination-copy p {
  color: rgba(23, 23, 21, 0.78);
}

.destination-meta {
  display: flex;
  align-self: end;
  flex-wrap: wrap;
  grid-area: meta;
  gap: 6px;
  padding-bottom: clamp(14px, 1.5vw, 22px);
}

/* Reine Deko-Labels: die ganze Kachel ist der eine Link auf ihre Themenseite. Ohne
   pointer-events sähen die Pillen wie eigene Buttons aus und würden ein zweites,
   feineres Ziel versprechen, das es nicht gibt. */
.destination-meta span {
  pointer-events: none;
  border: 1px solid #d1cec6;
  border-radius: 999px;
  padding: 5px 9px 4px;
  color: #5f5c55;
  background: rgba(250, 249, 245, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
  transition:
    opacity 260ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 340ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-tile--education .destination-meta span {
  border-color: rgba(23, 23, 21, 0.25);
  color: #171715;
  background: rgba(250, 249, 245, 0.24);
}

.destination-tile--pedagogy .destination-meta span {
  border-color: #55534d;
  color: #d7d4cb;
  background: rgba(250, 249, 245, 0.04);
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-meta span {
  border-color: rgba(240, 131, 0, 0.58);
  color: #f6a64a;
  background: rgba(240, 131, 0, 0.08);
  transform: translateY(-2px);
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-meta span:nth-child(2) {
  transition-delay: 35ms;
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-meta span:nth-child(3) {
  transition-delay: 70ms;
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-meta span:nth-child(4) {
  transition-delay: 105ms;
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) .destination-meta span {
  border-color: rgba(23, 23, 21, 0.28);
  color: #171715;
  background: rgba(250, 249, 245, 0.25);
}

.destination-footer {
  display: flex;
  align-items: center;
  grid-area: cta;
}

.destination-cta {
  color: #171715;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.destination-tile--pedagogy .destination-cta,
.destination-tile[href]:is(:hover, :focus-visible) .destination-cta {
  color: #f08300;
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) .destination-cta {
  color: #171715;
}

.destination-arrow {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: #171715;
  opacity: 0.58;
  transform: translate(-5px, 5px);
  transition:
    opacity 220ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 280ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The wide tile's arrow can sit over the photo, so it carries its own plate. */
.destination-tile--rooms .destination-arrow {
  background: rgba(231, 228, 220, 0.66);
}

.destination-tile--pedagogy .destination-arrow {
  color: #f08300;
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-arrow {
  border-color: #f08300;
  color: #faf9f5;
  background: #f08300;
  opacity: 1;
  transform: translate(0, 0);
}

.destination-tile--pedagogy[href]:is(:hover, :focus-visible) .destination-arrow {
  border-color: #171715;
  color: #f08300;
  background: #171715;
}

/* Decorative motion layer. Real copy never changes or moves. */
.destination-motion {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--motif-w);
  height: var(--motif-h);
  grid-area: motif;
  place-self: end;
  place-items: center end;
  color: currentColor;
  opacity: var(--motif-rest);
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-motion svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One optical stroke weight across every tile size. */
.destination-motion svg :is(path, rect, circle, ellipse, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.destination-motion svg g {
  transform-box: fill-box;
  transform-origin: center;
}

.destination-tile--education .destination-motion {
  width: 100%;
  height: auto;
  align-self: center;
}

.destination-tile--education .destination-motion svg {
  height: auto;
  stroke-width: 1.75;
}

.destination-tile--rooms .destination-motion {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(46%, 560px);
  height: auto;
  grid-area: auto;
  place-self: auto;
}

.destination-tile--rooms .destination-motion svg {
  position: absolute;
  inset: max(24%, 84px) 6% 8% 4%;
  z-index: 1;
  width: auto;
  height: auto;
  stroke-width: 1.6;
}

.destination-tile[href]:is(:hover, :focus-visible) .destination-motion {
  opacity: var(--motif-active);
}

.destination-room-image {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: min(46%, 560px);
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  transform: scale(1.02);
  transition:
    opacity 300ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 450ms cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-tile--rooms[href]:is(:hover, :focus-visible) .destination-room-image {
  opacity: 0.58;
  transform: scale(1.055);
}

/* --- Motif accents (resolved state; this is also what touch and reduced-motion get) --- */
.motion-node-core,
.motion-cap-bead,
.motion-idea-core,
.motion-bubble-dot,
.motion-lock-core {
  fill: var(--motif-accent);
  stroke: none;
}

.motion-ai-spark {
  fill: var(--motif-accent);
  stroke: none;
}

.motion-idea-center,
.motion-module--2 {
  fill: var(--motif-accent);
  fill-opacity: 0.9;
  stroke: none;
}

.motion-shield {
  fill: var(--motif-accent);
  fill-opacity: 0.14;
}

.motion-redaction {
  fill: currentColor;
  fill-opacity: 0.82;
  stroke: none;
}

.motion-seats circle {
  fill: var(--motif-accent);
  fill-opacity: 0.8;
  stroke: none;
}

.motion-board {
  stroke: var(--motif-accent);
  stroke-width: 3;
}

.motion-security-pulse {
  opacity: 0.32;
}

.motion-track {
  opacity: 0.3;
}

.motion-play {
  fill: var(--motif-accent);
}

.motion-progress {
  opacity: 0.3;
}

.motion-progress-fill {
  stroke: var(--motif-accent);
}

.motion-line--education {
  stroke: var(--motif-accent);
}

.motion-grid-rails,
.motion-idea-links,
.motion-floorplan-swing {
  opacity: 0.45;
}

/* Innovation — the glass carries the accent, the fitting stays quiet line art. */
.motion-idea-filament {
  opacity: 0.75;
}

.motion-idea-thread {
  opacity: 0.5;
}

.motion-lock-body {
  fill: currentColor;
  fill-opacity: 0.06;
}

/* Fachwissen — the top plate of the stack is the one you open. */
.motion-stack-plate {
  fill: currentColor;
  fill-opacity: 0.05;
}

.motion-stack-plate--3 {
  fill: var(--motif-accent);
  fill-opacity: 0.9;
  stroke: none;
}

.motion-stack-mark {
  opacity: 0.55;
}

/* Smart City — the roofs are sensors, the link between them is the accent. */
.motion-city-block {
  fill: currentColor;
  fill-opacity: 0.06;
}

.motion-city-ground {
  opacity: 0.35;
}

.motion-city-link {
  stroke: var(--motif-accent);
}

.motion-city-node {
  fill: var(--motif-accent);
  stroke: none;
}

/* Drohnen — the airframe stays line art, the telemetry is the accent. */
.motion-drone-body {
  fill: currentColor;
  fill-opacity: 0.06;
}

/* Plan view: the swept area is a flat disc, the blade bar and the hub sit inside it. */
.motion-drone-disc {
  fill: currentColor;
  fill-opacity: 0.05;
}

.motion-drone-blade {
  opacity: 0.85;
}

.motion-drone-hub {
  fill: currentColor;
  fill-opacity: 0.55;
  stroke: none;
}

.motion-drone-arc {
  stroke: var(--motif-accent);
}

.motion-drone-station {
  fill: var(--motif-accent);
  stroke: none;
}

/* Räume — the partition is retracted and the room is in use. */
.motion-door {
  fill: currentColor;
  fill-opacity: 0.08;
}

.motion-door--left {
  transform: translateX(-27px);
}

.motion-door--right {
  transform: translateX(27px);
}

/* --- Latent state. Only pointer devices that accept motion ever see it; touch and
       reduced-motion render the resolved composition above. Every rule is scoped to
       `:not(:hover, :focus-visible)` so no hover rule has to out-specify a reset. --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .destination-motion svg :is(path, rect, circle, ellipse, g) {
    transition:
      opacity 260ms cubic-bezier(0.25, 1, 0.5, 1),
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      fill-opacity 300ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Education — the path draws through its stations, the qualification drops in. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-line--education {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-node {
    opacity: 0.6;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-node-core {
    transform: scale(0.34);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-cap {
    opacity: 0.55;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-cap-drop {
    opacity: 0.25;
  }

  .destination-tile--education[href]:is(:hover, :focus-visible) .motion-node--2 {
    transition-delay: 55ms;
  }

  .destination-tile--education[href]:is(:hover, :focus-visible) .motion-node--3 {
    transition-delay: 110ms;
  }

  /* KI — the spark ignites, the answer writes itself. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-ai-spark {
    opacity: 0.5;
    transform: scale(0.82) rotate(-18deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-ai-line {
    opacity: 0.55;
    transform: scaleX(0.62);
    transform-origin: left center;
  }

  .destination-tile--ai[href]:is(:hover, :focus-visible) .motion-ai-spark--sm {
    transition-delay: 70ms;
  }

  .destination-tile--ai[href]:is(:hover, :focus-visible) .motion-ai-line--2 {
    transition-delay: 55ms;
  }

  .destination-tile--ai[href]:is(:hover, :focus-visible) .motion-ai-line--3 {
    transition-delay: 110ms;
  }

  /* Digitalisierung — loose modules snap onto the grid. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-grid-rails {
    opacity: 0.1;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module {
    opacity: 0.7;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--1 {
    transform: translate(-7px, -6px) rotate(-8deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--2 {
    fill-opacity: 0.3;
    transform: translate(5px, -8px) rotate(7deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--3 {
    transform: translate(8px, -4px) rotate(9deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--4 {
    transform: translate(-6px, 7px) rotate(6deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--5 {
    transform: translate(4px, 9px) rotate(-5deg);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-module--6 {
    transform: translate(9px, 6px) rotate(-9deg);
  }

  /* Social Media — posts land, the reply follows. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-post {
    opacity: 0.62;
    transform: translateX(-10px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-bubble {
    opacity: 0.35;
    transform: scale(0.86);
  }

  .destination-tile--social-media[href]:is(:hover, :focus-visible) .motion-post--2 {
    transition-delay: 55ms;
  }

  .destination-tile--social-media[href]:is(:hover, :focus-visible) .motion-bubble {
    transition-delay: 120ms;
  }

  /* Informationssicherheit — traffic converges, the shield verifies. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-security-network {
    opacity: 0.62;
    transform: scale(1.05);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-shield {
    fill-opacity: 0;
    transform: scale(0.92);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-shield-check {
    opacity: 0;
    transform: translateY(6px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-security-pulse {
    opacity: 0;
    transform: scale(0.62);
  }

  .destination-tile--information-security[href]:is(:hover, :focus-visible)
    .motion-shield-check {
    transition-delay: 110ms;
  }

  /* Datenschutz — the lock closes, the sensitive spans black out. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-data-lines {
    opacity: 0.9;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-redaction {
    fill-opacity: 0;
    transform: translateX(-14px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-lock {
    opacity: 0.7;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-lock-shackle {
    transform: translateY(-9px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-lock-body {
    fill-opacity: 0;
  }

  .destination-tile--privacy[href]:is(:hover, :focus-visible) .motion-redaction--2 {
    transition-delay: 65ms;
  }

  .destination-tile--privacy[href]:is(:hover, :focus-visible) .motion-redaction--3 {
    transition-delay: 130ms;
  }

  /* Pädagogik — the lesson starts on the board, the course runs through. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-screen {
    opacity: 0.72;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-play {
    fill-opacity: 0;
    transform: scale(0.84);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-progress-fill {
    transform: scaleX(0.16);
    transform-origin: left center;
  }

  .destination-tile--pedagogy[href]:is(:hover, :focus-visible) .motion-progress-fill {
    transition-delay: 70ms;
  }

  /* Innovation — four themes gather around one core. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea {
    opacity: 0.65;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea--1 {
    transform: translate(-11px, -9px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea--2 {
    transform: translate(11px, -9px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea--3 {
    transform: translate(-11px, 9px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea--4 {
    transform: translate(11px, 9px);
  }

  /* The glass dims and the whole bulb shrinks as ONE element — scaling the accent disc on
     its own would slide it out of its own outline. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea-center {
    fill-opacity: 0.22;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea-bulb {
    opacity: 0.75;
    transform: scale(0.74);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-idea-links {
    opacity: 0.12;
  }

  /* Fachwissen — the stack sits closed; hovering fans the subject layers apart. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-stack-plate--1 {
    opacity: 0.7;
    transform: translate(16px, -22px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-stack-plate--2 {
    opacity: 0.85;
    transform: translate(8px, -11px);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-stack-plate--3 {
    fill-opacity: 0.24;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-stack-mark {
    opacity: 0;
  }

  .destination-tile--expertise[href]:is(:hover, :focus-visible) .motion-stack-plate--2 {
    transition-delay: 55ms;
  }

  .destination-tile--expertise[href]:is(:hover, :focus-visible) .motion-stack-mark {
    transition-delay: 130ms;
  }

  /* Smart City — single buildings; hovering connects them into one network. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-city-link {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-city-node {
    transform: scale(0.34);
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-city-block {
    fill-opacity: 0;
  }

  .destination-tile--smart-city[href]:is(:hover, :focus-visible) .motion-city-node--2 {
    transition-delay: 55ms;
  }

  .destination-tile--smart-city[href]:is(:hover, :focus-visible) .motion-city-node--3 {
    transition-delay: 110ms;
  }

  .destination-tile--smart-city[href]:is(:hover, :focus-visible) .motion-city-node--4 {
    transition-delay: 165ms;
  }

  /* Drohnen — the copter lifts off and the ground station picks the signal up. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-drone {
    transform: translateY(8px);
  }

  /* A disc seen from above spools up evenly — squashing one axis would fake a tilt the
     plan view does not have. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-drone-rotor {
    opacity: 0.6;
    transform: scale(0.78);
  }

  /* The innermost arc stays faintly lit at rest so the ground station never reads as a
     stray dot; the outer two are what the hover resolves. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-drone-arc {
    opacity: 0.3;
    transform: scale(0.72);
    transform-origin: bottom right;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-drone-arc--2,
  .destination-tile[href]:not(:hover, :focus-visible) .motion-drone-arc--3 {
    opacity: 0;
  }

  .destination-tile--drones[href]:is(:hover, :focus-visible) .motion-drone-arc--2 {
    transition-delay: 70ms;
  }

  .destination-tile--drones[href]:is(:hover, :focus-visible) .motion-drone-arc--3 {
    transition-delay: 140ms;
  }

  /* Räume — the partition closes the room again. */
  .destination-tile[href]:not(:hover, :focus-visible) .motion-floorplan {
    opacity: 0.82;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-board {
    opacity: 0.55;
  }

  .destination-tile[href]:not(:hover, :focus-visible) .motion-seats circle {
    fill-opacity: 0;
    transform: scale(0.4);
  }

  .destination-tile[href]:not(:hover, :focus-visible) :is(.motion-door--left, .motion-door--right) {
    transform: none;
  }

  .destination-tile--rooms[href]:is(:hover, :focus-visible) .motion-seats circle:nth-child(3n + 2) {
    transition-delay: 70ms;
  }

  .destination-tile--rooms[href]:is(:hover, :focus-visible) .motion-seats circle:nth-child(3n) {
    transition-delay: 140ms;
  }
}

@media (max-width: 1024px) {
  .destinations-head {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .destinations-title {
    max-width: 17ch;
  }

  /* Two columns; education and rooms keep their full-width spans from the base rules. */
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .destination-tile {
    --motif-w: 136px;
    --motif-h: 102px;
  }

  .destination-tile--education {
    --motif-w: min(32%, 240px);
    min-height: 355px;
  }

  .destination-tile--pedagogy {
    --motif-w: 150px;
    --motif-h: 118px;
    min-height: 310px;
  }

  .destination-tile--expertise,
  .destination-tile--smart-city,
  .destination-tile--drones {
    --motif-w: 124px;
    --motif-h: 94px;
  }

  /* Education eats a whole row and rooms closes the grid full-width, so the tiles in
     between must be even in number or the last one leaves a hole above rooms. That happens
     at exactly the odd published counts the two-release rollout allows (nine today, eleven
     mid-migration); there Innovation — always the last regular tile — spans instead and
     earns the side-by-side motif. Twelve and ten need no exception. */
  .destination-grid[data-count='9'] .destination-tile--innovation,
  .destination-grid[data-count='11'] .destination-tile--innovation {
    --motif-w: min(30%, 236px);
    grid-column: span 2;
    grid-template-areas:
      'top top'
      'copy motif'
      'meta motif'
      'cta motif';
    min-height: 250px;
  }

  .destination-grid[data-count='9'] .destination-tile--innovation .destination-motion,
  .destination-grid[data-count='11'] .destination-tile--innovation .destination-motion {
    width: 100%;
    height: auto;
    align-self: center;
  }

  .destination-grid[data-count='9'] .destination-tile--innovation .destination-motion svg,
  .destination-grid[data-count='11'] .destination-tile--innovation .destination-motion svg {
    height: auto;
  }
}

@media (max-width: 640px) {
  .destinations-section {
    padding: 72px 0 52px;
  }

  .destinations-head {
    margin-bottom: 34px;
  }

  /* Undo the legacy mobile nav's broad `header > div:first-child` height rule. */
  .destinations-head > div:first-child {
    height: auto !important;
  }

  .destinations-title {
    max-width: 100%;
    font-size: clamp(36px, 10.5vw, 46px);
  }

  .destinations-intro {
    font-size: 15px;
  }

  .destination-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 18px;
  }

  /* One column: the education/rooms/innovation spans would open an implicit second
     column, so every tile is reset to plain flow placement. */
  .destination-tile {
    --motif-w: 106px;
    --motif-h: 80px;
    grid-area: auto !important;
    min-height: 288px;
    padding: 28px 22px;
  }

  /* Too narrow for a side-by-side motif — fall back to the stacked tile layout. */
  .destination-tile--education {
    --motif-w: 118px;
    --motif-h: 89px;
    grid-template-areas:
      'top top'
      'copy copy'
      'meta motif'
      'cta motif';
    min-height: 350px;
  }

  .destination-tile--education .destination-motion {
    width: var(--motif-w);
    height: var(--motif-h);
    align-self: end;
  }

  .destination-tile--education .destination-motion svg {
    height: 100%;
  }

  .destination-tile--pedagogy {
    --motif-w: 118px;
    --motif-h: 92px;
    min-height: 310px;
  }

  .destination-tile--innovation,
  .destination-tile--rooms {
    min-height: 290px;
  }

  .destination-tile--rooms :is(.destination-copy, .destination-meta, .destination-footer) {
    max-width: 100%;
  }

  .destination-copy,
  .destination-tile--education .destination-copy {
    max-width: 100%;
  }

  .destination-copy h3 {
    max-width: 14ch;
    font-size: 29px;
  }

  .destination-tile--education .destination-copy h3 {
    font-size: clamp(30px, 9vw, 46px);
  }

  .destination-tile--information-security .destination-copy h3 {
    font-size: clamp(24px, 7vw, 28px);
  }

  .destination-tile--rooms .destination-copy h3 {
    font-size: 36px;
  }

  .destination-copy p {
    max-width: 34ch;
  }

  .destination-tile--rooms {
    grid-template-areas:
      'top top'
      'copy copy'
      'meta motif'
      'cta motif';
    grid-template-columns: minmax(0, 1fr) var(--motif-w);
  }

  .destination-tile--rooms .destination-motion {
    position: relative;
    inset: auto;
    width: var(--motif-w);
    height: var(--motif-h);
    grid-area: motif;
    place-self: end;
  }

  .destination-tile--rooms .destination-motion svg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
  }

  .destination-room-image {
    inset: auto 0 0 0;
    width: 100%;
    height: 54%;
  }

  .destination-tile--rooms.has-image::after {
    background: linear-gradient(
      180deg,
      #e7e4dc 0%,
      rgba(231, 228, 220, 0.92) 55%,
      rgba(231, 228, 220, 0.54) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .destination-grid .destination-tile,
  .destination-grid.is-visible .destination-tile,
  .destination-tile *,
  .destination-tile *::before,
  .destination-tile *::after {
    animation: none !important;
    transition: none !important;
  }

  .destination-grid:not(.is-visible) .destination-tile,
  .destination-grid.is-visible .destination-tile {
    opacity: 1;
    transform: none;
  }
}