/* Mobile review, 12 October 2026: generous artwork and a vertical task list. */
@media (max-width: 800px) {
  .benefit-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .benefit-bento .bento-tile { grid-column: auto; display: block; min-height: 0; }
  .benefit-bento .bento-copy { display: block; padding: 28px; }
  .benefit-bento .bento-kicker { max-width: none; margin-bottom: 24px; font-size: 10px; }
  .benefit-bento .bento-number { margin: 0 0 18px; font-size: 100px; }
  .benefit-bento .bento-holiday .bento-number { font-size: 124px; }
  .benefit-bento .bento-copy h3 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
  .benefit-bento .bento-copy > p:not(.bento-kicker) { max-width: none; font-size: 15px; line-height: 1.65; }
  .benefit-bento .bento-drawing {
    position: absolute; z-index: 0; inset: auto -28px -18px auto;
    width: min(100%, 400px); height: auto; aspect-ratio: 300 / 220;
    min-height: 0; max-height: none; padding: 0 !important;
    opacity: .58; pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  }
  .benefit-bento .bento-tile .architect-drawing {
    width: 100% !important; height: 100%; max-width: none; max-height: none;
  }
  .benefit-bento .bento-holiday .bento-drawing { bottom: 60px; }
  .benefit-bento .bento-salary .bento-drawing { bottom: -24px; }
  .benefit-bento .bento-photo { margin-top: 0; }

  .conditions { grid-template-columns: minmax(0, 1fr); }
  .conditions > div {
    position: relative; isolation: isolate; overflow: hidden;
    grid-column: auto; min-height: 210px; padding: 28px; gap: 24px;
  }
  .conditions .condition-start, .conditions .condition-pay { grid-column: auto; min-height: 210px; }
  .conditions dt { font-size: 10px; }
  .conditions dt, .conditions dd:not(.condition-drawing) { position: relative; z-index: 1; }
  .conditions dd.condition-drawing {
    position: absolute; z-index: 0; right: -20px; bottom: -20px;
    width: min(90%, 350px); margin: 0; opacity: .45; pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 75%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
  }

  #aufgaben .services-scroll { height: auto; }
  #aufgaben .services-stage { position: static; padding-block: 64px; }
  #aufgaben .services-intro { padding-bottom: 36px; }
  #aufgaben .services-viewport {
    overflow: visible; scroll-snap-type: none; scroll-padding: 0;
  }
  #aufgaben .basis-service-grid {
    width: 100%; grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr); gap: 56px;
    padding-inline: var(--gutter);
  }
  #aufgaben .basis-service { scroll-snap-align: none; }
  #aufgaben .basis-service-card {
    display: flex; flex-direction: column; gap: 0; min-height: 0;
    padding: 0; background: transparent; border: 0; border-radius: 0;
    overflow: visible;
  }
  #aufgaben .task-picture { order: 0; width: 100%; border-radius: 20px; overflow: hidden; }
  #aufgaben .task-picture img {
    display: block; position: static; width: 100%; height: auto;
    aspect-ratio: 3 / 2; object-fit: contain;
  }
  #aufgaben .task-caption { order: 1; padding: 24px 0 0; gap: 12px; }
  #aufgaben .task-index { font-size: 10px; letter-spacing: .06em; }
  #aufgaben .basis-service-card h3 {
    padding: 0; font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2;
    letter-spacing: -.035em; font-weight: 600; hyphens: none;
  }
  #aufgaben .basis-service-description { padding: 20px 0 0; }
  #aufgaben .task-list { font-size: 16px; line-height: 1.65; padding-left: 18px; }
  #aufgaben .task-list li + li { margin-top: 10px; }
  #aufgaben .services-gallery-controls { display: none; }
}