@media (max-width: 899px) {
  /* Ruhiger cremefarbener Kopf, beide Flaggen bleiben beim Titel. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header {
    padding-top: 8px !important;
    background: #fff6e9 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #app-title.header-title {
    /* V90.9: Der Textblock sitzt nun insgesamt 20 px tiefer als V90.7.
       Keine Beeinflussung des Layoutflusses. */
    transform: translateY(20px) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 750 !important;
    font-size: clamp(20px, 5.95vw, 25px) !important;
    line-height: 1.20 !important;
    letter-spacing: -0.50px !important;
    gap: clamp(5px, 1.6vw, 9px) !important;
    color: #493527 !important;
    margin: 0 !important;
  }
  /* Exakte drei Zeilen; kein Herz und keine dekorativen Linien. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #header-tagline {
    /* V90.9: Der Textblock sitzt nun insgesamt 20 px tiefer als V90.7.
       Keine Beeinflussung des Layoutflusses. */
    transform: translateY(20px) !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 0 3px !important;
    color: #493527 !important;
    font-size: clamp(12.5px, 3.55vw, 14.2px) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.27 !important;
    text-align: center !important;
    white-space: pre-line !important;
    text-shadow: none !important;
  }
  /* Originalgetreue Illustration aus der vom Nutzer freigegebenen Referenz: nur Landschaft.
     Text bleibt echter DOM-Text. Keine dekorativen Herzen oder Striche. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] .app-header-main::after {
    position: relative !important;
    z-index: 1 !important;
    height: clamp(77px, 21vw, 90px) !important;
    margin-top: -2px !important;
    background-image: url("../assets/design/main-header-landscape-reference-v909.webp") !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,.65) 5px, #000 12px) !important;
    mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,.65) 5px, #000 12px) !important;
    filter: none !important;
  }
  /* Die Karten- und Navigationsmodule werden bewusst nicht angefasst. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section.sidebar-section {
    background: #fff6e9 !important;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
    row-gap: 1px !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section > .sidebar-section-header {
    min-height: 29px !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-title {
    color: #493527 !important;
    font-weight: 750 !important;
    line-height: 1.23 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-sidebar-text {
    color: #46372c !important;
    font-weight: 400 !important;
    line-height: 1.32 !important;
  }
  /* V90.13: Button beginnt an der Tilla-Textspalte und endet
     vor der rechten Pflanze. Ausschliesslich die Aktionszeile. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section .tilla-sidebar-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline-end: clamp(24px, 10.25vw, 44px) !important;
    margin-top: 2px !important;
  }
  /* Exakt 48 CSS-Pixel, mit echtem sichtbarem Play-Pfeil.
     Alte :before-Touch-Overlays aus frueheren Styles werden neutralisiert. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3d2918 !important;
    font-size: clamp(11.5px, 3.25vw, 14px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }
  /* V90.13: Die sichtbare orange Flaeche und Bedienflaeche sind 44px hoch.
     Ausrichtung rechts neben Tilla, mit Abstand zur Pflanze. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--fsm-palette-orange, #f58b20) !important;
    box-shadow: 0 3px 8px rgba(114, 65, 22, .14) !important;
    pointer-events: none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea .tilla-play-emoji {
    display: none !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea > span:not(.tilla-play-emoji) {
    color: #3d2918 !important;
    font-weight: 700 !important;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    position: relative !important;
    z-index: 1 !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea:focus-visible {
    outline: 3px solid #507947 !important;
    outline-offset: 2px !important;
  }
}
@media (max-width: 359px) {
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #app-title.header-title {
    font-size: 19px !important;
    gap: 4px !important;
  }
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea {
    font-size: 11px !important;
    gap: 5px !important;
    padding-inline: 4px !important;
  }
  /* V90.13: Die sichtbare orange Flaeche und Bedienflaeche sind 44px hoch.
     Ausrichtung rechts neben Tilla, mit Abstand zur Pflanze. */
  html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--fsm-palette-orange, #f58b20) !important;
    box-shadow: 0 3px 8px rgba(114, 65, 22, .14) !important;
    pointer-events: none !important;
  }
}
@media (max-width: 899px) {
  html.fsm-polished[data-theme="light"] {
    --fsm-palette-heart: #7fa825;
    --fsm-palette-cluster: #8fbf5a;
    --fsm-palette-orange: #f58b20;
  }
  html.fsm-polished[data-theme="light"] #fsm-home-nav .fsm-home-nav__item > .fsm-daylog-heart {
    fill: var(--fsm-palette-heart) !important;
  }
  /* The cluster fill is unchanged; we simply keep its original reference value. */
  html.fsm-polished[data-theme="light"] :is(.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large) > div {
    background-color: var(--fsm-palette-cluster) !important;
  }
  /* Original spot-pin gradient (lighter to darker). */
  html.fsm-polished[data-theme="light"] .fsm-spot-pin__dot {
    background: radial-gradient(circle at 30% 20%, #a8ce77 0, #78ab46 45%, #598530 100%) !important;
  }
}

/* Match the play symbol to the button label in every layout. */
html.fsm-polished[data-theme="light"] body[data-app-view="map"] #tilla-section #btn-play-idea.btn-play-idea::before {
  content: none !important;
}
#btn-play-idea > .tilla-play-icon {
  flex: none;
  position: relative;
  z-index: 1;
}