/** ChallengeFlow: 30-responsive.css */
@layer responsive {
  @media (min-width: 560px) {
    .detail-grid:not(.challenge-detail-grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 900px) {
    .feed-head-row {
      flex-direction: column;
    }
    .feed-head-actions {
      width: 100%;
      justify-content: space-between;
    }
    .topbar-inner {
      padding: 0 12px;
      gap: 12px;
    }
    .nav button {
      padding: 0 9px;
    }
    .nav button em {
      display: none;
    }
    .app {
      padding: 30px 18px 64px;
    }
    .app.challenge-detail-shell {
      padding-top: 8px;
    }
    .challenge-detail-page, .country-page, .mine-page,
    .feed.update-feed, .feed.challenge-feed-discover {
      max-width: 760px;
    }
    .update-photo-modal {
      --photo-modal-content-width: calc(100vw - 124px);
      --photo-modal-media-height: min(68dvh,calc(100dvh - 104px),720px);
      width: 100vw;
      min-height: 100dvh;
      height: auto;
      max-height: none;
    }
    .challenge-photo-modal {
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
    }
    .photo-modal-stage {
      padding-inline: 10px;
    }
    .challenge-photo-modal .photo-modal-stage {
      padding: 52px 14px 16px;
    }
  }
  @media (max-width: 1079px) {
    .detail-timeline-area {
      z-index: 1180;
    }
    .detail-timeline-scrim {
      position: absolute;
      inset: 0;
      display: block;
      border: 0;
      background: rgba(0,0,0,.42);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }
    .detail-timeline-area.is-open {
      pointer-events: auto;
    }
    .detail-timeline-area.is-open .detail-timeline-scrim {
      opacity: 1;
      pointer-events: auto;
    }
    .detail-timeline-rail {
      top: 8px;
      right: 8px;
      width: min(340px,calc(100vw - 16px));
      max-height: calc(100dvh - var(--topbar-height) - 16px);
      border-radius: 0;
    }
    .detail-timeline-list {
      max-height: calc(100dvh - var(--topbar-height) - 80px);
    }
    .mine-filter-bar {
      grid-template-columns: minmax(220px,1fr) auto;
    }
    .mine-view-switcher {
      grid-column: 1 / -1;
      justify-self: end;
    }
  }
  @media (max-width: 760px) {
    .detail-timeline-rail {
      max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height,82px) - 24px - env(safe-area-inset-bottom));
    }
    .detail-timeline-list {
      max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height,82px) - 88px - env(safe-area-inset-bottom));
    }
    .detail-timeline-trigger {
      top: calc(50% - var(--mobile-nav-height,82px) / 2);
      width: 42px;
      min-width: 42px;
      height: 50px;
      border-radius: 0;
    }
    .view-back-control {
      top: calc(var(--topbar-height) + 8px);
      left: 8px;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      box-shadow: none;
    }
    .view-back-control span { display: none; }
    .view-back-control.is-inline {
      width: auto;
      min-width: 0;
      height: 42px;
      padding: 0 12px 0 10px;
    }
    .view-back-control.is-inline span { display: inline; }
    .form-row {
      grid-template-columns: 1fr;
    }
    .feed-head-actions {
      align-items: stretch;
      flex-direction: column;
    }
    .feed-head-actions .discover-view-switcher {
      width: 100%;
      justify-content: space-between;
    }
    .feed-head-actions .discover-view-button {
      flex: 1 1 0;
      width: auto;
    }
    .segmented-control {
      width: 100%;
      justify-content: space-between;
    }
    .segment-button {
      flex: 1 1 0;
      min-width: 0;
    }
    .photo-modal-overlay {
      padding: 0;
    }
    .photo-modal .photo-counter {
      top: 12px;
      left: 50%;
    }
    .photo-modal-controls {
      top: max(12px,env(safe-area-inset-top));
      left: max(12px,env(safe-area-inset-left));
      right: max(12px,env(safe-area-inset-right));
    }
    .photo-modal-back {
      min-height: 44px;
      padding: 0 12px 0 10px;
    }
    .photo-modal .photo-modal-close {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }
    .lightbox {
      padding: 68px 10px 18px;
    }
    .lightbox-content {
      width: calc(100vw - 20px);
    }
    .lightbox-close {
      top: max(12px,env(safe-area-inset-top));
      right: max(12px,env(safe-area-inset-right));
    }
    .lightbox-image-stage, .lightbox img {
      border-radius: 0;
    }
    .panel {
      padding: 20px;
    }
    .compact-panel {
      padding: 18px;
      margin-bottom: 14px;
    }
    .feed-intro h1 {
      font-size: 28px;
    }
    .feed-intro>.row {
      gap: 12px;
    }
    .feed-intro>.row>.actionbar {
      justify-content: flex-end;
    }
    .feed-filter-grid {
      grid-template-columns: 1fr;
    }
    .feed-filter-reset {
      justify-content: center;
      grid-column: auto;
      width: 100%;
    }
    .update-card {
      padding: 10px;
      border-radius: 0;
    }
    .update-header {
      padding: 4px 4px 0;
    }
    .update-copy {
      margin-inline: 6px;
    }
    .update-card>.actionbar {
      padding-inline: 4px;
      gap: 6px;
      flex-wrap: wrap;
      overflow-x: visible;
      scrollbar-width: none;
    }
    .update-card>.actionbar::-webkit-scrollbar {
      display: none;
    }
    .icon-button {
      min-width: 44px;
      min-height: 44px;
      padding: 0 10px;
    }

    /* Entdecken nutzt auf dem Telefon dieselbe Inhaltsbreite wie „Meine“.
       Die karteninterne, bildbetonte Darstellung bleibt davon unberuehrt. */
    .feed.update-feed,
    .feed.challenge-feed-discover {
      max-width: 100%;
      margin-inline: auto;
    }
    .feed.update-feed > .update-card {
      margin-bottom: 12px;
      padding: 0 0 6px;
      border-radius: 0;
      border-inline: 0;
      box-shadow: none;
    }
    .feed.update-feed > .update-card > .update-header {
      margin-bottom: 0;
      padding: 12px 14px 11px;
    }
    .feed.update-feed > .update-card > .update-copy {
      margin: 2px 14px 12px;
    }
    .feed.update-feed > .update-card > .actionbar {
      padding: 10px 10px 2px;
      border-top: 0;
    }
    .feed.update-feed > .update-card .media-carousel,
    .feed.update-feed > .update-card .media-strip,
    .feed.update-feed > .update-card .update-text-poster {
      border-radius: 0;
    }
    .feed.update-feed > .update-card .media-strip,
    .feed.update-feed > .update-card .media-frame {
      max-height: min(680px,78vh);
    }
    .feed.update-feed > .update-card .update-fallback,
    .feed.update-feed > .update-card .update-text-poster {
      border-radius: 0;
      margin-bottom: 0;
    }
    .feed.update-feed > .update-card > .actionbar .icon-button {
      min-width: 52px;
      min-height: 46px;
    }
    .feed.update-feed > .update-card > .actionbar .icon-button-symbol {
      width: 22px;
      height: 22px;
    }
    .feed.update-feed > .update-card > .update-text-poster {
      min-height: 0;
      max-height: min(680px,78vh);
      aspect-ratio: 4/5;
      border-inline: 0;
    }
    .feed.update-feed > .update-card > .update-text-poster .update-text-poster-inner {
      padding: 26px 24px 28px 34px;
    }
    .feed.update-feed > .update-card > .update-text-poster .update-text-poster-title {
      font-size: clamp(27px,8.5vw,39px);
    }
    .feed.update-feed > .update-card > .update-text-poster .update-text-poster-progress strong {
      font-size: clamp(72px,23vw,108px);
    }
    .grid.challenge-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .challenge-card .photo, .challenge-card .image-fallback {
      min-height: 250px;
      aspect-ratio: 5/4;
    }
    .media-arrow {
      width: 34px;
      height: 48px;
      border-radius: 0;
    }
    .media-arrow-left {
      left: 8px;
    }
    .media-arrow-right {
      right: 8px;
    }
    .challenge-card:hover {
      transform: none;
    }
    .challenge-detail-page {
      padding-top: 0;
    }
    .challenge-hero {
      padding: 20px;
    }
    .challenge-detail-surface {
      padding: 20px 16px 24px;
      border-radius: 0;
    }
    .challenge-detail-gallery {
      margin: 18px 0 16px;
    }
    .challenge-detail-gallery .media-strip.is-detail-media .media-frame {
      height: min(52vh,500px);
      min-height: 260px;
    }
    .update-detail-gallery {
      margin: 18px 0 16px;
    }
    .update-detail-gallery .media-strip.is-detail-media .media-frame {
      height: min(62vh,620px);
      min-height: 280px;
    }
    .hero-row {
      flex-direction: column;
      align-items: stretch;
    }
    .hero-row h1 {
      font-size: 28px;
    }
    .hero-actions {
      width: 100%;
      justify-content: flex-start;
    }
    .challenge-detail-page .challenge-detail-actions {
      margin-top: 12px;
      padding-top: 12px;
    }
    .challenge-detail-page .detail-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .challenge-detail-page .challenge-detail-goal-row p {
      font-size: 17px;
    }
    .challenge-detail-more-content .challenge-detail-copy-row {
      margin-top: 18px;
      padding-top: 16px;
    }
    .challenge-detail-more-toggle {
      margin-top: 18px;
    }
    .stats-grid {
      grid-template-columns: repeat(2,1fr);
    }
    .login-card {
      padding: 28px 22px;
    }
    .auth-shell {
      padding: 5vh 0;
    }
    .toast {
      bottom: calc(90px + env(safe-area-inset-bottom));
    }
    .photo-modal-challenge-link {
      font-size: 16px;
    }
    .photo-modal-summary {
      padding-bottom: 18px;
    }
    .photo-modal-comments-head {
      min-height: 46px;
      padding-block: 9px 8px;
    }
    .mine-overview-row {
      align-items: flex-start;
      flex-direction: column;
    }
    .mine-overview-row .actionbar {
      width: 100%;
      justify-content: flex-start;
    }
    .mine-filter-bar {
      grid-template-columns: 1fr;
    }
    .mine-scope-filter {
      justify-content: flex-start;
    }
    .mine-category-header {
      min-height: 62px;
      padding: 10px 12px;
      border-radius: 0;
    }
    .mine-category-heading p {
      display: none;
    }
    .mine-section-empty {
      align-items: flex-start;
      flex-direction: column;
    }
    .update-photo-modal {
      --photo-modal-content-width: calc(100vw - 96px);
      --photo-modal-media-height: min(66dvh,calc(100dvh - 96px),640px);
      width: 100%;
      min-height: 100dvh;
      height: auto;
      max-height: none;
      border-radius: 0;
    }
    .challenge-photo-modal {
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
    }
    .photo-modal-overview {
      min-height: 100dvh;
    }
    .photo-modal-stage {
      min-height: 360px;
      padding: 48px 2px 8px;
    }
    .photo-modal-viewer,
    .challenge-photo-modal .photo-modal-viewer {
      grid-template-columns: 40px minmax(0,1fr) 40px;
      gap: 2px;
    }
    .photo-modal-nav-slot,
    .challenge-photo-modal .photo-modal-nav-slot {
      width: 40px;
    }
    .photo-modal-nav-placeholder,
    .challenge-photo-modal .photo-modal-nav-placeholder {
      width: 38px;
      height: 38px;
    }
    .photo-modal .photo-modal-nav-slot .media-arrow {
      width: 38px;
      height: 38px;
    }
    .photo-modal-context {
      padding-block: 15px 13px;
    }
    .photo-modal-caption,
    .photo-modal-update-copy {
      padding-block: 15px;
    }
    .photo-modal-actions {
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }
    .photo-modal-actions::-webkit-scrollbar { display: none; }
    .challenge-photo-modal .photo-modal-stage {
      min-height: 0;
      padding: 48px 2px 10px;
    }
    .challenge-photo-modal .photo-modal-img {
      max-height: calc(100dvh - 96px);
    }
  }
  @media (max-width: 620px) {
    .update-notify-row {
      align-items: flex-start;
      gap: 12px;
    }
    .update-photo-modal {
      --photo-modal-content-width: calc(100vw - 28px);
      --photo-modal-media-height: min(60dvh,calc(100dvh - 88px),520px);
    }
    .photo-modal-stage {
      min-height: 320px;
      padding: 48px 2px 10px;
    }
    .photo-modal-viewer {
      grid-template-columns: 34px minmax(0,1fr) 34px;
      gap: 0;
    }
    .photo-modal-nav-slot { width: 34px; }
    .photo-modal-nav-placeholder,
    .photo-modal .photo-modal-nav-slot .media-arrow {
      width: 32px;
      height: 38px;
    }
    .photo-modal-summary,
    .photo-modal-comments {
      padding-inline: 14px;
    }
    .photo-modal-actions {
      min-height: 58px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }
    .photo-modal-actions::-webkit-scrollbar { display: none; }
    .photo-modal-actions .icon-button {
      min-width: 46px;
      min-height: 40px;
    }
    .photo-modal-context {
      justify-items: start;
      text-align: left;
    }
    .photo-modal-challenge-link { text-align: left; }
    .photo-modal-meta-row { justify-content: flex-start; }
    .photo-modal-comment-input {
      grid-template-columns: minmax(0,1fr) 40px;
      gap: 8px;
    }
  }

  @media (max-width: 480px) {
    .upload-preview {
      grid-template-columns: 1fr;
    }
    .feed-filter-grid {
      grid-template-columns: 1fr;
    }
    .feed-filter-reset {
      grid-column: auto;
    }
    .mine-scope-filter {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      width: 100%;
    }
    .mine-scope-button {
      min-width: 0;
      padding-inline: 8px;
      gap: 5px;
    }
    .mine-scope-button span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  @media (max-width: 430px) {
    .challenge-detail-page {
      padding-bottom: 48px;
    }
    .challenge-hero {
      padding: 12px;
    }
    .challenge-detail-surface {
      padding: 18px 14px 22px;
      border-radius: 0;
    }
    .hero-row h1 {
      font-size: 27px;
      line-height: 1.05;
    }
    .challenge-detail-meta {
      font-size: 13px;
      align-items: flex-start;
    }
    .challenge-detail-dates {
      flex-wrap: wrap;
    }
    .hero-actions {
      gap: 6px;
    }
    .challenge-detail-actions {
      justify-content: flex-start;
    }
    .hero-actions .icon-button {
      flex: 0 0 auto;
      justify-content: center;
      min-width: 46px;
      padding-inline: 9px;
    }
    .challenge-detail-actions .vote-control {
      flex: 0 0 auto;
      justify-content: center;
      margin-left: auto;
    }
    .challenge-detail-gallery .media-strip.is-detail-media .media-frame {
      height: min(48vh,345px);
      min-height: 220px;
    }
    .update-detail-gallery .media-strip.is-detail-media .media-frame {
      height: min(58vh,420px);
      min-height: 238px;
    }
    .update-detail-gallery .update-text-poster.is-detail-text-poster {
      min-height: min(68vh,560px);
    }
    .challenge-detail-gallery .media-strip.is-detail-media .update-photo {
      border-radius: 0;
      filter: drop-shadow(0 18px 38px rgba(0,0,0,.5));
    }
    .update-detail-gallery .media-strip.is-detail-media .update-photo {
      border-radius: 0;
      filter: drop-shadow(0 18px 38px rgba(0,0,0,.5));
    }
    .challenge-detail-page .challenge-stream-area > .create-update-panel,
    .challenge-detail-page .challenge-stream-area > .compact-panel,
    .challenge-detail-page .timeline-content > .update-card,
    .challenge-detail-page .timeline-content > .panel {
      border-radius: 0;
    }
    .feed-intro>.row {
      display: grid;
    }
    .feed-intro>.row>.actionbar {
      justify-content: flex-start;
    }
    .primary-action, .pill-button, .ghost-button {
      min-height: 40px;
    }
    .media-strip, .media-frame {
      max-height: 58vh;
    }
  }

  @media (max-width: 760px) {
    :root {
      --topbar-height: 58px;
      --mobile-nav-height: 82px;
    }

    body { padding-bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom)); }
    body.world-view { padding-bottom: 0; overflow: hidden; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      height: var(--topbar-height);
      background: var(--topbar);
      color: var(--text);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .topbar-inner {
      width: 100%;
      height: 100%;
      padding: 0 12px;
      display: grid;
      grid-template-columns: auto minmax(0,1fr) auto auto;
      align-items: center;
      gap: 8px;
    }
    .theme-toggle {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      margin-left: 0;
      width: 38px;
      height: 38px;
      border-radius: 0;
    }
    .app-brand { min-width: 0; grid-column: 1; grid-row: 1; }
    .app-brand strong { display: none; }
    .view-title {
      display: none;
      min-width: 0;
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
    }
    /* Erstellen und Update wandern auf dem Telefon aus der Kopfleiste
       heraus an den unteren rechten Rand, direkt ueber die Tableiste und
       damit in den Daumenbereich. */
    .header-primary-actions {
      position: fixed;
      top: auto;
      left: auto;
      right: 14px;
      bottom: calc(var(--mobile-nav-height,82px) + 18px + env(safe-area-inset-bottom));
      z-index: 1250;
      flex-direction: column-reverse;
      gap: 10px;
      max-width: none;
      transform: none;
    }
    .header-primary-button {
      width: 54px;
      height: 54px;
      min-height: 54px;
      padding: 0;
      border-radius: 0;
      box-shadow: 5px 5px 0 var(--text);
    }
    .header-primary-button svg { width: 22px; height: 22px; }
    .header-primary-actions.is-compact .header-primary-button {
      width: 54px;
    }
    .header-primary-button span { display: none; }
    .brand-symbol { width: 34px; height: 34px; border-radius: 0; }
    .top-actions {
      min-width: 0;
      margin-left: 0;
      grid-column: 4;
      grid-row: 1;
      justify-self: end;
      gap: 6px;
    }
    .top-actions button {
      width: 38px;
      height: 38px;
      min-height: 38px;
      border-radius: 0;
      flex: 0 0 auto;
    }

    .app { padding: 18px 12px 36px; }
    .app.challenge-detail-shell { padding-top: 8px; }
    .app.fullbleed { padding: 0; }

    .nav {
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: max(8px, env(safe-area-inset-bottom));
      z-index: 1200;
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      align-items: end;
      gap: 2px;
      margin: 0;
      padding: 7px 6px 8px;
      overflow: visible;
      border: 2px solid var(--text);
      border-radius: 0;
      background: var(--card);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: 4px 4px 0 rgba(10,10,10,.22);
    }
    .nav.hidden { display: none; }
    .nav button {
      position: relative;
      min-width: 0;
      min-height: 58px;
      padding: 7px 2px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: clamp(10px,2.8vw,11px);
      font-weight: 700;
      line-height: 1.15;
    }
    .nav button span, .nav button span svg {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
    }
    .nav button em {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: inherit;
      text-align: center;
    }
    .nav button:hover { background: var(--soft); color: var(--text); }
    .nav button.active { background: var(--accent); color: var(--accent-ink); }

    .world-fullscreen {
      height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 12px);
      min-height: 420px;
      isolation: isolate;
    }
    .world-toolbar {
      position: fixed;
      top: calc(var(--topbar-height) + 10px);
      left: 12px;
      right: 12px;
      z-index: 1100;
      max-width: none;
      pointer-events: auto;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      padding: 2px 0 6px;
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
      overscroll-behavior-inline: contain;
    }
    .world-toolbar::-webkit-scrollbar { display: none; }
    .world-toolbar > * { flex: 0 0 auto; }
    .world-stats { display: none; }
    #countryPanelToggle { margin-left: 0; }
    .world-toolbar .ghost-button, .world-toolbar .pill-button,
    .world-toolbar .primary-action.small {
      min-height: 40px;
      padding-inline: 13px;
      white-space: nowrap;
    }
    .world-toolbar .world-icon-button {
      width: 48px;
      height: 48px;
      min-width: 48px;
      min-height: 48px;
      padding: 0;
      display: inline-grid;
      place-items: center;
    }
    .globe-hint {
      bottom: 12px;
      max-width: calc(100% - 24px);
    }
    .country-overlay {
      top: auto;
      left: 10px;
      right: 10px;
      bottom: 10px;
      width: auto;
      max-height: 62%;
      border-radius: 0;
      padding: 18px;
      transform: translateY(calc(100% + 24px));
    }
    .country-overlay.open { transform: translateY(0); }
    .country-challenge-list-item {
      grid-template-columns: 104px minmax(0,1fr);
      min-height: 96px;
    }
    .country-challenge-thumb {
      width: 104px;
      min-height: 96px;
      max-height: 112px;
    }
    .discover-challenge-hero-content {
      gap: 14px;
      padding: 14px 16px 16px;
    }
    .discover-challenge-ownerline {
      padding-right: 42px;
    }
    .discover-challenge-main-photo-label {
      margin-bottom: 6px;
    }
    .discover-challenge-hero-title {
      font-size: clamp(22px,8vw,31px);
    }
    .discover-challenge-hero-copy p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin-top: 7px;
      font-size: 13px;
      line-height: 1.42;
    }
    .discover-challenge-hero-copy .progress-wrap.compact {
      margin-top: 10px;
    }
    .discover-challenge-overlay-card > .discover-challenge-actions {
      padding: 12px 16px 16px;
    }

    .challenge-stream-header,
    .challenge-stream-note {
      align-items: flex-start;
      flex-direction: column;
    }
    .challenge-stream-note .ghost-button,
    .challenge-stream-note .primary-action {
      width: 100%;
      justify-content: center;
    }
    .challenge-stream-area {
      margin-top: 32px;
    }
    .participant-stream-chip {
      min-height: 34px;
    }
    .update-context-labels {
      justify-content: flex-end;
      width: auto;
      margin-left: auto;
    }

    .panel, .update-card, .challenge-card { border-radius: 0; }
    .manage-row {
      align-items: flex-start;
      gap: 10px;
      flex-direction: column;
    }
    .manage-row-actions {
      width: 100%;
      justify-content: flex-start;
    }
    .editor-modal-overlay {
      align-items: flex-end;
      padding: 8px;
    }
    .editor-modal {
      width: 100%;
      max-height: calc(100dvh - var(--topbar-height) - 12px);
      border-radius: 0;
    }
    .editor-modal-head { padding: 16px 16px 13px; }
    .editor-form { padding: 16px; }
    .editor-media-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }
    .editor-media-add {
      width: 100%;
      justify-content: center;
    }
    .editor-media-row {
      grid-template-columns: 92px minmax(0,1fr);
      gap: 9px;
    }
    .editor-media-thumb { min-height: 92px; }
    .editor-crop-layer { padding: 8px; }
    .editor-crop-dialog {
      max-height: calc(100dvh - 16px);
      border-radius: 0;
    }
    .editor-crop-stage {
      min-height: 240px;
      padding: 10px;
    }
    .editor-crop-controls { grid-template-columns: 1fr; padding-inline: 10px; }
    .editor-draw-toolbar { align-items: flex-start; flex-direction: column; }
    .editor-history-tools { align-self: stretch; justify-content: flex-end; }
    .editor-crop-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .photo-modal-video { width: 100%; }
    .modal-overlay { padding: 8px; }
  }

  @media (max-width: 430px) {
    .topbar-inner { padding-inline: 10px; gap: 8px; }
    .nav { left: 6px; right: 6px; padding-inline: 4px; }
    .nav button { padding-inline: 1px; }
    .discover-challenge-ownerline span { max-width: 210px; }
    .discover-challenge-ownerline small { max-width: 220px; }
    .discover-challenge-main-photo-label { min-height: 23px; font-size: 10px; }
    .editor-media-row { grid-template-columns: 1fr; }
    .editor-media-thumb { min-height: 160px; }
    .editor-modal-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .form-submit-row { align-items: stretch; flex-direction: column-reverse; }
    .form-submit-row .primary-action,
    .form-submit-row .ghost-button { width: 100%; margin: 0; }
  }

  @media (max-width: 900px) {
    .grid.challenge-grid.discover-challenge-grid.mine-challenge-grid.mine-view-three,
    .grid.challenge-grid.discover-challenge-grid.discover-layout-three,
    .discover-update-grid.discover-layout-three {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }
  @media (max-width: 760px) {
    .mine-view-switcher {
      width: 100%;
      justify-content: space-between;
      justify-self: stretch;
    }
    .mine-view-button {
      flex: 1 1 0;
      width: auto;
    }
    .grid.challenge-grid.discover-challenge-grid.mine-challenge-grid.mine-view-three,
    .grid.challenge-grid.discover-challenge-grid.discover-layout-three,
    .discover-update-grid.discover-layout-three {
      grid-template-columns: 1fr;
    }
    .mine-list-card {
      padding: 16px;
    }
    .mine-list-card-head {
      gap: 10px;
      flex-direction: column;
    }
  }

  /* ------------------------------------------------------------------
     Grosse Bildschirme: der Update-Feed wird zweispaltig. Links steht das
     Bild in voller Hoehe, rechts eine ruhige Lesespalte mit Autor, Text
     und Aktionen — dieselbe Aufteilung wie in der grossen Fotoansicht,
     nur direkt im Feed.
     ------------------------------------------------------------------ */
  @media (min-width: 1100px) {
    .feed.update-feed {
      max-width: 1040px;
    }
    .update-card.is-split-layout {
      display: grid;
      grid-template-columns: minmax(0,1fr) 344px;
      grid-template-rows: auto minmax(250px,auto) minmax(0,1fr) auto;
      height: clamp(620px,74vh,720px);
      min-height: 0;
      padding: 0;
      overflow: hidden;
    }
    /* Ohne Kommentare gehört der verbleibende Platz vollständig zum Text.
       Die Diskussion besitzt dann keine Linie, Überschrift oder leere Fläche. */
    .update-card.is-split-layout.has-no-inline-comments {
      grid-template-rows: auto minmax(250px,1fr) 0 auto;
    }
    .update-card.is-split-layout > .media-carousel,
    .update-card.is-split-layout > .update-fallback {
      grid-column: 1;
      grid-row: 1 / -1;
      height: 100%;
      min-height: 0;
      margin: 0;
      border-radius: 0;
    }
    .update-card.is-split-layout > .media-carousel .media-strip,
    .update-card.is-split-layout > .media-carousel .media-frame {
      height: 100%;
      max-height: none;
      aspect-ratio: auto;
      border-radius: 0;
    }
    .update-card.is-split-layout > .update-fallback {
      display: grid;
      place-items: center;
      aspect-ratio: auto;
      max-height: none;
    }
    .update-card.is-split-layout > .update-header {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      padding: 16px 0 14px 20px;
      border-bottom: 1px solid var(--line);
    }
    .update-card.is-split-layout > .update-copy {
      grid-column: 2;
      grid-row: 2;
      box-sizing: border-box;
      min-height: 250px;
      overflow-y: auto;
      margin: 0;
      padding: 16px 20px 76px;
    }
    .update-card.is-split-layout > .update-inline-discussion {
      grid-column: 2;
      grid-row: 3;
      min-height: 0;
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      /* Bei vorhandenen Kommentaren begrenzt diese Fläche Liste und Composer.
         Der Composer wird an der oberen Kante der Aktionsleiste abgeschnitten. */
      overflow: hidden;
      border-top: 1px solid var(--line);
      background: var(--card);
    }
    .update-card.is-split-layout > .update-inline-discussion.is-empty {
      height: 0;
      min-height: 0;
      overflow: visible;
      border-top: 0;
      background: transparent;
    }
    .update-inline-discussion.is-empty > .update-inline-comments-head,
    .update-inline-discussion.is-empty > .update-inline-comments-scroll {
      display: none;
    }
    .update-inline-composer {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 50%;
      min-height: 144px;
      max-height: 82%;
      z-index: 3;
      display: grid;
      grid-template-columns: minmax(0,1fr) 40px;
      align-items: end;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 18px 18px 0 0;
      background: var(--soft-2);
      box-shadow: none;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(100%);
      transition: transform .26s cubic-bezier(.22,.75,.25,1), visibility 0s linear .26s;
      will-change: transform;
    }
    .update-inline-composer.is-open {
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
    }
    .update-inline-composer textarea {
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      max-height: none;
      resize: none;
      border: 0;
      border-radius: 0;
      outline: 0;
      padding: 12px;
      background: transparent;
      color: var(--text);
      line-height: 1.5;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
    }
    .update-inline-composer textarea::placeholder {
      color: var(--muted);
    }
    .update-inline-composer textarea::-webkit-scrollbar { width: 4px; }
    .update-inline-composer textarea::-webkit-scrollbar-track { background: transparent; }
    .update-inline-composer textarea::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: var(--line);
    }
    .update-inline-composer textarea:focus {
      outline: 0;
      border: 0;
      box-shadow: none;
    }
    .update-inline-comment-send {
      align-self: end;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--card);
      color: var(--text);
      cursor: pointer;
    }
    .update-inline-comment-send:hover,
    .update-inline-comment-send:focus-visible {
      border-color: var(--accent);
      color: var(--accent);
      outline: 0;
    }
    .update-inline-comment-send:disabled {
      cursor: wait;
      opacity: .55;
    }
    .update-inline-comment-send .ui-icon {
      width: 17px;
      height: 17px;
    }
    .update-inline-comments-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 18px 8px;
      color: var(--text);
      font-size: 12px;
    }
    .update-inline-comments-head span {
      color: var(--muted);
      font-family: var(--font-data);
      font-size: 10px;
    }
    .update-inline-comments-scroll {
      min-height: 0;
      flex: 1 1 auto;
      overflow-y: auto;
      /* Ohne eigenen Ueberlauf wird das Mausrad an die Seite weitergereicht.
         Erst bei vielen Kommentaren scrollt diese Liste selbst. */
      overscroll-behavior-y: auto;
      padding: 0 18px 14px;
      scrollbar-width: thin;
      scrollbar-gutter: stable;
      contain: layout paint;
    }
    .update-inline-comments-scroll .comment {
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      scroll-margin-block: 18px;
      transition: background-color .2s ease, box-shadow .2s ease;
    }
    .update-inline-comments-scroll .comment.reply {
      padding-left: 14px;
      margin-left: 0;
    }
    .update-inline-comments-scroll .small-note {
      margin: 6px 0 0;
    }
    .update-inline-comments-more {
      display: inline-flex;
      align-items: center;
      margin: 12px 0 2px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .update-inline-comments-more:hover,
    .update-inline-comments-more:focus-visible {
      text-decoration: underline;
      outline: 0;
    }
    .update-card.is-split-layout > .actionbar {
      grid-column: 2;
      grid-row: 4;
      position: relative;
      z-index: 4;
      align-content: end;
      padding: 14px 14px 18px;
      border-top: 1px solid var(--line);
      /* Die Aktionsleiste ist eine vollständig deckende Abschlussfläche.
         Dadurch scheint der einfahrende Composer nicht durch die Buttons. */
      background: var(--card);
    }
    /* In der schmalen rechten Spalte müssen alle Update-Aktionen in derselben
       Zeile bleiben. Gleichmäßig flexible Buttons verhindern, dass die
       Teilnahme-Aktion allein in eine zweite, rechtsbündige Zeile rutscht. */
    .update-card.is-split-layout:not(.is-text-only) > .actionbar {
      flex-wrap: nowrap;
    }
    .update-card.is-split-layout:not(.is-text-only) > .actionbar .icon-button {
      flex: 1 1 0;
      min-width: 0;
      padding-inline: 6px;
    }
    .update-card.is-split-layout > .update-copy .link-title {
      font-size: 19px;
    }
    .update-card.is-split-layout > .update-copy p {
      font-size: 14.5px;
    }
    .update-card.is-split-layout .update-header-shell {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
    .update-card.is-split-layout .update-header-owner {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .update-card.is-split-layout .update-owner-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      min-height: 50px;
      max-width: 132px;
      padding: 0 10px;
      background: var(--accent);
      color: var(--accent-ink);
      font-family: var(--font-data);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
      border-radius: 0;
    }
    .update-card.is-split-layout .update-owner-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-top: 1px;
    }
    .update-card.is-split-layout .update-owner-name {
      display: block;
      max-width: 142px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }
    .update-card.is-split-layout .update-owner-copy .update-location {
      margin-top: 4px;
      font-size: 10.5px;
      line-height: 1.3;
    }
    .update-card.is-split-layout .update-owner-copy .participant-update-label {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-top: 1px;
      font-size: 10px;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .update-card.is-split-layout .update-header-stage {
      flex: 0 0 112px;
      width: 112px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 5px;
      margin-right: -1px;
      margin-left: auto;
      text-align: right;
    }
    .update-card.is-split-layout .update-stage-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 36px;
      padding: 0 11px;
      border: 1px solid var(--line);
      font-family: var(--font-data);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .update-card.is-split-layout .update-stage-meta {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.1;
      white-space: nowrap;
    }
    .update-card.is-split-layout .update-stage-edited {
      display: inline-grid;
      place-items: center;
      width: 12px;
      height: 12px;
      color: var(--muted);
      font-style: normal;
    }
    .update-card.is-split-layout .update-stage-edited .ui-icon {
      width: 11px;
      height: 11px;
    }

    /* Text-Updates nutzen auf großen Bildschirmen die gesamte Kartenbreite.
       Vorhandene Kommentare erhalten eine eigene Lesespalte; ohne Kommentare
       bleibt die typografische Bühne vollständig und ohne leere Restfläche. */
    .update-card.is-split-layout.is-text-only {
      grid-template-columns: minmax(0,1fr) 320px;
      grid-template-rows: auto minmax(0,1fr) auto;
      height: clamp(560px,70vh,700px);
    }
    .update-card.is-split-layout.is-text-only > .update-header {
      grid-column: 1 / -1;
      grid-row: 1;
      padding: 16px 20px 14px;
    }
    .update-card.is-split-layout.is-text-only > .update-text-poster {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      margin: 0;
      aspect-ratio: auto;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
    }
    .update-card.is-split-layout.is-text-only.has-no-inline-comments > .update-text-poster {
      grid-column: 1 / -1;
      border-right: 0;
    }
    .update-card.is-split-layout.is-text-only > .update-inline-discussion {
      grid-column: 2;
      grid-row: 2;
      border-top: 0;
    }
    .update-card.is-split-layout.is-text-only > .update-inline-discussion.is-empty {
      display: none;
    }
    .update-card.is-split-layout.is-text-only > .actionbar {
      grid-column: 1 / -1;
      grid-row: 3;
      padding: 12px 18px 14px;
    }
    .update-card.is-split-layout.is-text-only .update-text-poster-inner {
      padding: clamp(34px,4.2vw,54px) clamp(36px,5vw,64px) clamp(36px,4.6vw,58px) clamp(46px,5.7vw,72px);
    }
  }

}


@media (max-width:760px) {
  .country-tool-row { align-items: stretch; }
  .country-sort-label { width: 100%; min-width: 0; }
  .vote-control { flex: 0 0 auto; }
  .update-detail-focus-target { scroll-margin-top: calc(var(--topbar-height) + 10px); }
}