/** 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) {
    .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;
    }
    .photo-modal-stage {
      padding-inline: 10px;
    }
  }
  @media (max-width: 1079px) {
    .detail-timeline-area {
      /* Auf kleinen Bildschirmen belegt die Zeitleisten-Ebene nur noch den
         rechten Panelbereich statt den kompletten Viewport. So brauchen wir
         keinen grauen Vollbild-Scrim und blockieren die Seite nicht. */
      left: auto;
      width: min(356px,100vw);
      z-index: 1180;
    }
    .detail-timeline-scrim,
    .detail-timeline-area.is-open .detail-timeline-scrim {
      display: none;
      opacity: 0;
      pointer-events: none;
    }
    .detail-timeline-area.is-open {
      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;
    }

    /* Android WebView kann Prozentbreiten + aspect-ratio in verschachtelten
       Flex-Containern auf 0x0 aufloesen. Fuer Update-Karten verwenden wir in
       der App deshalb einen einfachen, festen Viewport-Hoehenpfad. Die normale
       mobile Browseransicht bleibt unveraendert. */
    html.is-android-webview .update-card:not(.discover-challenge-card) > .media-carousel {
      width: auto;
      min-width: 0;
      align-self: stretch;
      flex: 0 0 auto;
    }
    html.is-android-webview .update-card:not(.discover-challenge-card) .media-strip:not(.is-detail-media) {
      width: auto;
      min-width: 0;
      height: clamp(280px,58vh,520px);
      min-height: 280px;
      max-height: 58vh;
      aspect-ratio: auto;
    }
    html.is-android-webview .update-card:not(.discover-challenge-card) .media-strip:not(.is-detail-media) .media-frame {
      width: 100%;
      min-width: 100%;
      height: 100%;
      min-height: 100%;
      flex: 0 0 100%;
      aspect-ratio: auto;
    }
    html.is-android-webview .update-card:not(.discover-challenge-card) > .text-update-card {
      width: auto;
      min-width: 0;
      height: clamp(570px,76vh,690px);
      min-height: 570px;
      max-height: 76vh;
      align-self: stretch;
      flex: 0 0 auto;
    }

    /* Die Detailbilder haben bereits eine feste Hoehe. In der Android-WebView
       verzichten wir zusaetzlich auf die rein dekorativen Blur-/Shadow-Layer,
       damit das Bild nicht in einer separaten GPU-Ebene haengen bleibt. */
    html.is-android-webview .challenge-detail-gallery .challenge-media-backdrop,
    html.is-android-webview .update-detail-gallery .update-media-backdrop {
      display: none;
    }
    html.is-android-webview .challenge-detail-gallery .media-strip.is-detail-media .update-photo,
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media .update-photo {
      filter: none;
    }
    html.is-android-webview .challenge-detail-gallery .media-strip.is-detail-media {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      touch-action: pan-x pan-y;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    html.is-android-webview .challenge-detail-gallery .media-strip.is-detail-media .media-frame {
      width: 100%;
      min-width: 100%;
      flex: 0 0 100%;
      scroll-snap-align: start;
    }
    html.is-android-webview .challenge-detail-gallery .media-strip.is-detail-media .media-photo-button {
      touch-action: pan-x pan-y;
    }

    /* Entdecken -> Challenges verwendet einen eigenen Hero mit aspect-ratio.
       Genau dieser Hero kann in Android WebView auf 0 px Hoehe kollabieren;
       dann bleiben nur die Aktionsbuttons der Karte sichtbar. Die App bekommt
       deshalb eine echte, viewport-basierte Hoehe. */
    html.is-android-webview .discover-challenge-hero {
      height: clamp(410px,55dvh,510px);
      min-height: 410px;
      max-height: 510px;
      aspect-ratio: auto;
    }
    html.is-android-webview .discover-challenge-photo-carousel,
    html.is-android-webview .discover-challenge-photo-strip,
    html.is-android-webview .discover-challenge-photo-frame,
    html.is-android-webview .discover-challenge-photo-button,
    html.is-android-webview .discover-challenge-hero-photo {
      min-height: 100%;
      max-height: none;
    }
    html.is-android-webview .discover-challenge-photo-carousel,
    html.is-android-webview .discover-challenge-photo-strip,
    html.is-android-webview .discover-challenge-photo-button {
      touch-action: pan-x pan-y;
      overscroll-behavior-x: auto;
      overscroll-behavior-y: auto;
    }
    html.is-android-webview .discover-challenge-hero-photo {
      filter: none;
      transform: none;
    }

    /* Update-Detailansicht: Der innere Frame hatte bereits eine Hoehe, der
       umgebende Flex-Strip aber nicht. Android WebView kann dadurch einen
       sichtbaren Platzhalter zeichnen, waehrend das Bild selbst 0 px erhaelt. */
    html.is-android-webview .update-detail-gallery,
    html.is-android-webview .update-detail-gallery .media-carousel.is-detail-media,
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media {
      width: 100%;
      min-width: 100%;
    }
    html.is-android-webview .update-detail-gallery .media-carousel.is-detail-media {
      display: block;
      overflow: hidden;
    }
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media {
      display: flex;
      height: clamp(260px,58vh,420px);
      min-height: 260px;
      max-height: 420px;
      background: #0a0a0a;
    }
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media .media-frame {
      position: relative;
      width: 100%;
      min-width: 100%;
      height: 100%;
      min-height: 100%;
      flex: 0 0 100%;
      background: #0a0a0a;
    }
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media .media-photo-button,
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media .update-photo {
      width: 100%;
      min-width: 100%;
      height: 100%;
      min-height: 100%;
    }
    html.is-android-webview .update-detail-gallery .media-strip.is-detail-media .update-photo {
      display: block;
      object-fit: contain;
      opacity: 1;
      visibility: visible;
    }

    /* Modale bleiben in der App relativ zum echten Viewport. Der Hintergrund
       braucht dort keine GPU-Blur-Ebene; das vermeidet schwarze/teilweise
       gezeichnete Dialoge beim Oeffnen und beim Einblenden der Tastatur. */
    html.is-android-webview .modal-overlay,
    html.is-android-webview .lightbox {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    html.is-android-webview input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    html.is-android-webview textarea,
    html.is-android-webview select,
    html.is-android-webview [contenteditable="true"] {
      scroll-margin-block: 24px;
    }
    .detail-timeline-list {
      max-height: calc(100dvh - var(--topbar-height) - 80px);
    }
    .mine-filter-bar {
      grid-template-columns: minmax(220px,1fr) auto;
    }
    .mine-update-view-spacer {
      display: none;
    }
    .mine-view-switcher {
      grid-column: 1 / -1;
      justify-self: end;
    }
  }
  @media (max-width: 760px) {
    /* Mobile Web + Android WebView: bewusst einfache, schmale Nummernleiste.
       Desktop/Tablet ab 761 px behalten die ausführliche Zeitleiste. */
    .detail-timeline-area,
    .detail-timeline-area.is-open {
      top: var(--topbar-height);
      right: 0;
      bottom: calc(var(--mobile-nav-height,82px) + env(safe-area-inset-bottom));
      left: auto;
      width: 60px;
      height: auto;
      pointer-events: none;
      z-index: 2200;
    }
    .detail-timeline-trigger {
      position: fixed;
      top: calc(50% - var(--mobile-nav-height,82px) / 2);
      right: 0;
      width: 42px;
      min-width: 42px;
      height: 50px;
      border-radius: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: none;
    }
    .detail-timeline-rail {
      position: fixed;
      top: calc(var(--topbar-height) + 8px);
      right: -62px;
      bottom: calc(var(--mobile-nav-height,82px) + env(safe-area-inset-bottom) + 8px);
      left: auto;
      width: 54px;
      height: auto;
      min-height: 0;
      max-height: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 1;
      transform: none;
      transition: none;
      z-index: 2201;
      background: var(--card);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .detail-timeline-area.is-open .detail-timeline-rail {
      right: 4px;
      pointer-events: auto;
    }
    .detail-timeline-head {
      flex: 0 0 42px;
      min-height: 42px;
      justify-content: center;
      gap: 0;
      padding: 5px 0;
    }
    .detail-timeline-head > div { display: none; }
    .detail-timeline-head .timeline-toggle {
      width: 32px;
      min-width: 32px;
      height: 32px;
    }
    .detail-timeline-list {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      max-height: none;
      display: grid;
      align-content: start;
      gap: 2px;
      padding: 6px 4px 8px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .detail-timeline-list::before {
      top: 22px;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
    }
    .detail-timeline-overview { display: none; }
    .detail-timeline-item {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      display: grid;
      grid-template-columns: 1fr;
      place-items: center;
      gap: 0;
      padding: 5px 0;
      text-align: center;
    }
    .detail-timeline-copy { display: none; }
    .detail-timeline-node {
      width: 28px;
      height: 28px;
    }
    .detail-timeline-item.is-active { box-shadow: none; }

    .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: rgba(0,0,0,.19) 0 10px 20px, rgba(0,0,0,.23) 0 6px 6px;
    }
    .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;
    }
    .discover-settings-toggle {
      width: 100%;
      justify-content: center;
    }
    .discover-scope-setting,
    .discover-layout-setting {
      align-items: stretch;
      flex-direction: column;
    }
    .discover-scope-control {
      width: 100%;
    }
    .discover-scope-control .segment-button {
      flex: 1 1 0;
      min-width: 0;
    }
    .discover-layout-setting .discover-view-switcher {
      width: 100%;
      justify-content: stretch;
    }
    .discover-layout-setting .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;
    }
    .discover-intro.compact-panel {
      padding-top: 22px;
      padding-bottom: 22px;
    }
    .discover-intro h1 {
      font-size: 28px;
    }
    .discover-intro-stack {
      gap: 12px;
    }
    .discover-intro-actions {
      width: 100%;
    }
    .feed-filter-grid {
      grid-template-columns: 1fr;
    }
    .feed-filter-reset {
      justify-content: center;
      grid-column: auto;
      width: 100%;
    }
    .update-card {
      padding: 10px;
      border-radius: var(--post-radius);
    }
    /* Challenge-Vollkarten liegen bereits randlos auf ihrem eigenen Hero.
       Die allgemeine mobile Update-Card-Innenkante darf hier keinen zweiten
       10px-Rahmen erzeugen – in Entdecken und Meine identisch. */
    .update-card.discover-challenge-card,
    .discover-challenge-overlay-card {
      padding: 0;
      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,
    .feed.update-feed > .update-card .text-update-card {
      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;
    }
    /* Round 86: die neu geschriebene bildlose Full-Card hat mobil genau
       eine eigene Layoutregel. Titel/Stand/Beschreibung liegen in getrennten
       Zonen und koennen sich nicht gegenseitig ueberdecken. */
    .feed.update-feed > .update-card > .text-update-card {
      height: clamp(570px,76vh,690px);
      min-height: 570px;
      max-height: 76vh;
      border-inline: 0;
    }
    /* Nur bildlose Updates im geoeffneten Challenge-Verlauf werden kompakter.
       Die allgemeine 570px-Textkartenregel fuer Entdecken/Favoriten bleibt
       unveraendert; bei mehr Inhalt darf diese Variante ueber 420px wachsen. */
    .update-card.is-challenge-stream-layout > .text-update-card.is-challenge-stream-text-card,
    html.is-android-webview .update-card.is-challenge-stream-layout > .text-update-card.is-challenge-stream-text-card {
      height: auto;
      min-height: 420px;
      max-height: none;
    }
    .feed.update-feed > .update-card > .text-update-card .text-update-card-layout {
      padding: 30px 24px 30px 34px;
      grid-template-rows: auto minmax(170px,1fr) auto;
      gap: 24px;
    }
    .feed.update-feed > .update-card > .text-update-card .text-update-card-title {
      font-size: clamp(25px,7.6vw,35px);
      line-height: 1.06;
      -webkit-line-clamp: 3;
    }
    .feed.update-feed > .update-card > .text-update-card .update-progress-current {
      font-size: clamp(78px,23vw,112px);
    }
    .feed.update-feed > .update-card > .text-update-card .text-update-card-description {
      font-size: 16px;
      line-height: 1.5;
      -webkit-line-clamp: 5;
    }
    .feed.update-feed > .update-card > .text-update-card .text-update-card-more {
      margin-top: 8px;
    }
    .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 {
      --challenge-detail-media-height: max(260px,min(52vh,500px));
      margin: 18px 0 16px;
    }
    .challenge-detail-gallery .media-strip.is-detail-media .media-frame {
      height: var(--challenge-detail-media-height);
      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-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-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;
    }
    .photo-modal-overview {
      min-height: 100dvh;
    }
    .photo-modal-stage {
      min-height: 360px;
      padding: 48px 2px 8px;
    }
    .photo-modal-viewer {
      grid-template-columns: 40px minmax(0,1fr) 40px;
      gap: 2px;
    }
    .photo-modal-nav-slot {
      width: 40px;
    }
    .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; }
  }
  @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: max-content minmax(0,1fr) minmax(0,1fr);
      width: 100%;
    }
    .mine-scope-button {
      min-width: 0;
      padding-inline: 8px;
      gap: 5px;
    }
    .mine-scope-button[data-mine-scope="all"] {
      padding-inline: 11px;
    }
    .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;
    }
    .challenge-detail-topbar {
      gap: 10px;
      margin-bottom: 6px;
    }
    .challenge-detail-category-slot {
      max-width: min(58%,180px);
    }
    .challenge-detail-title {
      margin-top: 13px;
      margin-bottom: 11px;
      padding-block: 3px;
    }
    .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: nowrap;
      white-space: nowrap;
    }
    .hero-actions {
      gap: 6px;
    }
    .challenge-detail-actions {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      flex-direction: column;
      gap: 8px;
    }
    .challenge-detail-primary-actions {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(58px,1fr));
      align-items: stretch;
      gap: 8px;
    }
    .challenge-detail-primary-actions > .icon-button,
    .challenge-detail-primary-actions > .challenge-favorite-button.is-actionbar {
      width: 100%;
      min-width: 0;
      height: 54px;
      min-height: 54px;
      justify-content: center;
      padding-inline: 10px;
      gap: 8px;
    }
    .challenge-detail-primary-actions > .icon-button .icon-button-symbol,
    .challenge-detail-primary-actions > .icon-button .ui-icon,
    .challenge-detail-primary-actions > .challenge-favorite-button.is-actionbar svg {
      width: 21px;
      height: 21px;
    }
    .challenge-detail-primary-actions > .icon-button em {
      font-family: var(--font-data);
      font-size: 12px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .challenge-detail-primary-actions > .challenge-favorite-button.is-actionbar:not(.is-active) {
      color: var(--detail-text);
      opacity: 1;
    }
    .challenge-detail-vote-row {
      width: 100%;
      margin-left: 0;
      justify-content: flex-end;
    }
    .challenge-detail-actions .vote-control {
      flex: 0 0 auto;
      justify-content: center;
      margin-left: 0;
    }
    .challenge-detail-gallery {
      --challenge-detail-media-height: max(220px,min(48vh,345px));
    }
    .challenge-detail-gallery .media-strip.is-detail-media .media-frame {
      height: var(--challenge-detail-media-height);
      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;
    }
    .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: var(--photo-radius-sm);
    }
    .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: var(--card-radius);
      box-shadow: var(--elevated-shadow);
    }
    .header-create-button { border-radius: 50%; }
    .header-primary-button svg { width: 22px; height: 22px; }
    .header-primary-actions.is-compact .header-primary-button {
      width: 54px;
    }
    .header-primary-button span { display: none; }

    /* „Update“ ist bewusst beschriftet: Der runde Plus-Button darunter steht
       bereits für eine neue Challenge. Ein kompakter Pill-Button verhindert,
       dass zwei ähnlich aussehende FABs unterschiedliche Aktionen verstecken. */
    .header-update-button,
    .header-primary-actions.is-compact .header-update-button {
      width: auto;
      min-width: 106px;
      height: 48px;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid var(--accent);
      border-radius: 999px;
      background: var(--card);
      color: var(--text);
      gap: 8px;
    }
    .header-update-button svg {
      width: 18px;
      height: 18px;
      color: var(--accent);
    }
    .header-update-button span {
      display: inline;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .brand-symbol { width: 34px; height: 34px; border-radius: var(--photo-radius-sm); }
    .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: var(--photo-radius-sm);
      flex: 0 0 auto;
    }

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

    .nav {
      position: fixed;
      left: 0;
      right: 0;
      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-top: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      background: var(--card);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: var(--elevated-shadow);
    }
    .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: var(--photo-radius-sm);
      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); }

    /* Mobile Weltansicht: direkt zwischen Header und Bottom-Navigation
       verankern. Dadurch gibt es keinen separaten Restbereich mehr, der durch
       abweichende vh/dvh-Werte einer WebView unterhalb der Welt entstehen kann.
       Das Suchpanel nimmt nur seine Inhaltshoehe; der Globe bekommt den gesamten
       restlichen Platz oberhalb davon. */
    .world-fullscreen {
      position: fixed;
      top: var(--world-header-bottom, var(--topbar-height));
      right: 0;
      bottom: var(--world-bottom-inset, var(--world-nav-inset, calc(var(--mobile-nav-height) + max(0px, calc(env(safe-area-inset-bottom) - 8px)))));
      left: 0;
      height: auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      isolation: isolate;
      overflow: hidden;
    }
    .world-fullscreen > .globe-mount {
      flex: 1 1 auto;
      width: 100%;
      height: auto;
      min-height: 0;
    }
    .world-country-search-panel {
      flex: 0 0 auto;
      width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 12px;
      padding: 16px 14px 10px;
      border-top: 1px solid var(--line);
      background: var(--page-a);
      overflow: visible;
      z-index: 4;
    }

    /* Auf der Weltansicht liegt der globale runde Erstellen-Button als Overlay
       ueber dem Globe statt ueber dem nun bis zur Navigation reichenden
       Suchpanel. Die Aktion bleibt unveraendert; nur eine Kollision mit
       "Challenges ansehen" wird vermieden. */
    body.world-view .header-primary-actions {
      bottom: calc(var(--world-bottom-inset, var(--world-nav-inset, var(--mobile-nav-height,82px))) + var(--world-search-panel-height,227px) + 16px);
    }
    /* Die mobile Responsive-Schicht setzt die Welt-Toolbar explizit auf flex.
       Deshalb muss die Suppression ebenfalls in dieser spaeteren Cascade-Layer
       liegen, damit Tag/Nacht, Neu und die globalen Erstellen-Aktionen waehrend
       Suche/Popover wirklich vollstaendig verschwinden. */
    body.world-view.world-controls-suppressed .world-toolbar,
    body.world-view.world-controls-suppressed .header-primary-actions {
      display: none;
    }
    .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-toolbar .primary-action.small {
      min-height: 40px;
      padding-inline: 13px;
      white-space: nowrap;
    }
    .world-toolbar .world-icon-button {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
      display: inline-grid;
      place-items: center;
    }
    .world-toolbar .world-lighting-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }
    .world-toolbar .world-lighting-button::before {
      width: 28px;
      height: 28px;
    }
    .world-toolbar .world-lighting-button svg {
      width: 14px;
      height: 14px;
    }
    #countryPanelToggle {
      min-height: 40px;
      padding-inline: 13px;
      white-space: nowrap;
    }
    .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: 168px;
    }
    .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-progress-band {
      padding: 9px 16px 11px;
    }
    .discover-challenge-overlay-card > .discover-challenge-actions {
      padding: 12px 16px 16px;
    }

    .challenge-stream-area {
      margin-top: 32px;
    }
    .participant-stream-more-button {
      min-height: 48px;
    }
    .update-context-labels {
      justify-content: flex-end;
      width: auto;
      margin-left: auto;
    }

    .panel, .challenge-card { border-radius: var(--card-radius); }
    .manage-row {
      align-items: flex-start;
      gap: 10px;
      flex-direction: column;
    }
    .manage-row-actions {
      width: 100%;
      justify-content: flex-start;
    }
    .account-content-link {
      width: 100%;
    }
    .account-updates-toolbar {
      grid-template-columns: 1fr;
    }
    .account-section-summary,
    .account-updates-content {
      padding-left: 14px;
      padding-right: 14px;
    }
    .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-draw-toolbar { align-items: flex-start; flex-direction: column; }
    .editor-history-tools { align-self: stretch; justify-content: flex-end; }
    .photo-modal-video { width: 100%; }
    .modal-overlay { padding: 8px; }
  }

  @media (max-width: 430px) {
    .topbar-inner { padding-inline: 10px; gap: 8px; }
    .nav { left: 0; right: 0; padding-inline: 4px; }
    .nav button { padding-inline: 1px; }
    .discover-challenge-ownerline span { max-width: 210px; }
    .discover-challenge-ownerline small { max-width: 220px; }
    .editor-media-row { grid-template-columns: 1fr; }
    .editor-media-thumb { min-height: 160px; }
    .form-submit-row { align-items: stretch; flex-direction: column-reverse; }
    .form-submit-row .primary-action,
    .form-submit-row .ghost-button { width: 100%; margin: 0; }
    .form-secondary-actions {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      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;
    }
    html.is-android-webview .mine-view-button[data-mine-view="three"],
    html.is-android-webview .mine-view-button[data-mine-update-view="three"] {
      display: none;
    }
    .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;
      min-width: 0;
      margin: 0;
      padding: 16px 18px 14px;
      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 {
      grid-template-columns: 28px minmax(0,1fr);
      column-gap: 8px;
      padding: 10px 0;
      border-bottom: 0;
      scroll-margin-block: 18px;
      transition: background-color .2s ease, box-shadow .2s ease;
    }
    .update-inline-comments-scroll .comment.reply {
      padding-left: 0;
      margin-left: 0;
    }
    .update-inline-comments-scroll .comment-replies {
      margin-left: 36px;
      padding-left: 10px;
    }
    .update-inline-comments-scroll .comment-avatar.avatar.mini {
      width: 28px;
      height: 28px;
      font-size: 9px;
    }
    .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 {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
      gap: 12px;
    }
    .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-avatar {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 10px;
    }
    .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: 100%;
      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 {
      width: 104px;
      min-width: 104px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      margin-left: auto;
      text-align: right;
    }
    .update-card.is-split-layout .update-stage-badge {
      width: auto;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--update-progress-accent);
      font-size: 9px;
      font-weight: 600;
      justify-content: flex-end;
    }

    /* 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(700px,78vh,875px);
    }
    .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 > .text-update-card {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      margin: 0;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
    }
    .update-card.is-split-layout.is-text-only.has-no-inline-comments > .text-update-card {
      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 .text-update-card-layout {
      padding: clamp(38px,4.4vw,58px) clamp(38px,5vw,66px) clamp(40px,4.8vw,62px) clamp(48px,5.8vw,76px);
      grid-template-rows: auto minmax(190px,1fr) auto;
    }
  }

  @media (max-width: 760px) {
    .challenge-detail-page .participation-join-card {
      gap: 16px;
      padding: 16px;
    }
    .challenge-detail-page .participation-join-primary {
      min-height: 52px;
    }
    .challenge-detail-page .participation-member-actions {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      row-gap: 24px;
    }
    .challenge-detail-page .participation-member-actions > .participant-leave-button {
      width: 100%;
    }
    .challenge-detail-page .participation-member-actions > .participation-reminder-button {
      width: 56px;
      min-width: 56px;
      height: 56px;
      min-height: 56px;
      margin-top: 2px;
    }
    .challenge-detail-page .participation-member-actions > .participation-reminder-button .participation-reminder-button-icon,
    .challenge-detail-page .participation-member-actions > .participation-reminder-button .ui-icon {
      width: 30px;
      height: 30px;
    }
    .participant-stream-picker-panel {
      padding: 14px;
    }
    .comment-panel-summary {
      min-height: 48px;
    }
    .comment-input-wrap {
      grid-template-columns: minmax(0,1fr) 58px;
      min-height: 74px;
    }
    .comment-input-wrap textarea {
      min-height: 62px;
      resize: none;
    }
  }

  @media (max-width: 1079px) {
    /* Android WebView: Die geoeffnete Medienansicht verwendet bewusst keinen
       absolut positionierten Bild-Layer. Einige WebView-Versionen laden das
       Bild zwar korrekt, zeichnen diese Ebene aber leer. Ein normaler Flex-
       Container mit statischem <img> bleibt beim Oeffnen stabil sichtbar. */
    html.is-android-webview .photo-modal-stage {
      min-height: 0;
      display: block;
    }
    html.is-android-webview .photo-modal-viewer {
      width: 100%;
      min-width: 0;
      height: clamp(300px,62dvh,560px);
      min-height: 300px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 2px;
    }
    html.is-android-webview .photo-modal-nav-slot {
      flex: 0 0 34px;
      width: 34px;
      height: 100%;
    }
    html.is-android-webview .photo-modal-media-column {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      height: 100%;
      min-height: 100%;
      display: block;
      overflow: hidden;
    }
    html.is-android-webview .photo-modal-image-shell {
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 100%;
      display: block;
      overflow: hidden;
    }
    html.is-android-webview .photo-modal-image-shell.is-fullscreen-trigger {
      cursor: zoom-in;
    }
    html.is-android-webview .photo-modal-image-shell.is-fullscreen-trigger:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: -3px;
    }
    html.is-android-webview .photo-modal-img {
      position: static;
      inset: auto;
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      opacity: 1;
      visibility: visible;
      filter: none;
      transform: none;
    }

    /* App-Karten: Alle Aktionssymbole teilen die verfuegbare Breite exakt.
       Buttonflaeche und Rahmen verschmelzen mit dem schwarzen Kartensockel;
       beim Antippen reagiert nur das Symbol. Das Voting bekommt eine eigene,
       ebenfalls symmetrische zweite Reihe. */
    html.is-android-webview .discover-challenge-overlay-card > .discover-challenge-actions {
      display: grid;
      grid-template-columns: minmax(0,1fr);
      gap: 4px;
      padding: 8px 10px 10px;
      background: #000;
      border-top-color: #000;
    }
    html.is-android-webview .discover-challenge-action-buttons {
      width: 100%;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0,1fr);
      gap: 0;
    }
    html.is-android-webview .discover-challenge-action-buttons .icon-button,
    html.is-android-webview .discover-challenge-action-buttons .challenge-favorite-button.is-actionbar {
      width: 100%;
      min-width: 0;
      height: 44px;
      min-height: 44px;
      justify-content: center;
      align-self: stretch;
      padding: 0 4px;
      border: 1px solid #000;
      background: #000;
      box-shadow: none;
      transform: none;
    }
    html.is-android-webview .discover-challenge-action-buttons .icon-button.is-liked {
      color: var(--accent);
    }
    html.is-android-webview:root:not([data-theme="dark"]) .discover-challenge-action-buttons .icon-button.is-liked {
      color: #c51f3a;
    }
    html.is-android-webview .discover-challenge-action-buttons .icon-button.is-leave-action {
      color: var(--danger);
    }
    html.is-android-webview .discover-challenge-action-buttons .icon-button:active .icon-button-symbol {
      animation: challengeflow-app-icon-pop .18s ease-out;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control {
      --vote-score-color: #fff;
      width: 100%;
      min-height: 42px;
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      margin: 0;
      border: 1px solid #000;
      background: #000;
      box-shadow: none;
      overflow: visible;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button,
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button:hover,
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button:focus-visible {
      width: 100%;
      min-width: 0;
      min-height: 40px;
      border: 0;
      background: #000;
      box-shadow: none;
      transform: none;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button.vote-up.is-active {
      color: var(--vote-up);
      background: #000;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button.vote-down.is-active {
      color: var(--danger);
      background: #000;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-button:active {
      animation: challengeflow-app-icon-pop .18s ease-out;
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-score {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 0;
      color: var(--vote-score-color);
    }
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-score.is-positive,
    html.is-android-webview .discover-challenge-actions > .vote-control .vote-score.is-negative {
      color: var(--vote-score-color);
    }
  }

  @keyframes challengeflow-app-icon-pop {
    0% { transform: scale(1); }
    55% { transform: scale(1.22); }
    100% { transform: scale(1); }
  }

}


@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); }
}

/* ===== Android-App: Karten und native Navigation ===== */
@media (max-width: 760px) {
  .challenge-detail-controlbar {
    display: flex;
    gap: 0;
  }
  .challenge-detail-controlbar > button {
    width: 100%;
    min-width: 0;
  }
  .participant-directory-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

html.is-android-webview body .view-back-control {
  display: none;
}

/* In der App soll der Voting-Block nicht wie ein separates Eingabefeld wirken.
   Die Touch-Zonen bleiben vollständig erhalten; nur der sichtbare Rahmen entfällt. */
html.is-android-webview .vote-control {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}



/* Nur die App bekommt die besonders kompakte Kartenanordnung. */
html.is-android-webview .discover-challenge-hero-content {
  overflow: hidden;
  padding: 12px 14px 14px;
}
html.is-android-webview .discover-challenge-ownerline {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 3;
  align-items: flex-start;
  padding-right: 168px;
}
html.is-android-webview .discover-challenge-ownerline .avatar,
html.is-android-webview .discover-challenge-ownerline .avatar.mini {
  flex: 0 0 auto;
}
html.is-android-webview .discover-challenge-hero-copy {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: visible;
}
html.is-android-webview .discover-challenge-hero-description {
  margin-top: auto;
  margin-right: -14px;
  margin-bottom: -14px;
  margin-left: -14px;
  padding: clamp(52px, 9dvh, 82px) 14px 14px;
}
html.is-android-webview .discover-challenge-hero-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
html.is-android-webview .discover-challenge-hero-fallback {
  color: transparent;
  font-size: 0;
}
html.is-android-webview .discover-challenge-progress-band .progress-wrap.compact {
  margin: 0;
}

/* Challenge-Detail in der App: dekorative Trennpunkte entfallen; Start und
   Ziel bleiben als eine verständliche Datumszeile zusammen. */
html.is-android-webview .challenge-detail-dates {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Teilnehmerzahl ist in der Challenge-Detailansicht reine Meta-Information.
   Die Position bleibt unabhängig vom Teilnahmezustand stabil. */
html.is-android-webview .challenge-participant-meta {
  min-height: 22px;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
html.is-android-webview .challenge-participant-count-icon {
  width: 17px;
  height: 17px;
}
html.is-android-webview .challenge-participant-count-icon svg {
  width: 17px;
  height: 17px;
}

/* Autocomplete/Select beim Öffnen weit nach oben holen, damit Vorschläge trotz
   Bildschirmtastatur unter dem Feld sichtbar bleiben. */
html.is-android-webview select,
html.is-android-webview input[aria-autocomplete="list"],
html.is-android-webview input[list],
html.is-android-webview [role="combobox"] {
  scroll-margin-top: calc(var(--topbar-height) + 14px);
  scroll-margin-bottom: 45vh;
}


/* Android-App: Update-Aktion wie ein kompakter eigener Shortcut lesen lassen.
   Icon oben, Beschriftung unten; der runde Plus-Button bleibt klar getrennt. */
@media (max-width: 760px) {
  html.is-android-webview .header-update-button,
  html.is-android-webview .header-primary-actions.is-compact .header-update-button {
    width: 64px;
    min-width: 64px;
    height: 62px;
    min-height: 62px;
    padding: 7px 6px 6px;
    flex-direction: column;
    gap: 3px;
    border-radius: 18px;
  }

  html.is-android-webview .header-update-button svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
  }

  html.is-android-webview .header-update-button span {
    display: block;
    line-height: 1;
    font-size: 10.5px;
    letter-spacing: .01em;
  }
}


/* Mobile Browser und Android-App nutzen ausschließlich die Systemtastatur.
   ChallengeFlows eigene Desktop-Mic-/Undo-Buttons bleiben hier unsichtbar. */
@media (max-width: 760px) {
  .voice-input-controls { display: none; }
  .voice-input-shell > input.voice-input-field,
  .voice-input-shell > textarea.voice-input-field { padding-right: 12px; }
}
html.is-android-webview .voice-input-controls { display: none; }
html.is-android-webview .voice-input-shell > input.voice-input-field,
html.is-android-webview .voice-input-shell > textarea.voice-input-field { padding-right: 12px; }


@media (max-width: 760px) {
  .favorites-filter-grid { grid-template-columns: 1fr; }
  .favorites-select select { min-height: 42px; }
  .discover-challenge-watch-corner { top: 14px; right: 16px; }
  html.is-android-webview .discover-challenge-watch-corner { top: 12px; right: 14px; }
  .mine-list-card-head { gap: 10px; }
  .mine-list-head-actions { max-width: 44%; }
  .mine-list-head-actions .challenge-favorite-button span { overflow: hidden; text-overflow: ellipsis; }
}


@layer responsive {
  @media (max-width: 760px) {
    .public-profile-card { grid-template-columns: 1fr; justify-items: start; gap: 18px; padding: 20px; }
    .public-profile-avatar { width: 92px; height: 92px; }
    .public-profile-avatar.is-expanded { width: min(220px,70vw); height: min(220px,70vw); }
    .public-profile-challenge-grid,
    .observing-challenge-grid { grid-template-columns: minmax(0,1fr); }
    .observing-head { padding: 20px; }
    .observing-head-icon { width: 54px; height: 46px; }
    .observing-head-icon svg { width: 50px; height: 44px; }
  }
}

/* Touch/WebView: ein abgebrochener Verlassen-Dialog darf keinen klebenden
   Danger-Hover hinterlassen. Der eigentliche Klick-/Statuszustand bleibt
   vollständig in participation.js gesteuert. */
@media (hover: none) {
  .participant-leave-button:hover {
    background: transparent;
    color: var(--text);
  }
}
html.is-android-webview .participant-leave-button:hover {
  background: transparent;
  color: var(--text);
}

@layer responsive {
  @media (max-width: 760px) {
    html.is-android-webview .challenge-watch-detail-action {
      padding: 24px 16px 18px;
    }
    html.is-android-webview .challenge-watch-button.is-detail:not(.is-active) {
      min-height: 52px;
    }
    html.is-android-webview .challenge-watch-button.is-detail.is-active {
      min-height: 38px;
    }
    html.is-android-webview .challenge-watch-button.is-corner {
      min-height: 27px;
      max-width: 158px;
      padding-inline: 7px;
      font-size: 9px;
    }
  }
}